How to change the color of tab 'underbar' in actionbarsherlock

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.

Solution 1

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

Solution 2

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!

Comments

[Shrikant]

after downloading and copying the necessary files do i need to change anything in code?

[Andrea Motto]

@Shrikant, you need to assign the theme to the Activity in your manifest file: <activity ... android:theme="@style/Theme.Example" > </activity>

[Shrikant]

Thanks for the help, I got it to run now. I had only changed it in Manifest file. But would like to tell the fellow users of SherlockActivity that you have to change the theme in your main class also. You will get this line in the sample projects main class, public int THEME = R.style.Theme_Example;

[Etienne Lawlor]

I am doing something similar HERE !!! stackoverflow.com/questions/19623805/…

[ashabasa]

@Shrikant, please, what do you mean by the main class ? Because up to now, i downloaded the zip file, I changed my manifest, but I still don't get my application to run correctly ! what do I have to do next ?

[enreas]

Remember to use Chrome with ActionbarStyleGenerator, otherwise it may not work.