How to change the new TabLayout indicator color and height
AndroidMaterial DesignAndroid Design-LibraryAndroid Problem Overview
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
?
Android Solutions
Solution 1 - Android
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.
Solution 2 - Android
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"
Solution 3 - Android
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.
Solution 4 - Android
app:tabIndicatorColor="@android:color/white"
Solution 5 - Android
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.
Solution 6 - Android
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
Solution 7 - Android
from xml :
app:tabIndicatorColor="#fff"
from java :
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));
Solution 8 - Android
Foto indicator use this:
tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color
Solution 9 - Android
You can change this using xml
app:tabIndicatorColor="#fff"
Solution 10 - Android
Just put this line in your code. If you change the color then change the color value in parentheses.
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
Solution 11 - Android
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);