From 4976f2c110142ad1370484786edd6135bd32a44c Mon Sep 17 00:00:00 2001
From: Joanne Chung <joannechung@google.com>
Date: Fri, 6 May 2022 12:53:12 +0800
Subject: [PATCH] Apply material 3 to fill dialog/save ui

The framework cannot use the material 3 directly because it may cause
conflicts with libraries used by apps. So we tried to do the
customization to let it looks like matrial 3.

This is the first change for updating the style, it focuses on the color
and buttons, we still have some UIs don't respect the spec, this will
be done in the follow up change.

Bug: 225234267
Test: use sample code to verify the fill dialog and saveui. The color
and shape are expected in light/dark/theme color.

Change-Id: Ibfa108b8812c5b0ea7987882451cfcd62579e5e4
---
 .../res/drawable/bottomsheet_background.xml   |  6 ++--
 core/res/res/drawable/btn_outlined.xml        | 20 +++++++++++
 core/res/res/drawable/btn_tonal.xml           | 19 ++++++++++
 core/res/res/layout/autofill_fill_dialog.xml  | 31 ++++++++++------
 core/res/res/layout/autofill_save.xml         | 36 +++++++++++--------
 .../values-night/themes_device_defaults.xml   |  9 +++++
 core/res/res/values/dimens.xml                |  3 +-
 core/res/res/values/styles.xml                | 25 +++++++++++++
 .../res/res/values/themes_device_defaults.xml |  9 +++++
 9 files changed, 130 insertions(+), 28 deletions(-)
 create mode 100644 core/res/res/drawable/btn_outlined.xml
 create mode 100644 core/res/res/drawable/btn_tonal.xml

diff --git a/core/res/res/drawable/bottomsheet_background.xml b/core/res/res/drawable/bottomsheet_background.xml
index 00d53004c9dca..9469e0a672076 100644
--- a/core/res/res/drawable/bottomsheet_background.xml
+++ b/core/res/res/drawable/bottomsheet_background.xml
@@ -16,7 +16,7 @@
 
 <shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
     <corners
-        android:topLeftRadius="@dimen/config_bottomDialogCornerRadius"
-        android:topRightRadius="@dimen/config_bottomDialogCornerRadius"/>
-    <solid android:color="?attr/colorBackground" />
+        android:topLeftRadius="@dimen/autofill_dialog_corner_radius"
+        android:topRightRadius="@dimen/autofill_dialog_corner_radius"/>
+    <solid android:color="?attr/colorSurface" />
 </shape>
diff --git a/core/res/res/drawable/btn_outlined.xml b/core/res/res/drawable/btn_outlined.xml
new file mode 100644
index 0000000000000..8fbcc258be551
--- /dev/null
+++ b/core/res/res/drawable/btn_outlined.xml
@@ -0,0 +1,20 @@
+<!-- Copyright (C) 2022 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
+
+          http://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.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+  <solid android:color="?attr/selectableItemBackground"/>
+  <stroke android:width="1dp" android:color="?attr/colorAccentPrimaryVariant"/>
+  <corners android:radius="28dp"/>
+</shape>
diff --git a/core/res/res/drawable/btn_tonal.xml b/core/res/res/drawable/btn_tonal.xml
new file mode 100644
index 0000000000000..b891ca8cd7889
--- /dev/null
+++ b/core/res/res/drawable/btn_tonal.xml
@@ -0,0 +1,19 @@
+<!-- Copyright (C) 2022 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
+
+          http://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.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+  <solid android:color="?attr/colorAccentPrimary"/>
+  <corners android:radius="28dp"/>
+</shape>
diff --git a/core/res/res/layout/autofill_fill_dialog.xml b/core/res/res/layout/autofill_fill_dialog.xml
index 0b6a2016f03d1..e638764840738 100644
--- a/core/res/res/layout/autofill_fill_dialog.xml
+++ b/core/res/res/layout/autofill_fill_dialog.xml
@@ -20,8 +20,6 @@
     android:id="@+id/autofill_dialog_picker"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="@dimen/autofill_save_outer_top_margin"
-    android:padding="@dimen/autofill_save_outer_top_padding"
     android:background="@drawable/bottomsheet_background"
     android:orientation="vertical">
 
@@ -29,8 +27,9 @@
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:gravity="center_horizontal"
-        android:paddingStart="@dimen/autofill_save_inner_padding"
-        android:paddingEnd="@dimen/autofill_save_inner_padding"
+        android:paddingTop="24dp"
+        android:layout_marginStart="24dp"
+        android:layout_marginEnd="24dp"
         android:orientation="vertical">
 
         <ImageView
@@ -59,6 +58,8 @@
         android:paddingStart="@dimen/autofill_save_inner_padding"
         android:paddingEnd="@dimen/autofill_save_inner_padding"
         android:visibility="gone"
+        android:layout_marginStart="24dp"
+        android:layout_marginEnd="24dp"
         android:background="@drawable/autofill_dataset_picker_background"/>
 
     <ListView
