How to set 2 tab takes equal width in tablayout

Question

I am adding 2 tabs in the TabLayout, and following is my code.

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    style="@style/AppTabLayout"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:layout_gravity="center"
    app:tabBackground="@drawable/tab_selector_statistics"
    android:background="@drawable/tab_statistics"
    app:tabContentStart="24dp"
    app:tabGravity="fill"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/white"
    app:tabTextColor="@color/black"
    app:layout_constraintBottom_toBottomOf="@+id/view5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/view5"
    android:layout_alignParentTop="true"
    android:layout_alignParentBottom="true" />

I am getting the following output.

But I want tabs to take the full width of the screen, as follows.

Following is my AppTabLayout style defined in styles.xml file.

<style name="AppTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@null</item>
    <item name="tabIndicatorHeight">1dp</item>
    <item name="tabPaddingStart">16dp</item>
    <item name="tabPaddingEnd">16dp</item>
    <item name="tabSelectedTextColor">@color/white</item>
</style>

Can you try with `android:layout_width="0dp"`? `match_parent` is not supported inside `ConstraintLayout`. — Eugen Pechanec, Feb 16 '19 at 19:47
@EugenPechanec : Tanks for the reply, I tried `0dp` but still getting the same output. — dev90, Feb 16 '19 at 20:22
@Kirmani88 answer below is correct, need to add just one line app:tabMaxWidth="0dp", if not, you should show whole layout — , Feb 21 '19 at 14:42
have you try this: https://stackoverflow.com/a/44983608/6176003 — Paraskevas Ntsounos, Feb 21 '19 at 15:02

Rezaul Karim · Answer 1 · 2021-01-13T11:58:11.020

11

Just add the following.

            android:layout_width="match_parent"
            android:layout_height="30dp"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed"

edited Jan 13 '21 at 11:58

answered Feb 17 '19 at 10:10

Rezaul Karim

830
8
15

Jitesh Prajapati · Answer 2 · 2019-02-23T10:11:11.917

Use style

<style name="MyTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabGravity">fill</item>
    <item name="tabMaxWidth">0dp</item>
</style>

or

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed" />

reference

Full width tablayout

score 0 · Answer 3 · answered Feb 23 '19 at 07:19

match_parent is not supported by ConstraintLayout. Set width to 0dp to let it match constraints.

android:layout_width="0dp"

From the official doc:

Important: MATCH_PARENT is not recommended for widgets contained in a ConstraintLayout. Similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".

score 0 · Answer 4 · answered Feb 23 '19 at 09:43

0

You should be use stretchColumns in Table Layout

<TableLayout
        android:stretchColumns="*">
        <TableRow
            android:layout_width="0dp">
    <TableRow
            android:layout_width="0dp">
</TableLayout>

answered Feb 23 '19 at 09:43

Nikhil Vadoliya

1,542
10
17

score 0 · Answer 5 · answered Feb 23 '19 at 10:10

Just do as below. This is work for me.

<android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabBackground="@color/colorPrimary"
                app:tabIndicatorColor="@android:color/white"
                app:tabTextColor="@android:color/white"
                app:tabMode="fixed"
                app:tabGravity="fill"/>

score 0 · Answer 6 · answered Jun 24 '21 at 16:39

0

You may also want to use app:tabIndicatorFullWidth="true" in the TabLayout

answered Jun 24 '21 at 16:39

Chris River

404
4
4

score 0 · Answer 7 · answered Jul 19 '23 at 15:58

In my case, I succeeded in getting the accepted output with just this one line of code: app:tabMode="fixed".

Full code of my TabLayout:

<com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:paddingBottom="2dp"
            app:tabMode="fixed"
            app:tabTextColor="?titleTextColor"
            android:background="?android:statusBarColor" />

The Output of my code:

score -1 · Answer 8 · answered Feb 26 '19 at 06:49

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="0dp"
        android:layout_height="34.5dp"
        android:elevation="@dimen/dimen_10"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/overTimeCV"
        app:tabMode="fixed"/>

Check with this TabLayout along with viewPager

How to set 2 tab takes equal width in tablayout

8 Answers8