increase width of tab indicator (#4849)

There have been multiple complaints by users that the new Material 3 tab
indicator is too small.

Setting `app:tabIndicatorFullWidth="true"` alone looks weird imho, so I
additionally added some padding.

cc @mcclure 

Before / After


![before](https://github.com/user-attachments/assets/2234aed0-c558-4318-8cd5-fdb39af436a2)
![after](https://github.com/user-attachments/assets/1d806ad1-139c-41ed-9939-bc45f66d95c0)
This commit is contained in:
Konrad Pozniak 2025-01-04 20:13:13 +01:00 committed by GitHub
parent 7bc40b4b03
commit 6c908ee9d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 29 additions and 3 deletions

View File

@ -1,8 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="2dp"
android:right="2dp">
android:left="16dp"
android:right="16dp">
<shape
android:shape="rectangle">
<!-- Color is assigned programmatically with the value of "tabIndicatorColor". -->

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="16dp"
android:right="16dp">
<shape
android:shape="rectangle">
<!-- Color is assigned programmatically with the value of "tabIndicatorColor". -->
<solid android:color="@android:color/white"/>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="3dp"
android:topRightRadius="3dp"/>
<size android:height="3dp"/>
</shape>
</item>
</layer-list>

View File

@ -444,6 +444,9 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="center"
app:tabIndicatorHeight="4dp"
app:tabIndicator="@drawable/tab_indicator_top"
app:tabIndicatorFullWidth="true"
app:tabMode="scrollable" />
</com.google.android.material.appbar.AppBarLayout>

View File

@ -45,6 +45,8 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicator="@drawable/tab_indicator_top"
app:tabIndicatorFullWidth="true"
app:tabMaxWidth="0dp"
app:tabMode="scrollable" />
@ -80,8 +82,9 @@
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorSurface"
app:tabGravity="fill"
app:tabIndicatorGravity="top"
app:tabIndicator="@drawable/tab_indicator_bottom"
app:tabIndicatorFullWidth="true"
app:tabIndicatorGravity="top"
app:tabMode="scrollable"
app:tabPaddingTop="0dp" />

View File

@ -26,6 +26,8 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicator="@drawable/tab_indicator_top"
app:tabIndicatorFullWidth="true"
app:tabMaxWidth="0dp"
app:tabMode="fixed" />