TabWidget current tab bottom line color

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).

  • How to detect whether screen is on or off if API level is 4?
  • Android: how to check how much memory is remaining?
  • Dagger 2 lifecycle of a component, module and scope
  • Can't access AAssetManager in native code passed from Java in WallpaperService
  • How to Automatically Modify versionName in Manifest during Build?
  • Why it says that “Cannot refer to a non-final variable i inside an inner class defined in a different method”?
  • 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 Release Version and “Waiting for Debugger”
  • Simple assignment coming up with wrong value
  • ACTION_BATTERY_CHANGED firing like crazy
  • Android, Expandable list view doesn't have reaction to click!!! it doesn't expand
  • Why does margin override marginLeft in Android (same with radius, etc)?
  • resValue gradle error: Unsupported type “String” in “generated.xml”
  • 8 Solutions collect form web for “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):

    • tab_unselected_holo tab_unselected_holo
    • tab_selected_holo tab_selected_holo
    • tab_unselected_focused_holo tab_unselected_focused_holo
    • tab_selected_focused_holo tab_selected_focused_holo
    • tab_unselected_pressed_holo tab_unselected_pressed_holo
    • tab_selected_pressed_holo tab_selected_pressed_holo

    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.

    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.

    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/

    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" />
    

    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.

    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>
    

    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" />
    

    Just use something like

    tabHost.setSelectedTabIndicatorColor(Color.WHITE);
    
    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.