Search code examples
androidtabsandroid-actionbarandroid-actionbar-compatandroid-appcompat

Unable to style ActionBar tab indicator using AppCompat


I've been trying to customise the blue indicator on Android ActionBar tabs using the AppCompat library with no success. I'm able to change the background colour of the tab bar, but it seems like themes.xml is completely ignoring the android:actionBarTabStyle property. I have a set of 9-patch images defined, a state-based drawable XML file.

Searching Google has yet to solve my issue, and I want to use as few dependencies as possible so I'd rather not use ActionBarSherlock unless it's a last resort.

Expected Result: Tab indicator should be orange, using the 9-patch images. Screenshot of tab bar. Tab indicator is orange

Actual Result: Tab indicator is still Holo blue Screenshot of tab bar. Tab indicator is blue

tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<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_orange" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_orange" />

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

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

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

themes.xml

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

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="style/Theme.AppCompat">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>


    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="android:actionBarStyle">@style/ActionBarTheme</item>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/ActionBarTheme</item>      
    </style>




    <!-- ActionBar styles -->
    <style name="ActionBarTheme" parent="@style/Widget.AppCompat.ActionBar">

        <item name="android:background">@color/titleBackgroundColour</item>
        <item name="android:backgroundStacked">@color/tabBackground</item>
        <item name="android:textColor">@color/titleTextColour</item>
        <item name="android:titleTextStyle">@style/ActionBarTitleTextStyle</item>
        <item name="android:actionBarTabStyle">@style/ThemeTabStyle</item>

        <!-- Support library compatibility -->
        <item name="actionBarTabStyle">@style/ThemeTabStyle</item>
    </style>


     <!-- ActionBar tabs styles -->
    <style name="ThemeTabStyle" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <!-- tab indicator -->
        <item name="android:background">@drawable/tab_indicator</item>

        <!-- Support library compatibility -->
        <item name="background">@drawable/tab_indicator</item>
    </style>
</resources>

Can anyone see any glaring issues with this code, and why it doesn't work? Many thanks.


Solution

  • I had the same problem, it worked when i split the support compatibility code from the regular codes. Put the regular code in a directory values-v14/themes.xml. This will make it so version 14 and up uses the regular declarations (ex. android:background) and 14 and below uses the support compat code (ex. background). Hope this is clear enough