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)
tuskyapp · Jan 4, 2025 · 6c908ee · 6c908ee
1 parent 7bc40b4
commit 6c908ee
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 3 deletions.
diff --git a/app/src/main/res/drawable/tab_indicator_bottom.xml b/app/src/main/res/drawable/tab_indicator_bottom.xml
@@ -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". -->

diff --git a/app/src/main/res/drawable/tab_indicator_top.xml b/app/src/main/res/drawable/tab_indicator_top.xml
@@ -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>
diff --git a/app/src/main/res/layout/activity_account.xml b/app/src/main/res/layout/activity_account.xml
@@ -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>

diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
@@ -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" />
 

diff --git a/app/src/main/res/layout/activity_search.xml b/app/src/main/res/layout/activity_search.xml
@@ -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" />