TabWidget current tab bottom line color

Asked 6/2, 2013 at 6:6 Answered 20/9, 2017 at 18:12

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

Femi answered 6/2, 2013 at 6:6 Comment(0)

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.

Carse answered 1/4, 2013 at 19:44 Comment(12)

Hey @MCeley thanks for your answer man. I'm trying to get this work too right now and pertaining to the tab_unselected_holo, tab_selected_holo etc they are all pngs so to replace them I'll have to like make my own with different colors, but I don't know the size of the default pngs and I don't know if it work well. – Emmalynn 17/7, 2013 at 17:29

Just download the images that are linked in my post and make them match those sizes. – Carse 17/7, 2013 at 17:59

Rolled back the answer to what it was originally. While android-holo-colors.com is a useful site for creating entire themes that will also change the tab colors, this question wasn't about creating a theme. – Carse 2/10, 2013 at 15:33

Can you do this without drawables, but with colors instead? I feel like that way it would be much easier to edit the theme if I wanted, or am I missing something? – Ayrshire 4/4, 2015 at 17:30

this is crazy, it's just freakin' color of indicator and so much work – Diaghilev 2/7, 2015 at 17:29

Thanks. I'm following this to have image. In app I'm using Theme.Holo.Light.NoActionBar.Fullscreen and this not allowing me to use Yellow color at tab-bottom. It display light-blue only. Any suggestion! – Bowman 13/10, 2015 at 9:33

Sorry @Shubh but I don't have anything off the top of my head. I would recommend posting this as a separate question and seeing if somebody can help you with it. – Carse 13/10, 2015 at 13:45

Google knows hot to implement simple things difficult – Ashcan 3/1, 2016 at 17:28

How do you show the indicator to the top (instead of the bottom)? – Ovaritis 8/3, 2016 at 11:29

You'd likely have to make a new layout for each of the tab widget items. You could likely do this through theming but there are several different approaches that could work. It's a bit outside the scope of this question/answer though so I'd recommend posting a new question to get more detailed answers. – Carse 10/3, 2016 at 20:10

Why can't we simply use the following attribute to change the color of the selection indicator? app:tabIndicatorColor="@color/theme_color". – Ferrate 28/10, 2016 at 11:49

@RahulRaveendran This question/answer was written before the design support library was around and added that functionality to the platform. I would suggest writing an answer that outlined how to use the design library tabs and setting the color the easy way as that would be a more appropriate and modern way of doing things. – Carse 22/11, 2016 at 2:38

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

Ardyce answered 24/6, 2016 at 6:55 Comment(1)

I think he's using TabHost and TabWidget, not TabLayout. – Antisthenes 4/10, 2016 at 18:9

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.

Suffix answered 1/8, 2013 at 11:5 Comment(1)

When will 'changetabs' be called ?? – Stellastellar 29/1, 2015 at 12:32

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/

Muenster answered 18/6, 2014 at 10:11 Comment(4)

This is by far the easiest way to do this. THANK YOU JEFF! :D – Persaud 28/8, 2014 at 19:6

Great! Really an easy way to change tabwidget bottom line color. – Ceilidh 19/10, 2014 at 14:26

Tried to use this but it doesn't change the tab colors, only the tab bar colors; any suggestions? – Sparling 8/6, 2015 at 9:32

Yah, I tired to add it but it only changes the Tab Indicator colors, not tab bar and tab indicator colors (tab bar color just defaults to transparent) – Sparling 8/6, 2015 at 22:50

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.

Pork answered 22/6, 2015 at 20:31 Comment(2)

So Good , But How Change TextColor ? Ater setIndicator("TAB_A") – Bohun 29/5, 2016 at 11:38

You just saved my day. I don't get why this isn't marked as the right answer. – Kindly 30/6, 2017 at 12:58

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>

Syringa answered 26/10, 2015 at 15:55 Comment(1)

Really simple and no need to add any extra XMLs – Psilomelane 2/1, 2018 at 3:35

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

Taxaceous answered 10/2, 2014 at 14:29 Comment(0)

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>

Turaco answered 20/9, 2017 at 18:12 Comment(0)

-2

Just use something like

tabHost.setSelectedTabIndicatorColor(Color.WHITE);

Janijania answered 1/10, 2015 at 13:27 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

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

Recommended topics

Hot tags