Thursday, 21 February 2019

How to set 2 tab takes equal width in tablayout

I am adding 2 tab in 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 following output.

enter image description here

But i want tabs to take full width of screen, like following.

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>



from How to set 2 tab takes equal width in tablayout

No comments:

Post a Comment