How to change the new TabLayout indicator color and height

Question

I was playing around with the new android.support.design.widget.TabLayout, and found a problem, in the class definition, there are no methods to change the indicator color, and default height.

Doing some research, found that the default indicator color is taken from the AppTheme. Specifically from here:

<item name="colorAccent">#FF4081</item>

Now, in my case, if I change the colorAccent, it will affect all the other views which uses this value as background color, for example ProgressBar

Now is there any way to change the indicatorColor to other thing besides the colorAccent?

score 263 · Accepted Answer · answered Jun 17 '15 at 23:26

Having the problem that the new TabLayout uses the indicator color from the value colorAccent, I decided to dig into the android.support.design.widget.TabLayout implementation, finding that there are no public methods to customize this. However I found this style specification of the TabLayout:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

Having this style specification, now we can customize the TabLayout like this:

<android.support.design.widget.TabLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@id/pages_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabIndicatorHeight="4dp"/>

And problem solved, both the tab indicator color and height can be changed from their default values.

is there a way change the 'tabSelectedTextColor' (Not tabindicator color or height) via java code. — Prakash, Jan 15 '16 at 21:36
the app:tabIndicatorColor attribute in the tabLayout xml widget is the only change I needed to make to fix this issue. Thanks! — Braden Holt, Aug 02 '17 at 17:55
I made this as parent style: `parent="@style/Base.Widget.Design.TabLayout"` — Ultimo_m, May 18 '18 at 10:03

score 118 · Answer 2 · answered Jan 21 '16 at 16:22

118

With the design support library you can now change them in the xml:

To change the color of the TabLayout indicator:

app:tabIndicatorColor="@color/color"

To change the height of the TabLayout indicator:

app:tabIndicatorHeight="4dp"

answered Jan 21 '16 at 16:22

Malek Hijazi

4,112
1
26
31

4

I put this line, but color is still accent color – Mahdi Dec 25 '16 at 07:59
@Kenji are you sure that this line was put in the TabLayout and not in the Toolbar bit of the xml? Easy misplacement to make :) – Wes Winn May 28 '17 at 20:06
Perfect solution for height. It works fine. Thanks Malek. – Hardik Joshi Feb 13 '19 at 10:13
1

What if i want to apply a gradient color instead? – Hamza Khan Apr 14 '20 at 04:36

score 37 · Answer 3 · edited May 23 '17 at 10:31

37

Since I can't post a follow-up to android developer's comment, here's an updated answer for anyone else who needs to programmatically set the selected tab indicator color:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

Similarly, for height:

tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

These methods were only recently added to revision 23.0.0 of the Support Library, which is why Soheil Setayeshi's answer uses reflection.

edited May 23 '17 at 10:31

Community

1
1

answered Aug 18 '15 at 21:17

jasonchen2

489
6
7

2

setSelectedTabIndicatorHeight is deprecated now, any idea what to use now? – Michalsx Nov 16 '19 at 20:58

score 19 · Answer 4 · edited Jan 02 '17 at 11:19

19

app:tabIndicatorColor="@android:color/white"

edited Jan 02 '17 at 11:19

Pang

9,564
146
81
122

answered Jan 02 '17 at 11:01

Sanket Parchande

894
9
14

score 14 · Answer 5 · edited Oct 05 '15 at 17:02

14

With the desing support library v23 you can set programmatically the color and the height.

Just use for the height:

TabLayout.setSelectedTabIndicatorHeight(int height)

Here the official javadoc.

Just use for the color:

TabLayout.setSelectedTabIndicatorColor(int color)

Here the official javadoc.

Here you can find the info in the Google Tracker.

edited Oct 05 '15 at 17:02

MathieuMaree

7,453
6
26
31

answered Aug 21 '15 at 11:17

Gabriele Mariotti

320,139
94
887
841

