TabWidget current tab bottom line color

Android Problem Overview

I have a TabWidget for which I have enabled and set the stripLeft and stripRight...

mTabHost.getTabWidget().setStripEnabled(true);
mTabHost.getTabWidget().setRightStripDrawable(R.drawable.redline);
mTabHost.getTabWidget().setLeftStripDrawable(R.drawable.redline);

As you can see in the image below, this does not change the bottom line color of the currently selected tab (TAB 2).

enter image description here

How can I change the bottom line color of the currently selected tab which is defaulted to blue at the moment? (I am guessing the blue color is being set in the default AppTheme style in styles.xml.)

I looked at this answer but it does not say how to change the color...

Android Solutions

Solution 1 - Android

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.

Solution 2 - Android

You can use app:tabIndicatorColor for this purpose. It will change the selected tab indicator line color according to your requirement.

<android.support.design.widget.TabLayout
                    android:id="@+id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabIndicatorColor="@android:color/white"
                    app:tabMode="fixed" />

Solution 3 - Android

This is how I changed my tabs,

private void changetabs(TabWidget tabWidget) {
    // Change background
    for(int i=0; i < tabWidget.getChildCount(); i++)
        tabWidget.getChildAt(i).setBackgroundResource(R.drawable.tab_selector);
}

and my tab_selector.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_holo" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

Hope it will help some one.

Solution 4 - Android

Incase some one stumbles on it, There is online tool to quickly build the drawables (9 patch) for the tabs. Just select the color and press the button Here you go ...

Thanks to Jeff Gilfelt

The Android Action Bar Style Generator allows you to easily create a simple, attractive and seamless custom action bar style for your Android application. It will generate all necessary nine patch assets plus associated XML drawables and styles which you can copy straight into your project.

http://jgilfelt.github.io/android-actionbarstylegenerator/

Solution 5 - Android

You can use a filter,
This will be applied to the region that isn't transparent

tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).getBackground().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY);

One line of code - no need to change states.

Solution 6 - Android

Accent color is used by default as active tab color. You can set/change it in style.xml file:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
       
    <item name="colorAccent">@color/myAccentColor</item>

</style>

Solution 7 - Android

My way to solve this problem is using setBackgroundResource. First, you have to create the exactly same backgroud

line_label_1_pressed.xml

<item android:top="-6dp" android:left="-6dp" android:right="-6dp">
    <shape>
        <size android:height="50dp"/>
        <solid android:color="@android:color/transparent"/>
        <stroke android:color="@color/myColor" android:width="6dp"/>
    </shape>
</item>

line_label_1.xml

<item>
    <shape>
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

and then create tab_selector.xml as follow

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/line_label_1_pressed" android:state_selected="true"/>
<item android:drawable="@drawable/line_label_1"/>

then setbackgroudResource using tab_selector.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/tab_selector"
android:gravity="center_horizontal|center_vertical" />

Solution 8 - Android

I found other solution, open styles.xml and change one line:

res -> values -> styles.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@android:color/holo_orange_light</item> <!-- set the color in this line -->
    <item name="windowNoTitle">true</item>
</style>

Solution 9 - Android

Just use something like

tabHost.setSelectedTabIndicatorColor(Color.WHITE);

Content Type	Original Author	Original Content on Stackoverflow
Question	neo108	View Question on Stackoverflow
Solution 1 - Android	Michael Celey	View Answer on Stackoverflow
Solution 2 - Android	Nidhi	View Answer on Stackoverflow
Solution 3 - Android	Basim Sherif	View Answer on Stackoverflow
Solution 4 - Android	Ash	View Answer on Stackoverflow
Solution 5 - Android	Alexey O.	View Answer on Stackoverflow
Solution 6 - Android	dzikovskyy	View Answer on Stackoverflow
Solution 7 - Android	Ted_Liang	View Answer on Stackoverflow
Solution 8 - Android	skajar	View Answer on Stackoverflow
Solution 9 - Android	Nick Fedorov	View Answer on Stackoverflow