Home » Android » android – Styling text on TabLayout

android – Styling text on TabLayout

Posted by: admin May 14, 2020 Leave a comment

Questions:

I’m trying to style the new TabLayout from android design library.

<style name="NavigationTab" parent="Widget.Design.TabLayout">
    <item name="tabBackground">@drawable/background_tab</item>
    <item name="tabIndicatorColor">@color/blue</item>
    <item name="tabTextAppearance">@style/NavigationTabTextAppeareance</item>
</style>

And the text is defined right here

<style name="NavigationTabTextAppeareance" parent="TextAppearance.Design.Tab">
      <item name="android:textColor">@color/primary_light</item>
      <item name="android:textSize">12sp</item>
</style>

But the selected tab is always black, how can I change it?

How to&Answers:

set tabSelectedTextColor in NavigationTab like this:

<style name="NavigationTab" parent="Widget.Design.TabLayout">
    <item name="tabBackground">@drawable/background_tab</item>
    <item name="tabSelectedTextColor">@color/primary_light</item>
    <item name="tabIndicatorColor">@color/blue</item>
    <item name="tabTextAppearance">@style/NavigationTabTextAppeareance</item>
</style>

<style name="NavigationTabTextAppeareance" parent="TextAppearance.Design.Tab">
      <item name="android:textColor">@color/primary_light</item>
      <item name="android:textSize">12sp</item>
</style>

Answer:

If you just have to give different text color then there is direct option by using app:tabTextColor for unselected and app:tabSelectedTextColor for selected tab text like in example .

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextColor="#607D8B"
            app:tabSelectedTextColor="#FFFFFF"/>