What integers are we supposed to use for color? – the_prole Nov 25 '15 at 08:08
You can use the Color class for example Color.RED – Soumya Nov 24 '17 at 17:22
setSelectedTabIndicatorHeight is deprecated now – APP Dec 27 '19 at 10:03

score 9 · Answer 6 · edited Apr 29 '16 at 23:33

9

To change indicator color and height programmatically you can use reflection. for example for indicator color use code below:

        try {
            Field field = TabLayout.class.getDeclaredField("mTabStrip");
            field.setAccessible(true);
            Object ob = field.get(tabLayout);
            Class<?> c = Class.forName("android.support.design.widget.TabLayout$SlidingTabStrip");
            Method method = c.getDeclaredMethod("setSelectedIndicatorColor", int.class);
            method.setAccessible(true);
            method.invoke(ob, Color.RED);//now its ok
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

and to change indicator height use "setSelectedIndicatorHeight" instead of "setSelectedIndicatorColor" then invoke it by your desired height

edited Apr 29 '16 at 23:33

Mike Ortiz

4,031
4
27
54

answered Jun 18 '15 at 07:18

Soheil Setayeshi

2,343
2
31
43

1

Thank you! this helps me! I guess Google forgot to provide method for this in their support library. – Shinta S Jun 18 '15 at 19:03
1

Why use reflection, if it's already available as public functions? https://developer.android.com/reference/android/support/design/widget/TabLayout.html#setSelectedTabIndicatorColor(int) – android developer Aug 18 '15 at 11:50
@SoheilSetayeshi Oh, ok. Thank you. Maybe you should update the answer then. – android developer Aug 19 '15 at 06:52
1

But this is a perfect solution for APIs below support library 23.0.0. I mean Whaao! Great Answer! – sud007 Jun 09 '16 at 14:50

Arthur Melo · Answer 7 · 2019-08-22T02:51:21.977

8

from xml :

app:tabIndicatorColor="#fff"

from java :

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

edited Aug 22 '19 at 02:51

answered May 29 '17 at 18:23

Arthur Melo

454
5
13

score 6 · Answer 8 · answered Aug 24 '17 at 23:06

6

Foto indicator use this:

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color

answered Aug 24 '17 at 23:06

chry

434
7
5

score 1 · Answer 9 · answered Aug 22 '16 at 05:51

1

You can change this using xml

app:tabIndicatorColor="#fff"

answered Aug 22 '16 at 05:51

Ishan Fernando

2,758
1
31
38

score 0 · Answer 10 · edited Oct 08 '16 at 17:58

0

Just put this line in your code. If you change the color then change the color value in parentheses.

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

edited Oct 08 '16 at 17:58

answered Oct 08 '16 at 14:13

saqib javeed

191
2
6

score 0 · Answer 11 · answered Apr 29 '18 at 03:00

Android makes it easy.

public void setTabTextColors(int normalColor, int selectedColor) {
    setTabTextColors(createColorStateList(normalColor, selectedColor));
}

So, we just say

mycooltablayout.setTabTextColors(Color.parseColor("#1464f4"), Color.parseColor("#880088"));

That will give us a blue normal color and purple selected color.

Now we set the height

public void setSelectedTabIndicatorHeight(int height) {
    mTabStrip.setSelectedIndicatorHeight(height);
}

And for height we say

mycooltablayout.setSelectedIndicatorHeight(6);

this is only works for the textcolor, not the tab backround – joghm Apr 13 '21 at 21:41 — joghm, Apr 13 '21 at 21:41

score 0 · Answer 12 · answered Nov 10 '22 at 12:05

If you are trying to use app:tabIndicator="" to set indicator, and using a layer-list drawable as your custom indicator, then you'd better to set app:tabIndicatorColor="" together, because i see this in the source code of TabLayout:

TabLayout.SlidingTabIndicator#draw

If you don't set app:tabIndicatorColor="", then the custom indicator will be drawn with your colorPrimary or colorAccent as the tint color

How to change the new TabLayout indicator color and height

12 Answers12

Linked