[DocsUI M3] Uplift Profile tabs

Check the bug item for demo.

Bug: 381928119
Test: Manual inspection
Flag: com.android.documentsui.flags.use_material3
Change-Id: Id2dbc03b7c3e13763132a3aaeb91c4605db09fd2

13 files changed, 186 insertions, 57 deletions

diff --git a/res/flag(com.android.documentsui.flags.use_material3)/color/profile_tab_ripple_color.xml b/res/flag(com.android.documentsui.flags.use_material3)/color/profile_tab_ripple_color.xml
new file mode 100644
index 000000000..de985a40f
--- /dev/null
+++ b/res/flag(com.android.documentsui.flags.use_material3)/color/profile_tab_ripple_color.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2024 The Android Open Source Project
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  -->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_activated="true"
+        android:alpha="@dimen/ripple_overlay_alpha" android:color="?attr/colorOnPrimaryContainer"/>
+    <item android:alpha="@dimen/ripple_overlay_alpha" android:color="?attr/colorOnSurfaceVariant"/>
+</selector>
\ No newline at end of file
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/color/profile_tab_selector.xml b/res/flag(com.android.documentsui.flags.use_material3)/drawable/profile_tab_mask.xml
index a163185af..3c1e33b0e 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/color/profile_tab_selector.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/drawable/profile_tab_mask.xml
@@ -14,10 +14,8 @@
      limitations under the License.
 -->
 
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item
-        android:state_selected="true"
-        android:color="@color/profile_tab_selected_color"/>
-    <item
-        android:color="@color/profile_tab_default_color"/>
-</selector>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <corners android:radius="@dimen/profile_tab_radius"/>
+    <!-- The color here doesn't matter, it's just being used as a mask in tab_border_rounded. -->
+    <solid android:color="@android:color/white"/>
+</shape>
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/drawable/tab_border_rounded.xml b/res/flag(com.android.documentsui.flags.use_material3)/drawable/tab_border_rounded.xml
index 96b7e6d49..b50587c01 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/drawable/tab_border_rounded.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/drawable/tab_border_rounded.xml
@@ -14,10 +14,135 @@
      limitations under the License.
 -->
 
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="rectangle">
+<ripple
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="@color/profile_tab_ripple_color">
 
