TabLayout not filling width when tabMode set to 'scrollable'

Asked 16/9, 2015 at 6:42 Answered 14/3, 2022 at 11:34

Solved android android-support-library android-tablayout

I have added TabLayout (from support library v22.2.1) to my Fragment as:

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

The issue is that when the Fragment's orientation is landscape (before or after the initial creation of the fragment), the TabLayout doesn't match the width of the Fragment (yes the parent has its width set to match_parent as well).

When screen width is small (i.e not all tabs can be shown at same time):

When screen width is big enough to show all tabs (see the blank space at the right):

If I change tabMode to fixed, width is filled but tabs are too small. Is there any proper solution out there?

Declarant answered 16/9, 2015 at 6:42 Comment(1)

take a look at this thread: #31699256 and also a look at this one: code.google.com/p/android/issues/detail?id=175516 (still not fixed imo) – Braunschweig 16/9, 2015 at 9:47

I guess this is the simpliest way to achieve what you want.

public class CustomTabLayout extends TabLayout {
    public CustomTabLayout(Context context) {
        super(context);
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        try {
            if (getTabCount() == 0)
                return;
            Field field = TabLayout.class.getDeclaredField("mTabMinWidth");
            field.setAccessible(true);
            field.set(this, (int) (getMeasuredWidth() / (float) getTabCount()));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

Grieg answered 16/9, 2015 at 8:47 Comment(11)

Excellent! Sorry about the delay. I was busy with other things so I couldn't test this. I think Google should fix this issue. I am surprised how they allow half-baked things come out. – Declarant 18/9, 2015 at 7:16

mTabMinWidth does not exist on design support library version 23.1.1 – Highroad 30/12, 2015 at 8:37

got java.lang.NoSuchFieldException: mTabMinWidth – Predestinarian 13/5, 2016 at 4:21

use rKrishna's answer, this hack is not required anymore – Grieg 13/5, 2016 at 10:1

Everyone, please don't downvote the answer because this worked with the support lib 22.2.1 (please see the question). What makes sense is that you upvote other answers which work for you. It was Google who broke this solution, so the answer doesn't deserve downvotes! – Declarant 9/8, 2016 at 13:49

In the new support library, its called "mScrollableTabMinWidth" – Noel 16/8, 2016 at 9:0

Somehow, this is not working for me, can anyone please help... i am use the mScrollableTabMinWidth.... – Bristle 17/8, 2016 at 19:6

@Noel can you help me out please--- #39003184 – Bristle 17/8, 2016 at 19:52

I have the same issue, but the above answer didnt work for me – Athelstan 28/6, 2017 at 14:19

In 28.0.0 its 'scrollableTabMinWidth' – Margenemargent 28/1, 2019 at 10:11

I had to define the tabMode as 'fixed' in the layout.xml and also it was needed to add 'setTabMode(MODE_SCROLLABLE);' at the end of onMeasure. (Because TabLayout recalculates its tabs when changing between modes. Purely changing the scrollable tab widths didn't made it to recalculate the tabs. – Grindstone 23/11, 2019 at 11:10

androidx version:

<androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" >
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        />
</androidx.viewpager.widget.ViewPager>

***** BELOW IS OLD ANSWER *****

Try this one, it's a workaround which sets tabMaxWidth="0dp", tabGravity="fill" and tabMode="fixed".

 <android.support.v4.view.ViewPager
     android:id="@+id/container"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     app:layout_behavior="@string/appbar_scrolling_view_behavior">
     <android.support.design.widget.TabLayout
         android:id="@+id/tabs"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:tabMaxWidth="0dp"
         app:tabGravity="fill"
         app:tabMode="fixed"/>
</android.support.v4.view.ViewPager>

Screenshot on a 10 inch tablet:

Dialyser answered 25/10, 2017 at 21:35 Comment(6)

You made my day...Thank you – Gunzburg 23/10, 2018 at 18:28

this solution doesn't fit for dynamic number of tabs, say more than 5, cause it's tabMode is fixed – Falster 15/8, 2019 at 12:14

This is not solution to the question as author is asking to fill width when tabMode is set to "scrollable". In your example tabMode is set to "fixed" – Diaphane 6/2, 2020 at 15:6

Please re-read the question, and the screenshots the author uploaded. – Dialyser 9/2, 2020 at 20:57

you saved my day by app:tabMaxWidth=“0dp” thanks bro – Migrant 26/5, 2020 at 14:17

This approach is against material design principle – Voguish 14/5, 2021 at 13:12

Instead of creating custom TabLayout and hacking around or creating more layouts which acts as wrapper around TabLayout only for background. Try this,

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/MyColorAccentTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    <!-- Instead of setting app:tabBackground -->
    android:background="@color/colorAccent"
    app:tabGravity="fill"
    app:tabMode="scrollable"/>

This will set background to behind tabLayout instead of setting background behind every tab.

Unpeopled answered 10/4, 2016 at 9:56 Comment(0)

I guess this is the simpliest way to achieve what you want.

public class CustomTabLayout extends TabLayout {
    public CustomTabLayout(Context context) {
        super(context);
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        try {
            if (getTabCount() == 0)
                return;
            Field field = TabLayout.class.getDeclaredField("mTabMinWidth");
            field.setAccessible(true);
            field.set(this, (int) (getMeasuredWidth() / (float) getTabCount()));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}