Search code examples
androidandroid-tablayouttabitem

How to arrange tabitems of tabLaout in multiple rows in fixed mode?


I want to have seven tabs in a tabLayout. They won't be scrollable. So, I want them to be in multiple lines. But, in fixed mode, they are all arranged in a single row. I have found some answers which are not a direct answer rather a workaround. Is there a way to do this?

A snapshot of my XML:

<com.google.android.material.tabs.TabLayout
        android:id="@+id/layout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorGrayStandard"
        app:tabTextColor="@color/colorWhite">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/device" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/wikipedia" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/wikia" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/youtube" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/goodreads" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/imdb" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/yelp" />
    </com.google.android.material.tabs.TabLayout>

Solution

  • Here is the documentation for TabLayout: https://developer.android.com/reference/com/google/android/material/tabs/TabLayout

    TabLayout provides a horizontal layout to display tabs.

    That is the first line written in the documentation and it is your answer to this question.

    This is not possible with TabLayout. You can make them scrollable and that's it. There is a lot of workarounds you can create and use without problems.

    In the documentation above, you can find anything that's actually possible with TabLayout. If you want to create workarounds just create fixed tabs by yourself, create listeners, and use fragments to change views you want when the tab changes.