Android theming Actionbar tab

Question

I want to customize my tab like this

i.e a selected tab will have a white background while a unselected tab will have a green background.

Till now I am able to achieve

to achieve this I am doing the following as my style:-

<resources>
    <style name="ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@color/sa_green</item>
        <item name="android:backgroundStacked">@color/stacked_green</item>
        <item name="android:backgroundSplit">@color/sa_green</item>
    </style>

    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/ActionBar</item>
    </style>
</resources>

color.xml

<resources>
    <color name="sa_green">#14a804</color>
    <color name="stacked_green">#118504</color>
    <color name="accent_green">#97e08f</color>
</resources>

How to remove the blue indicator and change the background on the basis of which tab is selected?

Answer 1

You need a selector xml, instead of just @color/sa_green. The selector will tell the tab, according to its state, what color to use.

You can go as simple as that:

drawable/tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false"
      android:background="@color/green" />
    <item android:state_pressed="true"
      android:drawable="@color/white" />
</selector>

Then you just have to put

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

in your theme

And declare in your style ActionBar, something like this:

<style name="ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
    <item name="android:background">@drawable/tab_selector</item>
</style>

And that should be it