6

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.

enter image description here

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

enter image description here

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>
5
  • Can you try with android:layout_width="0dp"? match_parent is not supported inside ConstraintLayout. Feb 16, 2019 at 19:47
  • @EugenPechanec : Tanks for the reply, I tried 0dp but still getting the same output.
    – dev90
    Feb 16, 2019 at 20:22
  • @Kirmani88 answer below is correct, need to add just one line app:tabMaxWidth="0dp", if not, you should show whole layout
    – user10539074
    Feb 21, 2019 at 14:42
  • have you try this: stackoverflow.com/a/44983608/6176003 Feb 21, 2019 at 15:02
  • Use SlidingTabLayout. Feb 23, 2019 at 11:04

8 Answers 8

12

Just add the following.

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

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

0

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

0

You should be use stretchColumns in Table Layout

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

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"/>
0

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

0

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: 👇

The Output of my code:

-1
    <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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.