TabLayout not filling width when tabMode set to 'scrollable'
I have added TabLayout
(from support library v22.2.1) to my Fragment as:
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/MyColorAccentTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"/>
The issue is that when the Fragment's orientation is landscape (before or after the initial creation of the fragment), the TabLayout
doesn't match the width of the Fragment
(yes the parent has its width set to match_parent
as well).
When screen width is small (i.e not all tabs can be shown at same time):
When screen width is big enough to show all tabs (see the blank space at the right):
If I change tabMode
to fixed, width is filled but tabs are too small. Is there any proper solution out there?
androidx version:
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed"
/>
</androidx.viewpager.widget.ViewPager>
***** BELOW IS OLD ANSWER *****
Try this one, it's a workaround which sets tabMaxWidth="0dp"
, tabGravity="fill"
and tabMode="fixed"
.
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed"/>
</android.support.v4.view.ViewPager>
Screenshot on a 10 inch tablet:
Instead of creating custom TabLayout and hacking around or creating more layouts which acts as wrapper around TabLayout only for background. Try this,
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/MyColorAccentTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<!-- Instead of setting app:tabBackground -->
android:background="@color/colorAccent"
app:tabGravity="fill"
app:tabMode="scrollable"/>
This will set background to behind tabLayout instead of setting background behind every tab.