Change text color and selector in TabWidget

Question

I've a TabWidget, independently of the ÀctionBar, in aFragmentTabHost`.

I want to customize the look and feel of the TabWidget but I don't get it. My intention is to change the text color and the selector color, as you can see in the image I can change the background of the TabWidget. I don't want to use a custom TextViewfor the tabs because the tabs must be with the Holo look and feel.

I've tried to put a style to the TabWidgetbut it doesn't work. In this way:

<TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            style="@style/MyTabs"
            />

and with the style

<style name="MyTabs">
        <item name="android:textColor">@color/white</item>
        <item name="android:background">@drawable/tabs</item>
        <item name="android:backgroundStacked">@color/red_action_bar</item>
    </style>

I've tried to add the style from a theme.xml using theparent="android:Widget.Holo.TabWidget", but nothing happens.

Answer 1

I finally find a way to do that. Using this code in the onCreateViewmethod of the Fragment

    for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
                View v = tabHost.getTabWidget().getChildAt(i);
                v.setBackgroundResource(R.drawable.tabs);

                TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
                tv.setTextColor(getResources().getColor(R.color.white));
}

And setting the bakcground color of the TabWidgetto red

Answer 2

I have not changed the tabs themselves, but I would assume that you can do it with these styles from styles.xml...

<style name="Widget.Holo.TabWidget" parent="Widget.TabWidget">
        <item name="android:tabStripLeft">@null</item>
        <item name="android:tabStripRight">@null</item>
        <item name="android:tabStripEnabled">false</item>
        <item name="android:divider">?android:attr/dividerVertical</item>
        <item name="android:showDividers">middle</item>
        <item name="android:dividerPadding">8dip</item>
        <item name="android:measureWithLargestChild">true</item>
        <item name="android:tabLayout">@android:layout/tab_indicator_holo</item>
    </style>

with tab_indicator_holo.xml

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

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

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

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

Or you may also try

  <style name="Widget.Holo.ActionBar.TabView" parent="Widget.ActionBar.TabView">
            <item name="android:background">@drawable/tab_indicator_ab_holo</item>
            <item name="android:paddingLeft">16dip</item>
            <item name="android:paddingRight">16dip</item>
        </style>

and tab_indicator_ab_holo.xml

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

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

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

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

Finally using the two png-9 drawables: tab_selected_holo and tab_unselected_holo. They look like the two thicker and thinner blue lines you are talking about.

Or do you mean the minitabs?

<style name="Widget.ActionBar.TabView" parent="Widget">
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@drawable/minitab_lt</item>
        <item name="android:paddingLeft">4dip</item>
        <item name="android:paddingRight">4dip</item>
    </style>

with in minitab_lt.xml

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:state_selected="true"
          android:drawable="@drawable/minitab_lt_press" />
    <item android:state_selected="true"
          android:drawable="@drawable/minitab_lt_selected" />
    <item android:state_pressed="true"
          android:drawable="@drawable/minitab_lt_unselected_press" />
    <item android:drawable="@drawable/minitab_lt_unselected" />
</selector>

If you need another definition just search for TabWidget in here: https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

Then as usual define your own style with all the required attributes and drawables...

Answer 3

Try this:

1.Create a new style:

<style name="TabText">
    <item name="android:textColor">@color/YOUR_COLOR</item>
</style>

2.On Tab Host, set theme:

<TabHost android:theme="@style/TabText">

3.The background you can set normally on TabWidget

<TabWidget android:background="#FFF"/>

Answer 4

As I answered here, this can actually be done using XML themes. The TabWidget uses android:textPrimaryColor for the selected tab and android:textSecondaryColor for the unselected ones. The accent color is determined by colorAccent and the background color by colorPrimary Thus, you can achieve the desired customization like this:

In styles.xml:

<style name="TabWidgetTheme" parent="AppTheme">
    <item name="colorPrimary">@color/your_primary_color</item>
    <item name="colorAccent">@color/your_accent_color</item>
    <item name="android:textPrimaryColor">@color/your_primary_color</item>
    <item name="android:textSecondaryColor">@color/your_secondary_color</item>
</style>

In your layout:

<TabHost
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:theme="@style/TabWidgetTheme"/>

Note that the android:theme should not be directly in the TabWidget itself, but rather the containing TabHost or similar.