Styling Tab Widget's using XML

Question

So I am having great difficultly styling tab widgets using xml. Everywhere I have searched seem's to either suggest solutions to do this programmatically, or refers to the actionBarTab style >:|

What I am trying to achieve is a customised tab from the tabwidget drawables that was generated using http://android-holo-colors.com/

I manage to get the

So in my custom theme I have this code:

<style name="RR.App.Theme" parent="android:Theme.Holo.Light">
...
<item name="android:tabWidgetStyle">@style/RR.Tab.Widget</item>
...
</style>

This is the RR.Tab.Widget style: (none of these seem to make such difference)

<style name="RR.Tab.Widget" parent="android:Widget.Holo.Light.TabWidget">
<item name="android:background">@drawable/rrtheme_tab_indicator_holo</item>
<item name="android:tabStripEnabled">false</item>
<item name="android:tabStripLeft">@null</item>
<item name="android:tabStripRight">@null</item>
</style>

This is the generated drawable:

<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/rrtheme_tab_unselected_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/rrtheme_tab_selected_holo" />

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/rrtheme_tab_unselected_focused_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/rrtheme_tab_selected_focused_holo" />

    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/rrtheme_tab_unselected_pressed_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/rrtheme_tab_selected_pressed_holo" />

    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/rrtheme_tab_unselected_pressed_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/rrtheme_tab_selected_pressed_holo" />
</selector>

This is what it currently looks like:

All I'm trying to do is change this blue color to green!

Many thanks for your help in advance :)

Answer 1

I recommend you to take a look at this: Customize Tab indicator (dead link)

Also to have your tab customized use Android Action Bar Style Generator. I always use it to have my Tabs in the color I want.

Hope I helped you