TabWidget current tab bottom line color

The color of the tab indicator is being set by a selector drawable which can be found here and looks like this:

<!-- AOSP copyright notice can be found at the above link -->
<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_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
</selector>

The drawables that the selector uses are all colored in that light blue. You can replace those drawables with your own recolored versions. The originals look like this (originals are small, links included):

You’ll want to copy the above selector into your own project along with the drawables. Then you’ll want to recolor the drawables to whatever color you want them to be. Then you’ll want to set your selector as the background for your tab indicators. You can do that like this (after setting up your tabs):

TabHost host = (TabHost)view.findViewById(R.id.tab_host);
TabWidget widget = host.getTabWidget();
for(int i = 0; i < widget.getChildCount(); i++) {
    View v = widget.getChildAt(i);

    // Look for the title view to ensure this is an indicator and not a divider.
    TextView tv = (TextView)v.findViewById(android.R.id.title);
    if(tv == null) {
        continue;
    }
    v.setBackgroundResource(R.drawable.your_tab_selector_drawable);
}

There might be an easier way to do this by setting your own customer indicator layout with a background selector but this is what worked easiest for me.

Leave a Comment