How to change the new TabLayout indicator color and height
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.
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"
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.
app:tabIndicatorColor="@android:color/white"
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.