CODEWITHSUNDEEP
androidtabs
Bụng Bự
Bụng Bự

Reputation: 553

How to make tablayout text size equal?

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:

enter image description here

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.

Upvotes: 20

Views: 20148

Answers (5)

mspapant
mspapant

Reputation: 2050

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

Upvotes: 0

Rodrigo Gielow
Rodrigo Gielow

Reputation: 41

This is works for me:

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

Upvotes: 4

etherton
etherton

Reputation: 942

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:

enter image description here

Upvotes: 14

matteoh
matteoh

Reputation: 3600

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).

Upvotes: 6

Serhii Nadolynskyi
Serhii Nadolynskyi

Reputation: 5563

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)

Upvotes: 56

Related Questions