Why does my custom 'actionBarTabStyle' not override the default style / theme?

Question

I've been trying for days now to override the Holo Theme for a custom Tab Style, but my changes don't have any effect.

Here's my styles.xml

<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="@android:style/Theme.Holo">
    <item name="android:tabWidgetStyle">@style/MyActionBarTabs</item>
</style>

<!-- ActionBar tabs styles -->
<style name="MyActionBarTabs" parent="@android:style/Widget.Holo.ActionBar.TabView">

    <!-- tab indicator -->
    <item name="android:background">@drawable/tabselector</item>
</style>>

This is my tabselector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

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

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

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

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

</selector>

I've added the tabs using TabHost in my activity and its layout looks like this

<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

</android.support.v4.app.FragmentTabHost>

I have followed the examples from the Android Developer Page

My tabs still look the same. My tab indicators are supposed to be my custom color of pink. However, there is no change, they are still blue.

Things to note:

1. My manifest file references the updated theme in my application tags
2. My styles.xml is updated in each value folder (values, values-v11, values-v14)
3. All this did was add an action bar on top of my application with my ic_launcher image and title

What am I missing or doing wrong? Appreciate any help. Thank you all!

Answer 1

The tabs in the ActionBar use a different theme than the tabs in TabHost.

All you need to do is change android:actionBarTabStyle to android:tabWidgetStyle.

Full example

<style name="Your.Theme" parent="@android:style/Theme.Holo.Light.DarkActionBar">
    <item name="android:tabWidgetStyle">@style/Your.TabWidget</item>
</style>

<style name="Your.TabWidget" parent="@android:style/Widget.Holo.TabWidget">
    <item name="*android:tabLayout">@layout/your_tab_layout</item>
</style>

<style name="Your.Tab" parent="@android:style/Widget.Holo.ActionBar.TabView">
    <item name="android:background">@drawable/your_tab_indicator</item>
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_weight">1</item>
    <item name="android:minWidth">80dip</item>
</style>

---

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/Your.Tab"
    android:layout_height="?android:attr/actionBarSize"
    android:orientation="horizontal" >

    <ImageView
        android:id="@android:id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:visibility="gone" />

    <TextView
        android:id="@android:id/title"
        style="@android:style/Widget.Holo.ActionBar.TabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:maxWidth="180dip" />

</LinearLayout>

Although, android:tabLayout isn't a public attribute (hence the *). Google wouldn't recommend creating the style like that because of this and instead would suggest modifying the indicator dynamically. So, something like this:

    final TabWidget tabWidget = tabHost.getTabWidget();
    for (int i = 0; i < tabWidget.getTabCount(); i++) {
        final View tab = tabWidget.getChildTabViewAt(i);
        tab.setBackground(getResources().getDrawable(R.drawable.your_tab_indicator));
    }

Results