Change background of the ActionBarSherlock alone.

Question

I used this code to change the Color of ActionBarSherlock:

    <style name="Theme.MyTheme" parent="Theme.Sherlock.Light.DarkActionBar">

    <!-- set style for action bar (affects tab bar too) -->
    <item name="actionBarStyle">@style/Widget.MyTheme.ActionBar</item>
    <item name="android:actionBarStyle">@style/Widget.MyTheme.ActionBar</item>
    <!-- define text style for tabs -->
    <item name="actionBarTabTextStyle">@style/MyTheme.ActionBar.TabText</item>
    <item name="android:actionBarTabTextStyle">@style/MyTheme.ActionBar.TabText</item>
</style>

<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">

    <!-- define background for action bar (sets default for all parts of action bar - main, stacked, split) -->
    <item name="android:background">#blue</item>
    <item name="background">#blue</item>
    <item name="android:titleTextStyle">@style/MyTheme.ActionBar.TitleTextStyleWhite</item>
    <item name="titleTextStyle">@style/MyTheme.ActionBar.TitleTextStyleWhite</item>

    <!-- set background for the tab bar (stacked action bar) - it overrides the background property -->
    <item name="android:backgroundStacked">#grey</item>
    <item name="backgroundStacked">#grey</item>
</style>

<style name="MyTheme.ActionBar.TabText" parent="Widget.Sherlock.ActionBar.TabText">
    <item name="android:textColor">#black</item>
</style>

<style name="MyTheme.ActionBar.TitleTextStyleWhite" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textColor">#white</item>
</style>

as suggested by Jake Warton here:

Change ActionBarSherlock background color

But the thing is the ActionBar and Tabs both change to Blue color. I actually want to change The top actionBar background to Blue and Tabs background to White

how to do this?

Thank You

Answer 1

There are two ways how you can change background of the tab bar:

1) If you are using tabs only in portrait orientation, you can set backgroundStacked (and android:backgroundStacked) item of (android:)actionBarStyle. It sets the background for stacked action bar (the tab bar).

Your theme has to contain:

<style name="Theme.MyTheme" parent="Theme.Sherlock.Light.DarkActionBar">
    <!-- set style for action bar (affects tab bar too) -->
    <item name="actionBarStyle">@style/Widget.MyTheme.ActionBar</item>
    <item name="android:actionBarStyle">@style/Widget.MyTheme.ActionBar</item>
</style>

The ActionBarStyle then has to be:

<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
    <!-- define background for action bar (sets default for all parts of action bar - main, stacked, split) -->
    <item name="android:background">#ff0000ff</item>
    <item name="background">#ff0000ff</item>

    <!--  set background for the tab bar (stacked action bar) - it overrides the background property -->
    <item name="android:backgroundStacked">#ffff</item>
    <item name="backgroundStacked">#ffff</item>
</style>

That's all you have to do. But this solution won't work in landscape. In landscape the tabs can be moved to the main action bar.

2) If you are using tabs in both portrait and landscape orientation, a different solution has to be used.

The theme has to contain:

<style name="Theme.MyTheme" parent="Theme.Sherlock.ForceOverflow">
    <!-- set style for action bar -->
    <item name="actionBarStyle">@style/Widget.MyTheme.ActionBar</item>
    <item name="android:actionBarStyle">@style/Widget.MyTheme.ActionBar</item>

    <!-- set the tab bar style -->
    <item name="actionBarTabBarStyle">@style/Widget.MyTheme.TabBar</item>
    <item name="android:actionBarTabBarStyle">@style/Widget.MyTheme.TabBar</item>
</style>

And set background for the tab bar style:

<style name="Widget.MyTheme.TabBar" parent="Widget.Sherlock.ActionBar.TabBar">
    <item name="android:background">#ffff</item>
</style>

Note: If you try to combine both approaches, then the background from actionBarTabBarStyle will be placed over the background from backgroundStacked.

Note: These two approaches sets background for the whole tab bar, setting the background for a single tab in tab bar is different.

Tab text color

If you want to set text color for the tabs you have to define actionBarTabTextStyle.

The theme has to contain:

<style name="Theme.MyTheme" parent="Theme.Sherlock.Light.DarkActionBar">
    ...
    <!-- define text style for tabs -->
    <item name="actionBarTabTextStyle">@style/MyTheme.ActionBar.TabText</item>
    <item name="android:actionBarTabTextStyle">@style/MyTheme.ActionBar.TabText</item>
</style>

The tab text style is then:

<style name="MyTheme.ActionBar.TabText" parent="Widget.Sherlock.ActionBar.TabText" >
    <item name="android:textColor">#FF000000</item>
</style>

Answer 2

Use ActionbarStyleGenerator to change the color of what all you need. This is by far the simplest and most intuitive way.

How to:

1. Use the UI to select color for different items.
2. Once done click on download .zip
3. ZIP would contain resource files under desired folders which you need to copy in your projects res/layout and res/drawableXXXX folders