-   <solid
-       android:color="@color/profile_tab_selector"/>
-   <corners android:radius="12dp"/>
-</shape>
+   <!-- The mask below only works for the ripple itself, doesn't work for other <item>s, we
+        need to explicitly apply the drawable if the other items also need this mask. -->
+   <item
+       android:id="@android:id/mask"
+       android:drawable="@drawable/profile_tab_mask"/>
+
+   <item>
+      <selector>
+         <!-- Selected (activated). -->
+         <item android:state_activated="true" android:state_pressed="true">
+            <layer-list>
+               <item>
+                  <shape>
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <solid android:color="?attr/colorPrimaryContainer" />
+                  </shape>
+               </item>
+               <item>
+                  <shape android:tint="?attr/colorOnPrimaryContainer">
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <solid android:color="@color/overlay_color_percentage_10" />
+                  </shape>
+               </item>
+            </layer-list>
+         </item>
+         <item android:state_activated="true" android:state_focused="true">
+            <layer-list>
+               <item>
+                  <shape>
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <solid android:color="?attr/colorPrimaryContainer" />
+                  </shape>
+               </item>
+               <item>
+                  <shape>
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <stroke
+                         android:width="@dimen/focus_ring_width"
+                         android:color="?attr/colorSecondary" />
+                  </shape>
+               </item>
+            </layer-list>
+         </item>
+         <item android:state_activated="true" android:state_hovered="true">
+            <layer-list>
+               <item>
+                  <shape>
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <solid android:color="?attr/colorPrimaryContainer" />
+                  </shape>
+               </item>
+               <item>
+                  <shape android:tint="?attr/colorOnPrimaryContainer">
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <solid android:color="@color/overlay_color_percentage_10" />
+                  </shape>
+               </item>
+            </layer-list>
+         </item>
+         <item android:state_activated="true">
+            <shape>
+               <corners android:radius="@dimen/profile_tab_radius" />
+               <solid android:color="?attr/colorPrimaryContainer" />
+            </shape>
+         </item>
+
+         <!-- Unselected. -->
+         <item android:state_pressed="true">
+            <layer-list>
+               <item>
+                  <shape>
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <solid android:color="?attr/colorSurfaceContainerHighest" />
+                  </shape>
+               </item>
+               <item>
+                  <shape android:tint="?attr/colorOnSurface">
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <solid android:color="@color/overlay_color_percentage_10" />
+                  </shape>
+               </item>
+            </layer-list>
+         </item>
+         <item android:state_focused="true">
+            <layer-list>
+               <item>
+                  <shape>
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <solid android:color="?attr/colorSurfaceContainerHighest" />
+                  </shape>
+               </item>
+               <item>
+                  <shape>
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <stroke
+                         android:width="@dimen/focus_ring_width"
+                         android:color="?attr/colorSecondary" />
+                  </shape>
+               </item>
+            </layer-list>
+         </item>
+         <item android:state_hovered="true">
+            <layer-list>
+               <item>
+                  <shape>
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <solid android:color="?attr/colorSurfaceContainerHighest" />
+                  </shape>
+               </item>
+               <item>
+                  <shape android:tint="?attr/colorOnSurface">
+                     <corners android:radius="@dimen/profile_tab_radius" />
+                     <solid android:color="@color/overlay_color_percentage_10" />
+                  </shape>
+               </item>
+            </layer-list>
+         </item>
+
+         <!-- Default -->
+         <item>
+            <shape>
+               <corners android:radius="@dimen/profile_tab_radius" />
+               <solid android:color="?attr/colorSurfaceContainerHighest" />
+            </shape>
+         </item>
+      </selector>
+   </item>
+</ripple>
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_header.xml b/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_header.xml
index 95b549d85..7623403f6 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_header.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_header.xml
@@ -25,33 +25,28 @@
 
     <LinearLayout
         android:id="@+id/tabs_container"
-        android:theme="@style/TabTheme"
         android:clipToPadding="true"
         android:clipChildren="true"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:paddingStart="@dimen/main_container_padding_start"
         android:paddingEnd="@dimen/main_container_padding_end"
+        android:paddingBottom="@dimen/space_extra_small_6"
         android:orientation="vertical">
 
         <com.google.android.material.tabs.TabLayout
             android:id="@+id/tabs"
-            android:background="@android:color/transparent"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             app:tabMaxWidth="0dp"
             app:tabGravity="fill"
             app:tabMode="fixed"
-            app:tabIndicatorColor="?android:attr/colorAccent"
-            app:tabIndicatorHeight="@dimen/tab_selector_indicator_height"
-            app:tabSelectedTextColor="@color/tab_selected_text_color"
-            app:tabTextAppearance="@style/TabTextAppearance"
-            app:tabTextColor="@color/tab_unselected_text_color"/>
+            style="@style/ProfileTabStyle"/>
         <View
             android:id="@+id/tab_separator"
             android:layout_width="match_parent"
             android:layout_height="1dp"
-            android:background="?android:attr/listDivider"/>
+            android:background="?attr/colorOutlineVariant"/>
     </LinearLayout>
 
     <!-- used for apps row. -->
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/values-night-v31/colors.xml b/res/flag(com.android.documentsui.flags.use_material3)/values-night-v31/colors.xml
index ab154150b..2105936ab 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/values-night-v31/colors.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/values-night-v31/colors.xml
@@ -14,7 +14,6 @@
 -->
 
 <resources>
-  <color name="tab_selected_text_color">@android:color/black</color>
   <color name="work_profile_button_stroke_color">
     @*android:color/system_accent1_200
   </color> <!-- accent 200 -->
@@ -24,15 +23,6 @@
   <color name="empty_state_message_text_color">
     @*android:color/system_neutral2_200
   </color>