@@ -69,22 +70,30 @@
         android:drawSelectorOnTop="true"
         android:clickable="true"
         android:divider="?android:attr/listDivider"
+        android:layout_marginStart="24dp"
+        android:layout_marginEnd="24dp"
         android:background="@drawable/autofill_dataset_picker_background"
         android:visibility="gone"/>
 
     <com.android.internal.widget.ButtonBarLayout
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
+        android:layout_height="48dp"
         android:layout_gravity="end"
-        android:padding="@dimen/autofill_save_button_bar_padding"
         android:clipToPadding="false"
+        android:layout_marginTop="32dp"
+        android:layout_marginBottom="18dp"
+        android:layout_marginStart="24dp"
+        android:layout_marginEnd="24dp"
+        android:theme="@style/Theme.DeviceDefault.AutofillHalfScreenDialogButton"
         android:orientation="horizontal">
 
         <Button
             android:id="@+id/autofill_dialog_no"
             android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            style="?android:attr/buttonBarButtonStyle"
+            android:layout_height="36dp"
+            android:layout_marginTop="6dp"
+            android:layout_marginBottom="6dp"
+            style="@style/AutofillHalfSheetOutlinedButton"
             android:text="@string/autofill_save_no">
         </Button>
 
@@ -98,8 +107,10 @@
         <Button
             android:id="@+id/autofill_dialog_yes"
             android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            style="@style/Widget.DeviceDefault.Button.Colored"
+            android:layout_height="36dp"
+            android:layout_marginTop="6dp"
+            android:layout_marginBottom="6dp"
+            style="@style/AutofillHalfSheetTonalButton"
             android:text="@string/autofill_save_yes"
             android:visibility="gone" >
         </Button>
diff --git a/core/res/res/layout/autofill_save.xml b/core/res/res/layout/autofill_save.xml
index eb5fd56d51c6c..8a1a9c7a90832 100644
--- a/core/res/res/layout/autofill_save.xml
+++ b/core/res/res/layout/autofill_save.xml
@@ -19,6 +19,7 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
+    android:background="@drawable/bottomsheet_background"
     android:orientation="vertical">
 
     <LinearLayout
@@ -29,7 +30,7 @@
         android:layout_marginTop="@dimen/autofill_save_outer_top_margin"
         android:paddingTop="@dimen/autofill_save_outer_top_padding"
         android:elevation="@dimen/autofill_elevation"
-        android:background="?android:attr/colorBackground"
+        android:background="?android:attr/colorSurface"
         android:orientation="vertical">
 
         <LinearLayout
@@ -73,13 +74,26 @@
 
         <com.android.internal.widget.ButtonBarLayout
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
+            android:layout_height="48dp"
             android:layout_gravity="end"
-            android:padding="@dimen/autofill_save_button_bar_padding"
             android:clipToPadding="false"
-            android:layout_weight="1"
+            android:layout_marginTop="32dp"
+            android:layout_marginBottom="18dp"
+            android:layout_marginStart="24dp"
+            android:layout_marginEnd="24dp"
+            android:theme="@style/Theme.DeviceDefault.AutofillHalfScreenDialogButton"
             android:orientation="horizontal">
 
+            <Button
+                android:id="@+id/autofill_save_no"
+                android:layout_width="wrap_content"
+                android:layout_height="36dp"
+                android:layout_marginTop="6dp"
+                android:layout_marginBottom="6dp"
+                style="@style/AutofillHalfSheetOutlinedButton"
+                android:text="@string/autofill_save_no">
+            </Button>
+
             <Space
                 android:layout_width="0dp"
                 android:layout_height="0dp"
@@ -87,19 +101,13 @@
                 android:visibility="invisible">
             </Space>
 
-            <Button
-                android:id="@+id/autofill_save_no"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                style="?android:attr/buttonBarButtonStyle"
-                android:text="@string/autofill_save_no">
-            </Button>
-
             <Button
                 android:id="@+id/autofill_save_yes"
                 android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                style="@style/Widget.DeviceDefault.Button.Colored"
+                android:layout_height="36dp"
+                android:layout_marginTop="6dp"
+                android:layout_marginBottom="6dp"
+                style="@style/AutofillHalfSheetTonalButton"
                 android:text="@string/autofill_save_yes">
             </Button>
 
diff --git a/core/res/res/values-night/themes_device_defaults.xml b/core/res/res/values-night/themes_device_defaults.xml
index 93975a9d7bf18..366e6f97eed33 100644
--- a/core/res/res/values-night/themes_device_defaults.xml
+++ b/core/res/res/values-night/themes_device_defaults.xml
@@ -90,4 +90,13 @@ easier.
         <item name="colorBackgroundFloating">@android:color/GM2_grey_800</item>
         <item name="textColorSecondary">@android:color/resolver_text_color_secondary_dark</item>
     </style>
