Text size of android design TabLayout tabs

Question

I have difficulties changing the text size of the tabs of design library tablayout (android.support.design.widget.TabLayout).

I managed to change it by assigning tabTextAppearance in TabLayout

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"

the following style

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
    <item name="android:textSize">14sp</item>
</style>

but I have 2 side effects :

1) I lost the accent color of the selected tab

2) The tab text is not capitalized any more.

score 237 · Answer 1 · edited Feb 16 '16 at 13:17

237

<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">16sp</item>
</style>

Use is in TabLayout like this

<android.support.design.widget.TabLayout
            app:tabTextAppearance="@style/MineCustomTabText"
            ...
            />

edited Feb 16 '16 at 13:17

Lavekush Agrawal

6,040
7
52
85

answered Aug 05 '15 at 12:50

hnrain

3,041
1
13
5

Working fine. I'm using support lib 25.1.0. – Sufian Feb 24 '17 at 15:24
Works on support library 25.3.1 – Luis Jun 09 '17 at 20:18
superb thax bro you save my time ,,, its working on lib 25.1.0 – Kunal Dharaiya Jun 13 '17 at 05:23
@Sufian, it not working for me and I am using the same support version as you (25.1.0). Any idea why? – Sam Jan 15 '18 at 06:10
@Sam try doing a clean build. If it doesn't work then post your code here. – Sufian Jan 15 '18 at 06:36
5

If your tab text is multiline. Then the tabLayout it using a different field to set the texts size. Please checkout my answer here for solution : https://stackoverflow.com/a/48797329/700693 – Evren Ozturk Feb 14 '18 at 22:38

u2gilles · Answer 2 · 2015-07-17T08:37:17.473

59

Go on using tabTextAppearance as you did but

1) to fix the capital letter side effect add textAllCap in your style :

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
    <item name="android:textSize">14sp</item>
    <item name="android:textAllCaps">true</item>
</style>

2) to fix the selected tab color side effect add in TabLayout xml the following library attributes :

app:tabSelectedTextColor="@color/color1"
app:tabTextColor="@color/color2"

Hope this helps.

edited Jul 17 '15 at 08:37

answered Jul 17 '15 at 08:28

u2gilles

6,888
7
51
75

It works like a charm now. Thanks u2gilles for you prompt answer. – Malko Jul 17 '15 at 08:33
@u2gilles i have used custom layout in tabs that is linearlayout with 2 textviews but i want to change only one textview color on tab selection ? – Erum Aug 14 '15 at 11:41
1

If you want to set false then t here should be one more string in addition to twos : false – CodeToLife Jan 13 '18 at 12:22

score 34 · Answer 3 · edited Jan 13 '21 at 09:53

Work on api 22 & 23 Make this style :

<style name="TabLayoutStyle" parent="Base.Widget.Design.TabLayout">
    <item name="android:textSize">12sp</item>
    <item name="android:textAllCaps">true</item>
</style>

And apply it to your tablayout :

<android.support.design.widget.TabLayout
    android:id="@+id/contentTabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:background="@drawable/list_gray_border"
    app:tabTextAppearance="@style/TabLayoutStyle"
    app:tabSelectedTextColor="@color/colorPrimaryDark"
    app:tabTextColor="@color/colorGrey"
    app:tabMode="fixed"
    app:tabGravity="fill"/>

score 24 · Answer 4 · answered Aug 01 '18 at 07:34

Do as following.

1. Add the Style to the XML

    <style name="MyTabLayoutTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">14sp</item>
    </style>

2. Apply Style

Find the Layout containing the TabLayout and add the style. The added line is bold.

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

score 21 · Answer 5 · edited Mar 29 '20 at 11:47

Try the snipped which is mentioned below, it works for me also.

In my layout xml where I have my TabLayout, have added style to the TabLayout like below :

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    style="@style/MyCustomTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="fill"
    app:tabMode="fixed" />

and in my style.xml I have defined the style that is used in my layout xml, check code for styles added below :

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="android:background">YOUR BACKGROUND COLOR</item>
    <item name="tabTextAppearance">@style/MyCustomTabText</item>
    <item name="tabSelectedTextColor">SELECTED TAB TEXT COLOR</item>
    <item name="tabIndicatorColor">SELECTED TAB INDICATOR COLOR</item>
</style>

<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
    <item name="android:textSize">YOUR TEXT SIZE</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@android:color/white</item>