-  <!-- neutral variant 200 -->
-  <color name="tab_unselected_text_color">@*android:color/system_neutral2_200
-  </color>
-  <!-- neutral variant 200 -->
-  <color name="profile_tab_default_color">@*android:color/system_neutral1_800
-  </color>
-  <!-- neutral 800 -->
-  <color name="profile_tab_selected_color">@*android:color/system_neutral2_100
-  </color>
   <!-- neutral variant 100 -->
   <color name="fragment_pick_inactive_button_color">
     @*android:color/system_neutral1_800
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/values-v31/colors.xml b/res/flag(com.android.documentsui.flags.use_material3)/values-v31/colors.xml
index 44feff32a..3096f8a3e 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/values-v31/colors.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/values-v31/colors.xml
@@ -14,11 +14,6 @@
 -->
 
 <resources>
-  <color name="tab_selected_text_color">@*android:color/system_neutral1_900
-  </color>
-  <!-- neutral 900 -->
-  <color name="tab_unselected_text_color">@*android:color/system_neutral2_700
-  </color>
   <!-- neutral variant 700-->
   <color name="work_profile_button_stroke_color">
     @*android:color/system_accent1_600
@@ -29,12 +24,6 @@
   <color name="empty_state_message_text_color">
     @*android:color/system_neutral2_700
   </color>
-  <!-- neutral variant 700 -->
-  <color name="profile_tab_selected_color">@*android:color/system_accent1_100
-  </color>
-  <!-- accent 100 -->
-  <color name="profile_tab_default_color">@*android:color/system_neutral1_10
-  </color>
   <!-- neutral 10 -->
   <color name="fragment_pick_inactive_button_color">
     @*android:color/system_neutral1_100
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/values-v31/dimens.xml b/res/flag(com.android.documentsui.flags.use_material3)/values-v31/dimens.xml
index 006b99173..07630714f 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/values-v31/dimens.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/values-v31/dimens.xml
@@ -18,11 +18,10 @@
     <dimen name="action_bar_margin">0dp</dimen>
     <dimen name="button_corner_radius">20dp</dimen>
     <dimen name="tab_selector_indicator_height">0dp</dimen>
-    <dimen name="tab_height">48dp</dimen>
+    <dimen name="tab_height">36dp</dimen>
     <dimen name="tab_container_height">48dp</dimen>
-    <dimen name="profile_tab_padding">20dp</dimen>
-    <dimen name="profile_tab_margin_top">16dp</dimen>
-    <dimen name="profile_tab_margin_side">4dp</dimen>
+    <dimen name="profile_tab_margin_top">0dp</dimen>
+    <dimen name="profile_tab_margin_side">@dimen/space_extra_small_4</dimen>
     <dimen name="cross_profile_button_corner_radius">30dp</dimen>
     <dimen name="cross_profile_button_stroke_width">1dp</dimen>
     <dimen name="cross_profile_button_message_margin_top">16dp</dimen>
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/values/colors.xml b/res/flag(com.android.documentsui.flags.use_material3)/values/colors.xml
index a6054707a..c3155d5ee 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/values/colors.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/values/colors.xml
@@ -63,11 +63,7 @@
   -->
   <color name="color_surface_header">@color/m3_ref_palette_dynamic_neutral_variant92</color>
 
-  <color name="tab_selected_text_color">@color/primary</color>
   <color name="work_profile_button_stroke_color">@color/primary</color>
-  <color name="profile_tab_selected_color">?android:attr/colorAccent</color>
-  <color name="profile_tab_default_color">#E0E0E0</color>
-  <color name="tab_unselected_text_color">#5F6368</color> <!-- Gray 700 -->
 
   <color name="fragment_pick_inactive_button_color">#E0E0E0</color>
   <color name="fragment_pick_inactive_text_color">#5F6368</color>
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/values/dimens.xml b/res/flag(com.android.documentsui.flags.use_material3)/values/dimens.xml
index eb9997ad5..8cefd0eab 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/values/dimens.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/values/dimens.xml
@@ -137,6 +137,8 @@
     <dimen name="apps_row_exit_icon_margin_bottom">6dp</dimen>
     <dimen name="apps_row_item_text_margin_horizontal">8dp</dimen>
 
