Change tab color, ActionBarCompat

Question

I want to change the color of my tab, this is my code

action_bar_stacked_background.xml

<!-- STATES WHEN BUTTON IS NOT PRESSED -->


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

<!-- Focused states (such as when focused with a d-pad or mouse hover) -->

<item android:drawable="@drawable/tab_unselected" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/tab_selected" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>

My styles.xml

<style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
    <item name="android:background">@drawable/action_bar_background</item>  
    <item name="background">@color/background_lista</item>
    <item name="actionModeBackground">@color/actionbar_color</item>
    <item name="titleTextStyle">@style/MyActionBarTitleText</item>
    <item name="subtitleTextStyle">@style/MyActionBarSubtitleText</item>
    <item name="homeAsUpIndicator">@drawable/ic_actionbar_back_button</item>

    <!-- Support library compatibility -->
    <item name="actionBarTabStyle">@style/MyActionBarTabs</item>
     Support library compatibility -->
    <!-- <item name="background">@drawable/actionbar_background</item> -->
</style>

<style name="MyActionBarTabs" parent="@style/Widget.AppCompat.ActionBar.TabView">
    <item name="android:background">@drawable/action_bar_stacked_background</item>
</style>

My values-v11/styles.xml

<style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
    <item name="android:background">@drawable/action_bar_background</item>
    <item name="background">@color/actionbar_color</item>
    <item name="android:actionModeBackground">@color/actionbar_color</item>
    <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    <item name="android:subtitleTextStyle">@style/MyActionBarSubtitleText</item>        
    <item name="android:homeAsUpIndicator">@drawable/ic_actionbar_back_button</item>
    <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
    <!-- Support library compatibility -->
    <!-- <item name="background">@drawable/actionbar_background</item> -->
</style> 

<style name="MyActionBarTabs" parent="@style/Widget.AppCompat.ActionBar.TabView">
    <item name="android:background">@drawable/action_bar_stacked_background</item>
</style>

tab_selected.xml

<!-- draw bottom line to fill the spaces between tabs -->
<item android:top="63dp">
    <shape android:shape="rectangle" >
        <solid android:color="#898989" />
    </shape>
</item>
<!-- leave bottom line only 1px of height, the rest is masked out -->
<item
    android:bottom="1px"
    android:top="63dp">
    <shape android:shape="rectangle" >
        <solid android:color="@color/color_background_stacked" />
    </shape>
</item>
<!-- draw tab background -->
<item
    android:left="@dimen/tab_space"
    android:right="@dimen/tab_space">
    <shape android:shape="rectangle" >
        <corners
            android:bottomLeftRadius="0.1dp"
            android:bottomRightRadius="0.1dp"
            android:topLeftRadius="@dimen/corner_radius"
            android:topRightRadius="@dimen/corner_radius" />

        <gradient
            android:angle="90"
            android:endColor="#ccc"
            android:startColor="@color/color_background_stacked" />

        <stroke
            android:width="1px"
            android:color="#898989" />
    </shape>
</item>
<!-- mask out the bottom line of the tab shape -->
<item
    android:left="@dimen/tab_space_plus1"
    android:right="@dimen/tab_space_plus1"
    android:top="63dp">
    <shape android:shape="rectangle" >
        <solid android:color="@color/color_underline_stacked" />
    </shape>
</item>

and tab_unselected.xml

<item android:top="63dp">
    <shape android:shape="rectangle" >
        <solid android:color="#898989" />
    </shape>
</item>
<item
    android:bottom="1px"
    android:top="63dp">
    <shape android:shape="rectangle" >
        <solid android:color="@color/color_background_stacked" />
    </shape>
</item>
<item
    android:left="@dimen/tab_space"
    android:right="@dimen/tab_space">
    <shape android:shape="rectangle" >
        <corners
            android:bottomLeftRadius="0.1dp"
            android:bottomRightRadius="0.1dp"
            android:topLeftRadius="@dimen/corner_radius"
            android:topRightRadius="@dimen/corner_radius" />

        <gradient  
            android:angle="90"
            android:endColor="#aaa"
            android:startColor="#ddd" />

        <stroke
            android:width="1px"
            android:color="#898989" />
    </shape>
</item>

The tabs are shown with grey bcakground and blue underline, I just want to change de underline color. How can I solve it?

Greetings.

Answer 1

actionBarTabStyle attribute should be with the base Application/Activity theme , not under ActionBar style

Create a custom theme like this

 <style name="AppTheme" parent="Theme.Base.AppCompat">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:actionBarTabStyle">@style/MyActionBarTabView</item>
    <item name="actionBarTabStyle">@style/MyActionBarTabView</item>
</style>

And, custom ActionBarTab theme like this

<style name="MyActionBarTabView" parent="Widget.AppCompat.Base.ActionBar.TabView">
    <item name="android:background">@drawable/action_bar_stacked_background</item>
</style>

Set the AppTheme to whole Application theme or for an Activity . Let me know how it works.