Change background of the ActionBarSherlock alone. Not the Tabs

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

PravinCG · Accepted Answer · 2012-11-08T06:05:23.790

6

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

How to:

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

edited Nov 08 '12 at 06:05

answered Nov 08 '12 at 05:51

PravinCG

7,688
3
30
55

I mean where to use these drawables?? In the custom theme instead of colors?? – Archie.bpgc Nov 08 '12 at 06:14
You need to simply copy over the folders you download. It does all the code for you. – PravinCG Nov 08 '12 at 06:14
Yeah done, Thanks a lot. But how can i change the TextColor of a Tab programatically, like if Tab is selected TextColor must be white, else grey. Or is it possible to do in the theme itself? – Archie.bpgc Nov 08 '12 at 07:25
That should be straight forward, search for styling ActionBarSherlock. If this answer was useful to you kindly accept it. – PravinCG Nov 08 '12 at 07:29
yaa thnx for this answer.. i used this successfully.... but one doubt, how we can change the textColor of the action bar menu items..???? – Vikky Jun 02 '13 at 12:04
@PravinCG i had dowlod nd how can i use it pls tell me something i had put shareloc them in meanifiest file then now what i put nd which them i use in menifieest? – PankajAndroid Aug 01 '13 at 09:22

Tomik · Answer 2 · 2012-11-07T16:57:56.460

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>

I added the complete code. The problem here is backgroundcolor and textcolor works fine for the ActionBar not the TabsBar. am i using the wrong parent for my ActionBarTab — Archie.bpgc, Nov 07 '12 at 15:51
You are wrongly combining the styles. Styling action bar is problematic and everything has it's right (and sometimes unexpected) place. For example `backgroundStacked` has no effect in `actionBarTabStyle` it has to be part of `actionBarStyle`. Tab text color has to be styled differently. I'll update the answer. — Tomik, Nov 07 '12 at 16:19
I did exactly as you suggested. But here the problem is, actionBar background color is same as TabBat color i.e, grey, The text for ActionBar and TabBar are working fine. I updated the question with the code i am using right now. This has been the main problem, my ActionBar and TabBar both have the same color always, previously it was same as the ActionBar color(blue), after using your code, it the TabBat color for both(grey) — Archie.bpgc, Nov 08 '12 at 05:49

Change background of the ActionBarSherlock alone. Not the Tabs

2 Answers2

Linked