9
votes

I am trying to style tabs in an android.support.design.widget.TabLayout I can not get the selected tab color to change, it is always set to the textColorPrimary in my app theme, but I need them to be different colors.

I have tried setting values in styles.xml that applies to TabLayout, but I read you can not change active tab text color this way, though I can change unselected tab text colors. I have also tried:

tabLayout.setTabTextColors(getResources().getColorStateList(R.color.selector));

and

tabLayout.setTabTextColors(R.color.Green, R.color.Blue);

Is it possible to override the selected tab text color?

3
This answer is what you are looking for stackoverflow.com/a/31471430/2163045murt

3 Answers

14
votes

Edit: got it working,

tabLayout.setTabTextColors(getResources().getColorStateList(R.color.selector));

needed called before it was attached to the view pager

12
votes

Actually you CAN customize active tab text color via defining custom TabLayout style. Look at tabSelectedTextColor parameter. Here is example of customizing tabSelectedTextColor, tabIndicatorColor, tabTextAppearance (text size/color etc):

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/CustomTabLayoutStyle"/>

Styles:

<style name="CustomTabLayoutStyle" parent="Base.Widget.Design.TabLayout">
    <item name="tabSelectedTextColor">@color/tab_text_selected</item>
    <item name="tabIndicatorColor">@color/tab_indicator</item>
    <item name="tabTextAppearance">@style/CustomTabTexStyle</item>
</style>

<style name="CustomTabTexStyle" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/tab_text</item>
    <item name="textAllCaps">false</item>
    ...
</style>
8
votes

Add below code to your xml:

app:tabSelectedTextColor="@color/app_color"