Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set 2 tab takes equal width in tablayout

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>
like image 801
dev90 Avatar asked Feb 16 '19 19:02

dev90


2 Answers

Just add the following.

            android:layout_width="match_parent"
            android:layout_height="30dp"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed"
like image 122
Rezaul Karim Avatar answered Sep 30 '22 17:09

Rezaul Karim


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

like image 34
Jitesh Prajapati Avatar answered Sep 30 '22 17:09

Jitesh Prajapati