How to change the new color and height of the TabLayout indicator

Question

I played with the new android.support.design.widget.TabLayout and found a problem, there are no methods for changing the indicator color and default height in the class definition.

After some research, it turned out that the indicator color is taken from AppTheme by default. In particular, here:

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

Now, in my case, if I change colorAccent , it will affect all other views that use this value as a background, like ProgressBar

Now is there a way to change the colorAccent indicator to something other than colorAccent ?

Answer 1

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

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

With this style specification, we can now customize TabLayout as follows:

 <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 the problem is solved, and the color and height of the tab indicator can be changed from their default values.

Answer 2

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

To change the color of the TabLayout indicator:

 app:tabIndicatorColor="@color/color" 

To change the height of the TabLayout indicator:

 app:tabIndicatorHeight="4dp" 

Answer 3

Since I can not post a comment on the comment of the Android developer , here is an updated answer for everyone who should programmatically set the selected color of the tab indicator:

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

Similarly, for height:

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

These methods have recently been added to support library version 23.0.0 , so Soheil Setaashi's answer uses reflection.

Answer 4

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

Answer 5

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

Just use for height:

 TabLayout.setSelectedTabIndicatorHeight(int height) 

Here is the official javadoc .

Just use for color:

 TabLayout.setSelectedTabIndicatorColor(int color) 

Here is the official javadoc .

Here you can find information on Google Tracker .

Answer 6

To programmatically change the color and height of the indicator, you can use reflection. for example, for the indicator color usage 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 the height of the screen use "setSelectedIndicatorHeight" instead of "setSelectedIndicatorColor" and then call it at the desired height

Answer 7

The camera uses this:

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

Answer 8

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

Answer 9

You can change this using xml

 app:tabIndicatorColor="#fff" 

Answer 10

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

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