How to make tablayout text size equal?

Question

Here is what I did: I created a style for the text

<!-- Change tab text appearance -->
    <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
        <item name="android:textAppearance">@style/CustomTabWidgetText</item>
    </style>

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

then I set it to my tablayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.HomeActivity"
    tools:showIn="@layout/app_bar_main">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:titleTextColor="#ffffff"
        />


    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/toolbar"
        android:background="?attr/colorPrimary"
        app:tabSelectedTextColor="#ffffff"
        app:tabTextAppearance="@style/MyCustomTextAppearance"
        app:tabTextColor="#ffffff" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tab_layout" />

</RelativeLayout>

Here is the result:

As you can see, the "D-day complete" text is smaller than others. I have request to make its size equal to others but I dont know how. Please help me, thanks.

You can surely find your answer here...http://stackoverflow.com/questions/19442084/change-the-text-size-in-tab-in-android — Saurabh Vardani, Apr 04 '16 at 09:41
The text wouldn't fit if it was larger. Would it fix it you to set tabLayout's tabMode to `app:tabMode="scrollable"`? Then maybe the whole text would fit and you'd have the same text size. This goes in your xml, in the `TabLayout` tag. — Vucko, Apr 04 '16 at 09:44
or if you have a known number of tabs, consider keeping tabMode fixed and reducing the text size on smaller width screens — hmac, Jun 10 '16 at 09:51

score 55 · Answer 1 · answered Oct 07 '16 at 14:40

55

You can try to set padding in TabLayout (app:tabPaddingStart="-1dp", app:tabPaddingEnd="-1dp")

like

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/toolbar"
        android:background="?attr/colorPrimary"
        app:tabSelectedTextColor="#ffffff"
        app:tabTextAppearance="@style/MyCustomTextAppearance"
        app:tabTextColor="#ffffff" 
        app:tabPaddingStart="-1dp"
        app:tabPaddingEnd="-1dp"/>

It helped me)

answered Oct 07 '16 at 14:40

Serhii Nadolynskyi

5,473
3
21
20

3

Actually this is the only answer that did the trick...thank you @Serg0! – Matan Dahan Oct 21 '16 at 13:17
1

I have no idea why it works, but it does! Thanks a lot! – Felipe Ribeiro R. Magalhaes Dec 31 '16 at 18:15
2

@FelipeRibeiroR.Magalhaes The reason the text was smaller is that it was too wide for the tab, so the font size was automatically reduced so that it would fit. By making the tab's horizontal padding smaller, the text has more space and therefore may fit at the normal font size. But this completely depends on how long your text is. A text that still doesn't fit despite the extra space will still be made smaller. – Alix Jul 25 '17 at 08:12
@Serg0 can you please explain why `-1` exactly? Not `0`. It has worked both ways for me, but anyway base `View` class use `-1` as defParam. Is there some system flag? – Merov Feb 18 '19 at 16:16
1

@Merov I just made an assumption that invalid param disables that 'feature' at all and it worked. I am not sure if 0 worked in that circumstances - 2.5 years gone and Android both support libraries changed dramatically. – Serhii Nadolynskyi Feb 18 '19 at 17:42

score 14 · Answer 2 · answered Feb 27 '17 at 23:11

Per this post, this worked really well for me:

    <android.support.design.widget.TabLayout
       android:id="@+id/tab_layout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabMode="scrollable"
       app:tabGravity="fill"
       app:tabIndicatorHeight="5dp"
    />

The tabMode and tabGravity attributes did the trick. This lets the labels span as long as need be and scroll like so:

matteoh · Answer 3 · 2017-02-09T19:35:32.773

6

After experiencing something similar, and after reading the TabLayout source code, I try overriding a dimension, in my dimens.xml file, like this:

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

and don't forget to add the namespace in the root of your file, like this:

<resources xmlns:tools="http://schemas.android.com/tools">

and it works for me.

Hope it helps!

EDIT :

It seems like it doesn't work on every situation (it's actually supposed to work when your text has two lines or more), but it helps when the style doesn't work. So what I do is that I use both technics (style and overridden dimension).

edited Feb 09 '17 at 19:35

answered Feb 09 '17 at 19:16

matteoh

2,810
2
29
54

1

It's strange that no one upvoted this answer. In my case, only this worked when I overrode the design_tab_text_size_2line dimension. Anyways thanks, @thenaoh. – Rizwan Dec 31 '17 at 06:46

score 4 · Answer 4 · edited Feb 07 '18 at 13:26

4

This is works for me:

app:tabMode="scrollable"
app:tabGravity="fill"

edited Feb 07 '18 at 13:26

bharat

1,762
1
24
32

answered Feb 06 '18 at 17:05

Rodrigo Gielow

41
1
4

4

Please provide some information as to how the code above answers the question in order to improve this answer. – Eric Hauenstein Feb 06 '18 at 17:43

score 0 · Answer 5 · answered Feb 10 '21 at 08:55

In think the best approach is to use a custom view. You will have the maximum flexibility. For instance:

<com.google.android.material.tabs.TabLayout
       android:id="@+id/tabs"
       android:layout_width="match_parent"
       android:layout_height="36dp"
       android:layout_marginLeft="16dp"
       android:layout_marginRight="16dp"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:tabGravity="fill"
       app:tabMode="fixed">

       <com.google.android.material.tabs.TabItem
           android:id="@+id/tab1"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout="@layout/view_tab_text_layout" />

       <com.google.android.material.tabs.TabItem
           android:id="@+id/tab2"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout="@layout/view_tab_text_layout" />

       <com.google.android.material.tabs.TabItem
           android:id="@+id/tab3"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout="@layout/view_tab_text_layout" />

       <com.google.android.material.tabs.TabItem
           android:id="@+id/tab4"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout="@layout/view_tab_text_layout" />

   </com.google.android.material.tabs.TabLayout>

The view_tab_text_layout could be:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     xmlns:tools="http://schemas.android.com/tools"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     tools:background="@color/colorPrimary"
     android:orientation="vertical">

<androidx.appcompat.widget.AppCompatTextView
    android:maxLines="1"
    android:lines="1"
    android:id="@+id/tabTextView"
    android:textColor="@android:color/white"
    android:textAllCaps="false"
    android:textSize="18dp"
    android:textStyle="bold"
    app:autoSizeMaxTextSize="18dp"
    app:autoSizeMinTextSize="12dp"
    android:ellipsize="end"
    app:autoSizeTextType="uniform"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    tools:text="Tab 1" />
</FrameLayout>

And you can access the the custom views like this:

    tabLayout = findViewById(R.id.tabs);
    ((TextView) tabLayout.getTabAt(0).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab1);
    ((TextView) tabLayout.getTabAt(1).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab2);
    ((TextView) tabLayout.getTabAt(2).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab3);
    ((TextView) tabLayout.getTabAt(3).getCustomView().findViewById(R.id.tabTextView)).setText(R.string.tab4);

As full working example could be found here: https://bitbucket.org/mspapant/tablayout-example

view_tab_text_layout doesn't need the FrameLayout, it can stand on its own — Jakub Kostka, Jan 03 '22 at 16:37

How to make tablayout text size equal?

5 Answers5

Linked