Android – Theming Android ActionBar: Change TabBar Background

androidandroid-actionbarandroid-actionbar-compatandroid-tabsandroid-theme

I followed this Guide to style my ActionBar. I use fixed tabs in my app so I want to theme the tabs too.
(Note: I'm using the appcompat theme to ensure some backwards compatibility)

So I used

<style
    name="CustomTheme"
    parent="@style/Theme.AppCompat.Light" >

    <item name="android:actionBarStyle">@style/CustomActionBar</item>
    <item name="actionBarStyle">@style/CustomActionBar</item>

    <item name="android:actionBarTabStyle">@style/CustomActionBarTabs</item>
    <item name="actionBarTabStyle">@style/CustomActionBarTabs</item>
</style>

as my theme.

I set the ActionBar background without problems, but then I tried theming the tabs with:

<style
    name="CustomActionBarTabs"
    parent="@style/Widget.AppCompat.ActionBar.TabView" >

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

The background points to a StateList where I set different drawables for different contexts, which works kind of as expected. Except it works just for the tabs. Not for the ActionBar.

The separator and the background of the tab bar is not themed.
How can I theme those ? (The grey part)

example image

Theme Creation Guidelines

I wonder if there are any guidelines for creating a theme that looks good ?
(good = similar to default theme, so the app fits into the android ecosystem)

default theme image

Because If you look closely at the default themes you can see a small line at the bottom of the ActionBar drawable. (The part which is light green in my theme)
There may be other things which you should consider when creating a theme that looks similar to the default themes, so it would be nice to some guideline.

Also: Should the TabBar always be darker than the ActionBar ?
(If so, how much darker?)

How much brighter/darker than the ActionBar color should the image color (like the color of the overflow button in the image) be ?

Thanks in advance,
Uriel

Best Answer

Add this

<style
name="CustomTheme"
parent="@style/Theme.AppCompat.Light" >
.
.
.
<item name="android:actionBarTabBarStyle">@style/TabBar</item>
</style>

And then

<style name="TabBar" parent="@style/Widget.AppCompat.ActionBar.TabBar">
    <item name="android:background">/** Whatever color you want, like #ffff00 **/</item>
</style>