+    <dimen name="profile_tab_radius">12dp</dimen>
+
     <dimen name="search_bar_elevation">0dp</dimen>
     <dimen name="search_bar_radius">8dp</dimen>
     <dimen name="search_bar_background_margin_start">0dp</dimen>
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/values/styles.xml b/res/flag(com.android.documentsui.flags.use_material3)/values/styles.xml
index e491d95a1..ffc83f6dc 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/values/styles.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/values/styles.xml
@@ -153,4 +153,14 @@
         <item name="android:layout_marginStart">@dimen/drawer_item_action_icon_margin_start</item>
         <item name="strokeColor">?attr/colorSecondary</item>
     </style>
+
+    <style name="ProfileTabStyle" parent="@style/Widget.Material3.TabLayout">
+        <!-- Use transparent bg color to hide the underline for tab layout. -->
+        <item name="android:background">@android:color/transparent</item>
+        <item name="tabIndicatorColor">?attr/colorPrimary</item>
+        <item name="tabIndicatorHeight">@dimen/tab_selector_indicator_height</item>
+        <item name="tabTextColor">?attr/colorOnSurfaceVariant</item>
+        <item name="tabSelectedTextColor">?attr/colorOnPrimaryContainer</item>
+        <item name="tabTextAppearance">@style/TabTextAppearance</item>
+    </style>
 </resources>
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/values/styles_text.xml b/res/flag(com.android.documentsui.flags.use_material3)/values/styles_text.xml
index f0c3fd93b..bbf25a469 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/values/styles_text.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/values/styles_text.xml
@@ -119,8 +119,7 @@
         <item name="fontFamily">@string/config_fontFamilyMedium</item>
     </style>
 
-    <style name="TabTextAppearance" parent="@style/TextAppearance.Material3.TitleMedium">
-        <item name="android:textSize">14sp</item>
+    <style name="TabTextAppearance" parent="@style/TextAppearance.Material3.TitleSmall">
         <item name="fontFamily">@string/config_fontFamilyMedium</item>
     </style>
 
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/values/themes.xml b/res/flag(com.android.documentsui.flags.use_material3)/values/themes.xml
index 7732657fe..c486b49c2 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/values/themes.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/values/themes.xml
@@ -75,8 +75,4 @@
         <item name="snackbarButtonStyle">@style/SnackbarButtonStyle</item>
         <item name="android:itemTextAppearance">@style/MenuItemTextAppearance</item>
     </style>
-
-    <style name="TabTheme" parent="@android:style/Theme.DeviceDefault.DayNight">
-        <item name="colorPrimary">@color/edge_effect</item>
-    </style>
 </resources>
diff --git a/src/com/android/documentsui/ProfileTabs.java b/src/com/android/documentsui/ProfileTabs.java
index df525d527..9fbae8bae 100644
--- a/src/com/android/documentsui/ProfileTabs.java
+++ b/src/com/android/documentsui/ProfileTabs.java
@@ -20,6 +20,7 @@ import static androidx.core.util.Preconditions.checkNotNull;
 
 import static com.android.documentsui.DevicePolicyResources.Strings.PERSONAL_TAB;
 import static com.android.documentsui.DevicePolicyResources.Strings.WORK_TAB;
+import static com.android.documentsui.flags.Flags.useMaterial3;
 
 import android.app.admin.DevicePolicyManager;
 import android.os.Build;
@@ -155,7 +156,14 @@ public class ProfileTabs implements ProfileTabsAddons {
                         (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
                 int tabMarginSide = (int) mTabsContainer.getContext().getResources()
                         .getDimension(R.dimen.profile_tab_margin_side);
-                marginLayoutParams.setMargins(tabMarginSide, 0, tabMarginSide, 0);
+                if (useMaterial3()) {
+                    // M3 uses the margin value as the right margin, except for the last child.
+                    if (i != mTabs.getTabCount() - 1) {
+                        marginLayoutParams.setMargins(0, 0, tabMarginSide, 0);
+                    }
+                } else {
+                    marginLayoutParams.setMargins(tabMarginSide, 0, tabMarginSide, 0);
+                }
                 int tabHeightInDp = (int) mTabsContainer.getContext().getResources()
                         .getDimension(R.dimen.tab_height);
                 tab.getLayoutParams().height = tabHeightInDp;