Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply material 3 to fill dialog/save ui

Browse Source 
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
This commit is contained in:
Joanne Chung
2022-05-06 12:53:12 +08:00
parent 4032303339
commit 4976f2c110
9 changed files with 130 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/res/res/drawable/bottomsheet_background.xml
View File

@@ -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>

20
core/res/res/drawable/btn_outlined.xml Normal file
View File

@@ -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>

19
core/res/res/drawable/btn_tonal.xml Normal file
View File

@@ -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>

31
core/res/res/layout/autofill_fill_dialog.xml
View File

@@ -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>

36
core/res/res/layout/autofill_save.xml
View File

@@ -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>

9
core/res/res/values-night/themes_device_defaults.xml
View File

@@ -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>

3
core/res/res/values/dimens.xml
View File

@@ -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>

25
core/res/res/values/styles.xml
View File

@@ -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>

9
core/res/res/values/themes_device_defaults.xml
View File

@@ -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>