How to change the color of tab 'underbar'

Question

Ok i'm loosing more sanity then ever. I can't find/understand how to style the damn thing. I managed to change the background of the tab itself but I can't cahnge the color of the bar under the selected tab.

How to change it from blue to something.

My styles.xml unfortunately I have very bad understanding of how it works

<?xml version="1.0" encoding="utf-8"?>
<resources>


    <style name="Theme.Styled" parent="Theme.Sherlock.Light">
        <item name="actionBarTabStyle">@style/Widget.Styled.ActionBarTab</item>
        <item name="android:actionBarTabStyle">@style/Widget.Styled.ActionBarTab</item>

        <item name="actionBarTabBarStyle">@style/Widget.Styled.ActionBarTabBar</item>
        <item name="android:actionBarTabBarStyle">@style/Widget.Styled.ActionBarTabBar</item>

        <item name="actionBarTabTextStyle">@style/myText</item>
        <item name="android:actionBarTabTextStyle">@style/myText</item>


    </style>

    <style name="Widget.Styled.ActionBarTab" parent="Widget.Sherlock.Light.ActionBar.TabView">
    <!--    <item name="background">@drawable/startbcg</item>
        <item name="android:background">@drawable/startbcg</item>
        <item name="backgroundSplit">@drawable/bg_striped_split</item>
        <item name="android:backgroundSplit">@drawable/bg_striped_split</item>
    -->
    </style>


    <style name="Widget.Styled.ActionBarTabBar" parent="Widget.Sherlock.Light.ActionBar.TabBar">

        <item name="background">@drawable/startbcg</item>
        <item name="android:background">@drawable/startbcg</item>
         <item name="backgroundSplit">@drawable/bg_striped_split</item>
        <item name="android:backgroundSplit">@drawable/bg_striped_split</item>

    </style>

    <style name="myText" parent="Widget.Sherlock.Light.ActionBar.TabText">
        <item name="android:textAppearance">@android:style/TextAppearance.Medium</item>
        <item name="android:textColor">@android:color/primary_text_dark</item>
        <item name="android:textSize">10sp</item>


    </style>
<style name="myTextInv" parent="Widget.Sherlock.Light.ActionBar.TabText.Inverse">
        <item name="android:textAppearance">@android:style/TextAppearance.Medium</item>
        <item name="android:textColor">@android:color/primary_text_dark</item>
        <item name="android:textSize">10sp</item>


    </style>
</resources>

Bonus question: where I can find what properties (like background) certain stuff has.

Answer 1

I found that for the background it's better to copy the drawables (9 patches and xml) found on the Android SDK res directory and change it to have the color you like.

They use a background with the bottom bar included, so I don't think it's possible to change the bottom bar alone.

Here's what I have, working with green color for the bottom bar:

<style name="customTabStyle" parent="Widget.Sherlock.ActionBar.TabView">
    <item name="android:showDividers">none</item>
    <item name="android:measureWithLargestChild">true</item>
    <!-- This was a copy from the sdk drawable -->
    <item name="android:background">@drawable/tab_indicator</item>

    <item name="background">@drawable/tab_indicator</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">normal</item>
</style>


<style name="customTabBar" parent="Widget.Sherlock.ActionBar.TabBar">
    <item name="android:showDividers">middle</item>

    <item name="android:divider">@drawable/tab_divider</item>
    <item name="divider">@drawable/tab_divider</item>

    <item name="android:dividerPadding">10dip</item>

    <item name="android:background">@drawable/tab_bg</item>
</style>

The tab indicator looks like this:

<?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" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected" />

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

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

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

I hope it helps!

Answer 2

Use ActionbarStyleGenerator to style the Actionbar. This is by far the simplest and most intuitive way.

How to:

1. Use the UI to select colors for different items
2. Once done click on "DOWNLOAD .ZIP"
3. The ZIP file contains resource files that you have to copy in your project res/layout and res/drawableXXXX folders