From 6c908ee9d1ebfa23f8057a98c483ed03889c2c6a Mon Sep 17 00:00:00 2001
From: Konrad Pozniak <connyduck@users.noreply.github.com>
Date: Sat, 4 Jan 2025 20:13:13 +0100
Subject: [PATCH] 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)
---
 .../main/res/drawable/tab_indicator_bottom.xml |  4 ++--
 .../main/res/drawable/tab_indicator_top.xml    | 18 ++++++++++++++++++
 app/src/main/res/layout/activity_account.xml   |  3 +++
 app/src/main/res/layout/activity_main.xml      |  5 ++++-
 app/src/main/res/layout/activity_search.xml    |  2 ++
 5 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 app/src/main/res/drawable/tab_indicator_top.xml

diff --git a/app/src/main/res/drawable/tab_indicator_bottom.xml b/app/src/main/res/drawable/tab_indicator_bottom.xml
index 82ce65a388..0db28ec28a 100644
--- 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
new file mode 100644
index 0000000000..74973260ca
--- /dev/null
+++ 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
index b411df4571..880f3d5003 100644
--- 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
index 7c39d4b606..042241d570 100644
--- 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
index 8026939b1f..f9173fe59a 100644
--- 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" />