How to change the colour of ActionBar navigation tabs?

Question

I have an ActionBar in an app, and it has navigation tabs embedded in it (not TabHost!). By default the tabs show as dark grey, with a thin blue line under all the tabs, and a blue marker on the selected tab.

Which styles do I override to change those colours?

enter image description here

user387184 · Accepted Answer · 2011-12-27T22:10:05.497

I have not changed the tabs themselves, but I would assume that you can do it with these styles from styles.xml...

 <style name="Widget.Holo.TabWidget" parent="Widget.TabWidget">
        <item name="android:tabStripLeft">@null</item>
        <item name="android:tabStripRight">@null</item>
        <item name="android:tabStripEnabled">false</item>
        <item name="android:divider">?android:attr/dividerVertical</item>
        <item name="android:showDividers">middle</item>
        <item name="android:dividerPadding">8dip</item>
        <item name="android:measureWithLargestChild">true</item>
        <item name="android:tabLayout">@android:layout/tab_indicator_holo</item>
    </style>

with tab_indicator_holo.xml

  <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

        <!-- Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

        <!-- Pressed -->
        <!--    Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

        <!--    Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_focused_holo" />
    </selector>

Or you may also try

   <style name="Widget.Holo.ActionBar.TabView" parent="Widget.ActionBar.TabView">
            <item name="android:background">@drawable/tab_indicator_ab_holo</item>
            <item name="android:paddingLeft">16dip</item>
            <item name="android:paddingRight">16dip</item>
        </style>

and tab_indicator_ab_holo.xml

   <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@color/transparent" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

        <!-- Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/list_focused_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

        <!-- Pressed -->
        <!--    Non focused states -->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/list_pressed_holo_dark" />
        <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

        <!--    Focused states -->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
        <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
    </selector>

Finally using the two png-9 drawables: tab_selected_holo and tab_unselected_holo. They look like the two thicker and thinner blue lines you are talking about.

Or do you mean the minitabs?

 <style name="Widget.ActionBar.TabView" parent="Widget">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@drawable/minitab_lt</item>
        <item name="android:paddingLeft">4dip</item>
        <item name="android:paddingRight">4dip</item>
    </style>

with in minitab_lt.xml

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:state_selected="true"
          android:drawable="@drawable/minitab_lt_press" />
    <item android:state_selected="true"
          android:drawable="@drawable/minitab_lt_selected" />
    <item android:state_pressed="true"
          android:drawable="@drawable/minitab_lt_unselected_press" />
    <item android:drawable="@drawable/minitab_lt_unselected" />
</selector>

If you need another definition just search for TabWidget in here: https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

Then as usual define your own style with all the required attributes and drawables...

I can't see anything in there to set the colours of the background, the line at the bottom, or the selected markers... — Ollie C, Dec 27 '11 at 18:40
See if you mean the minitabs of the TabViews. They look like what you are referring to. I edited my answer accordingly... — user387184, Dec 27 '11 at 21:35
What is the "minitab" you're referring to? I'm talking about these tabs http://developer.android.com/images/ui/actionbar.png — Ollie C, Dec 28 '11 at 12:32
Tbh I've found your answer very hard to read from. I've used this blog post instead which is much clearer http://android-developers.blogspot.com/2011/04/customizing-action-bar.html — Ollie C, Dec 28 '11 at 14:52
Thanks for the feedback, this is quite interesting, since in your reference they use ad_tab_selected_holo instead of tab_selected_pressed_holo in my reference. Actually I can't find the style you referenced anywhere in my filesystem, neither the drawable ad_tab_selected_holo. I wonder what that means, and how one could find this in the first place? Hope it works though! Did you just use the Light style or did you actually also change the drawable? — user387184, Dec 28 '11 at 15:56
I am using ActionBarSherlock, so I ended up inheriting from style/Widget.Sherlock.ActionBar.TabView and I've tweaked the bitmaps to use the colours I need. It's taken several hours to work through all this, but I'm happy to have succeeded with it at last. thx. — Ollie C, Dec 28 '11 at 16:10
I can't get any of these to work, you aren't very descriptive with their implementation. What do I put in the manifest? What do you mean by thr with and and blocks of code? Do I add those with the above code or do I do those also? — , Aug 20 '14 at 14:18

score 3 · Answer 2 · answered Dec 31 '13 at 03:14

3

If you want to customize easily your tab bars, you can use this great tool : http://jgilfelt.github.io/android-actionbarstylegenerator

You just select the colors you want and it automatically generates the style XMLs, the PNGs, etc.

answered Dec 31 '13 at 03:14

Arnaud

7,259
10
50
71

How to change the colour of ActionBar navigation tabs?

2 Answers2

Linked