TabLayout (Android Design Library) Text Color

Question

I'm using the new TabLayout from the Android Design library. I managed to set the textcolor statelist using tabLayout.setTabTextColors(colorstatelist)

How can i achieve the same using styles.xml?

Fe Le · Accepted Answer · 2016-12-05T14:57:21.617

Via XML attributes:

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextColor="@color/your_unselected_text_color"
        app:tabSelectedTextColor="@color/your_selected_text_color"/>

Additionally, there are attributes like tabIndicatorColor or tabIndicatorHeight for further styling.

In code:

tabLayout.setTabTextColors(
    getResources().getColor(R.color.your_unselected_text_color),
    getResources().getColor(R.color.your_selected_text_color)
);

Since this old way is deprecated as of API 23, the alternative is:

tabLayout.setTabTextColors(
    ContextCompat.getColor(context, R.color.your_unselected_text_color),
    ContextCompat.getColor(context, R.color.your_selected_text_color)
);

@pcpriyanka thanks for the tip, I've updated my answer with an as easy way to define selected and unselected color in code. — Fe Le, Dec 05 '16 at 15:00

score 81 · Answer 2 · answered Jul 01 '15 at 06:11

81

Here is snippet code to override text style and selected text color

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabTextAppearance">@style/MyCustomTabText</item>
    <item name="tabSelectedTextColor">@color/tab_text_act</item>
</style>

<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/tab_text</item>
</style>

And here is snippet code for layout

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/MyCustomTabLayout" />

answered Jul 01 '15 at 06:11

Chuehnone

964
6
5

1

Thanks - this works for me. Just like to point out that the tabSelectedTextColor is the color for the line under the tab and the text of the tab when the tab i selected. – Simon Sep 21 '15 at 08:56
Why are you inheriting Widget.Design.TabLayout ? – SpaceMonkey Oct 26 '15 at 23:15
1

why do we have to use "style" here on TabLayout? Why it doesn't work if I use "android:theme"? – SpaceMonkey Oct 31 '15 at 14:40
@Spacemonkey because Widget.Design.TabLayout contains base styles for tabs such like "tabIndicatorColor", "tabIndicatorHeight" – sweetrenard Nov 27 '15 at 10:17
@sweetrenard oh, so it's overriding the theme I specify in "android:theme"? – SpaceMonkey Nov 27 '15 at 22:27
Why not use: – SafaOrhan Dec 08 '15 at 06:04

score 5 · Answer 3 · answered May 16 '16 at 08:48

5

All the answers above are correct but I just think its better to override the default styles and only change the specific element you want to change. Example below will make the text bold:

<style name="Widget.TabItem" parent="TextAppearance.Design.Tab">
    <item name="android:textStyle">bold</item>
</style>

Then..,

app:tabTextAppearance="@style/Widget.TabItem"

answered May 16 '16 at 08:48

Tinashe

3,115
3
25
23

Im sorry but where did You find this way? – deadfish May 27 '16 at 16:06

score 4 · Answer 4 · answered Jun 18 '15 at 09:44

You just have to override android:textAppearance style. Because TabLayout use textAppearance. here is the small snippet code of style.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Below will reference with our custom style -->
    <item name="android:textAppearance">@style/my_tab_text</item>
</style>

<style name="my_tab_text" parent="Base.TextAppearance.AppCompat">
    <item name="android:textColor">@android:color/holo_blue_dark</item>
</style>

And if you dont want to reference from your Apptheme you can directly specify to TabLayout using Below snippet.

 <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextAppearance="@style/my_tab_text"
            app:tabIndicatorHeight="48dp"/>

ok you are right, it works. but only for the "unselected"-tab. the selected tab-text is always black for me — sebastian, Jun 18 '15 at 10:47
Ok there is no code in design library available for assigning a textColor of selected tab in design support library. So for selected tab text color you have to set it using property .. — Moinkhan, Jun 18 '15 at 12:24

score 2 · Answer 5 · answered Nov 27 '18 at 11:15

For custom tabs we have to override the following : 1) app:tabTextColor //for_unselected_text"

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            style="@style/MyCustomTabLayout"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="?attr/colorPrimary"
            android:scrollbarSize="24sp"
            android:visibility="gone"
            app:tabTextColor="@color/white_40_percent"
            app:tabMode="scrollable" />

2) tabSelectedTextColor // for selected tab color 3) tabIndicatorColor // color for tab indicator

   <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="tabSelectedTextColor">@color/white</item>
    <item name="tabTextAppearance">@style/TabTextStyle</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="android:tabStripEnabled">true</item>
    <item name="android:padding">0dp</item>
  </style>



<style name="TabTextStyle">
    <item name="android:fontFamily">@string/font_fontFamily_medium</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:textColor">@color/tab_text_color</item>
    <item name="android:textSize">16sp</item>
</style>

tab_text_color.xml

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/white_40_percent"android:state_selected="false"/>
  <item android:color="@color/white_100_percent"android:state_selected="true"/>
 </selector>

score 1 · Answer 6 · answered Sep 23 '19 at 06:54

With the TabLayout provided in the Material Components Library you can:

Use a custom style

  <com.google.android.material.tabs.TabLayout
      style="@style/My_Tablayout"
      ..>

and in your style use the tabTextColor with a selector.

<!-- TabLayout -->
<style name="My_Tablayout" parent="Widget.MaterialComponents.TabLayout" >
    <item name="tabTextColor">@color/tab_layout_selector</item>
</style>


<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_selected="true"/>
  <item android:alpha="0.60" android:color="?attr/colorOnSurface"/>
</selector>

Use the app:tabTextColor in your layout:

  <com.google.android.material.tabs.TabLayout
      app:tabTextColor="@color/tab_layout_selector"
      ..>

score 0 · Answer 7 · answered Mar 21 '19 at 23:02

Easy and Perfect way:

In xml file ::

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextAppearance="@style/TabText"/>

In values-styles file:

note: "cairo_semibold" is an external font, you can replace it with your font.

<style name="TabText" parent="TextAppearance.Design.Tab">
    <item name="android:textColor">#1f57ff</item>
    <item name="android:textSize">14sp</item>
    <item name="android:fontFamily">@font/cairo_semibold</item>
</style>

score 0 · Answer 8 · answered Jun 20 '19 at 06:45

best or short and simple way is make custom appbar like

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorAccent"
    app:theme="@style/myCustomAppBarTheme"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"><RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageButton
            android:id="@+id/btn_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="@android:color/transparent"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/txt_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_toEndOf="@+id/btn_back"
            android:layout_toRightOf="@+id/btn_back"
            android:text="Title"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            android:textStyle="bold" />

    </RelativeLayout>
    </android.support.v7.widget.Toolbar>

score 0 · Answer 9 · answered Jul 14 '20 at 06:14

XML attributes

<com.google.android.material.tabs.TabLayout
                    android:id="@+id/tab_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabIndicatorColor="@color/white"
                    app:tabBackground="@color/colorAccent"
                    app:tabSelectedTextColor="@color/white"
                    app:tabTextColor="@color/white"
                    app:tabMode="scrollable" />

In Kotlin programmatically

(tab_layout as TabLayout).setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary))
(tab_layout as TabLayout).setSelectedTabIndicatorColor(ContextCompat.getColor(mContext, R.color.white))
(tab_layout as TabLayout).setTabTextColors(ContextCompat.getColor(mContext, R.color.white),
                ContextCompat.getColor(mContext, R.color.white))

TabLayout (Android Design Library) Text Color

9 Answers9

Via XML attributes:

In code:

Linked

Related