TabWidget current tab bottom line color

Question

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

Michael Celey · Accepted Answer · 2013-10-02T15:31:44.543

77

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.

edited Oct 02 '13 at 15:31

answered Apr 01 '13 at 19:44

Michael Celey

12,645
6
57
62

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. – Michael Nana Jul 17 '13 at 17:29
Just download the images that are linked in my post and make them match those sizes. – Michael Celey Jul 17 '13 at 17:59
2

Rolled back the answer to what it was originally. While http://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. – Michael Celey Oct 02 '13 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? – Nikola K. Apr 04 '15 at 17:30
this is crazy, it's just freakin' color of indicator and so much work – Tomasz Mularczyk Jul 02 '15 at 17:29
Thanks. I'm following [this](http://jgilfelt.github.io/android-actionbarstylegenerator/#name=bar&compat=holo&theme=light&actionbarstyle=solid&texture=1&hairline=0&neutralPressed=0&backColor=E4E4E4%2C100&secondaryColor=fff%2C100&tabColor=ffc800%2C100&tertiaryColor=F2F2F2%2C100&accentColor=33B5E5%2C100&cabBackColor=FFFFFF%2C100&cabHighlightColor=33B5E5%2C100) 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! – CoDe Oct 13 '15 at 09: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. – Michael Celey Oct 13 '15 at 13:45
Google knows hot to implement simple things difficult – fnc12 Jan 03 '16 at 17:28
How do you show the indicator to the top (instead of the bottom)? – hadez30 Mar 08 '16 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. – Michael Celey Mar 10 '16 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"`. – rahulrvp Oct 28 '16 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. – Michael Celey Nov 22 '16 at 02:38

score 26 · Answer 2 · answered Jun 24 '16 at 06:55

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

I think he's using TabHost and TabWidget, not TabLayout. – James Oct 04 '16 at 18:09 — James, Oct 04 '16 at 18:09

score 12 · Answer 3 · answered Aug 01 '13 at 11:05

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.

When will 'changetabs' be called ?? – Name is Nilay Jan 29 '15 at 12:32 — Name is Nilay, Jan 29 '15 at 12:32

score 10 · Answer 4 · answered Jun 18 '14 at 10:11

10

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/

answered Jun 18 '14 at 10:11

Ash

1,391
15
20

This is by far the easiest way to do this. THANK YOU JEFF! :D – Sean Beach Aug 28 '14 at 19:06
Great! Really an easy way to change tabwidget bottom line color. – imthegiga Oct 19 '14 at 14:26
Tried to use this but it doesn't change the tab colors, only the tab bar colors; any suggestions? – John Jun 08 '15 at 09: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) – John Jun 08 '15 at 22:50

score 6 · Answer 5 · edited Jun 22 '15 at 21:02

6

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.

edited Jun 22 '15 at 21:02

A O

5,516
3
33
68

answered Jun 22 '15 at 20:31

Alexey O.

220
2
11

So Good , But How Change TextColor ? Ater setIndicator("TAB_A") – Criss May 29 '16 at 11:38
You just saved my day. I don't get why this isn't marked as the right answer. – Nivil Boban Jun 30 '17 at 12:58

score 5 · Answer 6 · answered Oct 26 '15 at 15:55

5

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>

answered Oct 26 '15 at 15:55

dzikovskyy

5,027
3
32
43

Really simple and no need to add any extra XMLs – Jcorretjer Jan 02 '18 at 03:35

score 2 · Answer 7 · answered Feb 10 '14 at 14:29

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

score 0 · Answer 8 · answered Sep 20 '17 at 18:12

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>

score -2 · Answer 9 · edited Oct 02 '15 at 07:26

-2

Just use something like

tabHost.setSelectedTabIndicatorColor(Color.WHITE);

edited Oct 02 '15 at 07:26

sschuberth

28,386
6
101
146

answered Oct 01 '15 at 13:27

Nick Fedorov

39
6

TabWidget current tab bottom line color

9 Answers9

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

Linked

Related