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:
parent
7bc40b4b03
commit
6c908ee9d1
@ -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". -->
|
||||
|
18
app/src/main/res/drawable/tab_indicator_top.xml
Normal file
18
app/src/main/res/drawable/tab_indicator_top.xml
Normal 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>
|
@ -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>
|
||||
|
@ -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" />
|
||||
|
||||
|
@ -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" />
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user