How To Change The Colour Of Actionbar Navigation Tabs?

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

Solution 1:

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

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

with tab_indicator_holo.xml

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><!-- Non focused states --><itemandroid:state_focused="false"android:state_selected="false"android:state_pressed="false"android:drawable="@drawable/tab_unselected_holo" /><itemandroid:state_focused="false"android:state_selected="true"android:state_pressed="false"android:drawable="@drawable/tab_selected_holo" /><!-- Focused states --><itemandroid:state_focused="true"android:state_selected="false"android:state_pressed="false"android:drawable="@drawable/tab_unselected_focused_holo" /><itemandroid:state_focused="true"android:state_selected="true"android:state_pressed="false"android:drawable="@drawable/tab_selected_focused_holo" /><!-- Pressed --><!--    Non focused states --><itemandroid:state_focused="false"android:state_selected="false"android:state_pressed="true"android:drawable="@drawable/tab_unselected_pressed_holo" /><itemandroid:state_focused="false"android:state_selected="true"android:state_pressed="true"android:drawable="@drawable/tab_selected_pressed_holo" /><!--    Focused states --><itemandroid:state_focused="true"android:state_selected="false"android:state_pressed="true"android:drawable="@drawable/tab_unselected_pressed_focused_holo" /><itemandroid: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

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

and tab_indicator_ab_holo.xml

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><!-- Non focused states --><itemandroid:state_focused="false"android:state_selected="false"android:state_pressed="false"android:drawable="@color/transparent" /><itemandroid:state_focused="false"android:state_selected="true"android:state_pressed="false"android:drawable="@drawable/tab_selected_holo" /><!-- Focused states --><itemandroid:state_focused="true"android:state_selected="false"android:state_pressed="false"android:drawable="@drawable/list_focused_holo" /><itemandroid:state_focused="true"android:state_selected="true"android:state_pressed="false"android:drawable="@drawable/tab_selected_focused_holo" /><!-- Pressed --><!--    Non focused states --><itemandroid:state_focused="false"android:state_selected="false"android:state_pressed="true"android:drawable="@drawable/list_pressed_holo_dark" /><itemandroid:state_focused="false"android:state_selected="true"android:state_pressed="true"android:drawable="@drawable/tab_selected_pressed_holo" /><!--    Focused states --><itemandroid:state_focused="true"android:state_selected="false"android:state_pressed="true"android:drawable="@drawable/tab_unselected_pressed_holo" /><itemandroid: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?

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

with in minitab_lt.xml

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_pressed="true"android:state_selected="true"android:drawable="@drawable/minitab_lt_press" /><itemandroid:state_selected="true"android:drawable="@drawable/minitab_lt_selected" /><itemandroid:state_pressed="true"android:drawable="@drawable/minitab_lt_unselected_press" /><itemandroid: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...

Solution 2:

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.