TabLayout does not fill screen width when tabmode is set as scrollable

Question

My Android TabLayout does not occupy full screenwidth when Tabmode is set as scrollable I tried to set mode as fixed and gravity as fill , in that case the font size of text is coming as very small. Please help me regarding this :
Please find my below layout:
TabLayout:

<com.google.android.material.tabs.TabLayout
            android:id="@+id/sliding_tabs"
            style="@style/tab_style"
            android:layout_width="match_parent"

            app:tabMaxWidth="0dp"

            />


Styles:
<style name = "tab_style"  parent="Widget.MaterialComponents.TabLayout">
          <item name="tabGravity">fill</item>
        <item name="tabMode">scrollable</item>
        <item name="textAllCaps">false</item>
        <item name="tabBackground">@color/cg_interactive_elements</item>
        <item name="tabTextColor">@color/cg_tab_text_color</item>
        <item name="tabIndicatorColor">@color/cg_text_light</item>
        <item name="tabTextAppearance">@style/TabText_style</item>
        <item name ="tabSelectedTextColor">@color/cg_text_light</item>
        <item name ="tabIndicatorHeight">5dp</item>
        <item name = "android:layout_height">50dp</item>
            <item name = "tabMaxWidth">0dp</item>
      </style>



    <style name="TabText_style" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
        <item name="android:textAllCaps">false</item>
        <item name ="android:textSize">16sp</item>
        <item name="android:fontFamily">sans-serif</item>
        <item name = "fontWeight">200</item>
        <item name = "android:fillColor">@color/cg_fill_color</item>
        <item name = "borderWidth">4dp</item>
        <item name = "android:gravity">center</item>
        <item name = "android:textAppearance">@style/TextAppearance.AppCompat.Medium</item>
    </style>

Total Layout:

  <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:id="@+id/tablayout_container">


<com.google.android.material.appbar.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="106dp"
    android:background="@color/cg_header_navigation"
    android:id="@+id/app_bar_container">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/top_app_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:titleMarginTop="13dp"
        android:minHeight="?attr/actionBarSize"
        app:menu="@menu/top_app_bar"
        app:layout_scrollFlags="scroll|enterAlways"
        app:titleTextColor="@color/cg_text_light" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/sliding_tabs"
        style="@style/tab_style"
        android:layout_width="match_parent"

        app:tabMaxWidth="0dp"

        />

</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/cg_background"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    />

/>

Does this answer your question? [TabLayout not filling width when tabMode set to 'scrollable'](https://stackoverflow.com/questions/32601414/tablayout-not-filling-width-when-tabmode-set-to-scrollable) — ADM, Dec 17 '20 at 12:48

Matt Smith · Answer 1 · 2021-01-07T02:23:45.457

When using tabMode="scrollable" the width of each tab is set to the minimum possible to just wrap the text in it. That means when there aren't many tabs the tab layout won't fill the whole screen.

If you use tabMode="fixed" the width of the tab layout is always the full width available and each tab gets an equal share of that space. That means if there are lots of tabs each tab can be really small and squished (the tab layout won't be scrollable).

There is no standard way to have tabs expand to fill all the space and also scroll if they need more space. To achieve that you need a custom TabLayout like below or as per some of the answers to similar questions

class ScalableTabLayout : TabLayout {
    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    )

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val tabLayout = getChildAt(0) as ViewGroup
        if (tabLayout.childCount > 0) {
            val widthPixels = MeasureSpec.getSize(widthMeasureSpec)
            val tabMinWidth = widthPixels / tabLayout.childCount
            tabLayout.forEachChild { it.minimumWidth = tabMinWidth }
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    }
}

And then use it in your layout file:

<com.package.name.ScalableTabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMaxWidth="0dp"
    app:tabMode="scrollable" />

both tabMaxWidth="0dp" and tabMode="scrollable" are required

TabLayout does not fill screen width when tabmode is set as scrollable

1 Answers1