How to change font size in Material Design TabLayout android?

Question

I have been trying to explore online to set my font size for TabLayout TabItems But none of them seems to be working for me. This is what I tried referring last link

below are the things which I have implemented so far, Not sure why it's not picking textSize from style.

in xml:

<com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayoutForgot"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/header_height"
                app:layout_constraintTop_toBottomOf="@+id/imageViewLogo"
                app:tabIndicatorColor="@color/text_color"
                app:tabSelectedTextColor="@color/text_color"
                app:tabGravity="fill"
                app:tabTextAppearance="@style/MyCustomTabLayout"
                app:tabMode="fixed"
                app:tabIndicatorFullWidth="false"
                app:tabTextColor="@color/text_color" />

in themes.xml:

<style name="MyCustomTabLayout" parent="@android:style/TextAppearance.Widget.TabWidget">
        <item name="textAllCaps">false</item>
        <item name="android:textSize">20sp</item>
        <item name="android:fontFamily">@font/roboto_medium</item>
        <item name="android:textColor">@color/text_color</item>
    </style>

this does everything else like textAllCaps and fontFamily but doesn't seems to take textSize.

Appreciate any help.

score 3 · Answer 1 · answered Oct 21 '22 at 09:41

You can customise TabLayout textColor, textSize, fontFamily etc. as below

<com.google.android.material.tabs.TabLayout
        //
 app:tabTextAppearance="@style/TabTextAppearance" />


<style name="TabTextAppearance" parent="TextAppearance.AppCompat.Medium">
    <item name="android:textColor">#9F9F9F</item>
    <item name="android:textSize">12sp</item>
    <item name="android:fontFamily">@font/cera_pro_medium</item>
</style>

score 0 · Answer 2 · answered Feb 10 '22 at 06:10

0

You should inherit your style from TextAppearance.Design.Tab First make a style,

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

Then use it in your Tablayout like this,

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

hope it will work

answered Feb 10 '22 at 06:10

Fakhrul Siddiqei

60
3

1

Hi, I will try that btw I am using ```com.google.android.material.tabs.TabLayout``` and not ```android.support.design.widget.TabLayout``` Not sure if that can affect anything. But will try and update here – Darpal Feb 10 '22 at 06:12
it will work fine, I guess. If not let me know. – Fakhrul Siddiqei Feb 10 '22 at 06:18
its still not working :( – Darpal Feb 10 '22 at 06:23

score 0 · Accepted Answer · answered Feb 10 '22 at 21:29

0

Well, I was able to find a solution to my issue.

Adding the below line of code in dimens.xml somehow made it work for me.

<dimen name="design_tab_text_size_2line" tools:override="true">20sp</dimen>

answered Feb 10 '22 at 21:29

Darpal

352
5
20

score 0 · Answer 4 · answered Feb 11 '22 at 06:59

Try style to com.google.android.material.tabs.TabLayout

Add parent of main style as @style/Widget.MaterialComponents.TabLayout

Add parent of tabTextAppearance style as @style/Widget.AppCompat.TextView

<style name="MyCustomTabLayout" parent="@style/Widget.MaterialComponents.TabLayout">
    <item name="tabSelectedTextColor">@color/black</item>
    <item name="tabTextColor">@color/purple_700</item>
    <item name="tabIndicatorColor">@color/black</item>
    <item name="tabTextAppearance">@style/TabText</item>
</style>

<style name="TabText" parent="@style/Widget.AppCompat.TextView">
    <item name="textAllCaps">false</item>
    <item name="android:textSize">20sp</item>
</style>

In Xml:

<com.google.android.material.tabs.TabLayout
      android:id="@+id/tabLayoutForgot"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="10dp"
      app:tabGravity="fill"
      style="@style/MyCustomTabLayout"
      app:tabMode="fixed"
      app:tabIndicatorFullWidth="false"/>

How to change font size in Material Design TabLayout android?

4 Answers4