</style>

I hope it will work for you.....

Martín Huergo · Answer 6 · 2016-01-22T12:41:14.167

I have similar problem and similar resolution:

1) Size

in the xml you have TabLayout,

        <android.support.design.widget.TabLayout
            ...
            app:tabTextAppearance="@style/CustomTextStyle"
            ...
        />

then in style,

        <style name="CustomTextStyle" parent="@android:style/TextAppearance.Widget.TabWidget">
           <item name="android:textSize">16sp</item>
           <item name="android:textAllCaps">true</item>
        </style>

If you do not want the characters in uppercase put false in "android:textAllCaps"

2) Text color of selected or unselected Tabs,

TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector,null));
    } else {
        tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector));
    }

then in res/color/tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/white" android:state_selected="true" />
<item android:color="@color/white" />

score 10 · Answer 7 · edited May 23 '17 at 12:10

TabLayout  tab_layout = (TabLayout)findViewById(R.id.tab_Layout_);

private void changeTabsFont() {
    Typeface font = Typeface.createFromAsset(getActivity().getAssets(), "fonts/"+ Constants.FontStyle);
    ViewGroup vg = (ViewGroup) tab_layout.getChildAt(0);
    int tabsCount = vg.getChildCount();
    for (int j = 0; j < tabsCount; j++) {
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTypeface(font);
                ((TextView) tabViewChild).setTextSize(15);

            }
        }
    }
}

This code is works for me using tablayout. It will change size of fonts and also change font style.

This will also help you guys please check this link

https://stackoverflow.com/a/43156384/5973946

This code works for Tablayout change text color,type face (font style) and also text size.

score 1 · Answer 8 · answered Apr 03 '19 at 14:35

I was using Android Pie and nothing seemed to worked so I played around with app:tabTextAppearance attribute. I know its not the perfect answer but might help someone.

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabTextAppearance="@style/TextAppearance.AppCompat.Caption" />

score 0 · Answer 9 · answered Dec 20 '20 at 11:47

XML FILE IN VALUES

<style name="tab">
    <item name="android:textSize">@dimen/_10ssp</item>
    <item name="android:textColor">#FFFFFF</item>
</style>

TAB LAYOUT

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/_27sdp"
    android:layout_marginLeft="@dimen/_10sdp"
    android:layout_marginRight="@dimen/_10sdp"
    app:layout_constraintEnd_toEndOf="parent"
    app:tabTextAppearance="@style/tab"
    app:tabGravity="fill"
    android:layout_marginTop="@dimen/_10sdp"
    app:layout_constraintStart_toStartOf="parent"
   >

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TAB 1"
        android:scrollbarSize="@dimen/_4sdp"
        />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbarSize="@dimen/_6sdp"
        android:text="TAB 2" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbarSize="@dimen/_4sdp"
        android:text="TAB 3" />
</com.google.android.material.tabs.TabLayout>

score 0 · Answer 10 · answered Feb 06 '21 at 13:18

>   **create custom style in styles.xml**  <style name="customStylename"
> parent="Theme.AppCompat">
>         <item name="android:textSize">22sp</item>  <item name="android:color">colors/primarydark</item>
>     </style>
> 
>   **link to your material same name **  
> <android.support.design.widget.TabLayout  
> android:layout_width="match_parent"
>         android:layout_height="wrap_content" 
>         android:id="@+id/tabs"
>         app:tabTextAppearance="@style/customStylename" 
>       />

this is my solution

score 0 · Answer 11 · answered Dec 05 '22 at 11:21

fun TabLayout.customizeTabSizeAndFont() {
    val tabFont = Typeface.createFromAsset(context.assets, "font.ttf")
    val tabTextSize = 21f
    val viewGroup = this.getChildAt(0) as ViewGroup
    for (tabVGPos in 0..viewGroup.childCount) {
        val tabViewGroup = viewGroup.getChildAt(tabVGPos) as ViewGroup?
        tabViewGroup?.let {
            for (tabPos in 0..tabViewGroup.childCount) {
                val tab = tabViewGroup.getChildAt(tabPos)
                if (tab is TextView) {
                    tab.typeface = tabFont
                    tab.setTextSize(TypedValue.COMPLEX_UNIT_SP, tabTextSize)
                }
            }
        }
    }
}

Text size of android design TabLayout tabs

11 Answers11

Linked