+
+    <!-- @hide DeviceDefault theme for the Autofill half screen dialog UI.  -->
+    <style name="Theme.DeviceDefault.AutofillHalfScreenDialogButton" parent="Theme.DeviceDefault.Panel">
+        <item name="selectableItemBackground">@android:color/transparent</item>
+        <item name="colorAccentPrimaryVariant">@color/system_accent1_200</item>
+        <item name="colorAccentPrimary">@color/system_accent1_700</item>
+        <item name="textColorPrimary">@color/system_neutral1_100</item>
+        <item name="textColorSecondary">@color/system_neutral2_100</item>
+    </style>
 </resources>
diff --git a/core/res/res/values/dimens.xml b/core/res/res/values/dimens.xml
index b73f96e3696ca..211bf7f7b581d 100644
--- a/core/res/res/values/dimens.xml
+++ b/core/res/res/values/dimens.xml
@@ -873,6 +873,7 @@
     <dimen name="autofill_save_title_start_padding">8dp</dimen>
     <dimen name="autofill_save_scroll_view_top_margin">4dp</dimen>
     <dimen name="autofill_save_button_bar_padding">16dp</dimen>
+    <dimen name="autofill_dialog_corner_radius">28dp</dimen>
 
     <!-- Max height of the the autofill save custom subtitle as a fraction of the screen width/height -->
     <dimen name="autofill_save_custom_subtitle_max_height">20%</dimen>
@@ -888,7 +889,7 @@
     <integer name="autofill_max_visible_datasets">3</integer>
 
     <!-- Size of an icon in the Autolfill fill dialog -->
-    <dimen name="autofill_dialog_icon_size">24dp</dimen>
+    <dimen name="autofill_dialog_icon_size">32dp</dimen>
 
     <!-- Size of a slice shortcut view -->
     <dimen name="slice_shortcut_size">56dp</dimen>
diff --git a/core/res/res/values/styles.xml b/core/res/res/values/styles.xml
index c07404bf141d7..0c35f93147a64 100644
--- a/core/res/res/values/styles.xml
+++ b/core/res/res/values/styles.xml
@@ -1464,6 +1464,31 @@ please see styles_device_defaults.xml.
         <item name="successColor">@color/lock_pattern_view_success_color</item>
     </style>
 
+    <!-- @hide The style for Autofill half screen dialog button -->
+    <style name="AutofillHalfSheetButton" parent="Widget.Material.Button">
+        <item name="textSize">14sp</item>
+        <item name="fontFamily">google-sans-text-medium</item>
+        <item name="textStyle">normal</item>
+        <item name="textAllCaps">false</item>
+        <item name="layout_marginTop">6dp</item>
+        <item name="layout_marginBottom">6dp</item>
+        <item name="paddingStart">16dp</item>
+        <item name="paddingEnd">16dp</item>
+        <item name="paddingTop">8dp</item>
+        <item name="paddingBottom">8dp</item>
+    </style>
+    <!-- @hide Tonal button for Autofill half screen dialog -->
+    <style name="AutofillHalfSheetTonalButton" parent="AutofillHalfSheetButton">
+        <item name="textColor">?attr/textColorPrimary</item>
+        <item name="background">@drawable/btn_tonal</item>
+        <item name="stateListAnimator">@null</item>
+    </style>
+    <!-- @hide Outline button for Autofill half screen dialog -->
+    <style name="AutofillHalfSheetOutlinedButton" parent="AutofillHalfSheetButton">
+        <item name="textColor">?attr/textColorPrimary</item>
+        <item name="background">@drawable/btn_outlined</item>
+    </style>
+
     <!-- @hide Autofill background for popup window (not for fullscreen) -->
     <style name="AutofillDatasetPicker">
         <item name="elevation">4dp</item>
diff --git a/core/res/res/values/themes_device_defaults.xml b/core/res/res/values/themes_device_defaults.xml
index 9d0a42d8ecd4e..5000b5821aab4 100644
--- a/core/res/res/values/themes_device_defaults.xml
+++ b/core/res/res/values/themes_device_defaults.xml
@@ -2695,4 +2695,13 @@ easier.
     <style name="Theme.DeviceDefault.DocumentsUI" parent="Theme.DeviceDefault.DayNight">
         <item name="actionModeCloseDrawable">@drawable/ic_clear_material</item>
     </style>
+
+    <!-- @hide DeviceDefault theme for the Autofill half screen dialog UI.  -->
+    <style name="Theme.DeviceDefault.AutofillHalfScreenDialogButton" parent="Theme.DeviceDefault.Panel">
+        <item name="selectableItemBackground">@android:color/transparent</item>
+        <item name="colorAccentPrimaryVariant">@color/system_accent1_600</item>
+        <item name="colorAccentPrimary">@color/system_accent1_100</item>
+        <item name="textColorPrimary">@color/system_neutral1_900</item>
+        <item name="textColorSecondary">@color/system_neutral2_700</item>
+    </style>
 </resources>