Merge 'Adjust Button Toggle UI component according to UX reference spec' into tm-dev am: 9e4c9485fd Original change: https://googleplex-android-review.googlesource.com/c/platform/packages/apps/Car/systemlibs/+/17464303 Change-Id: I7919dc05cb680ba1f1eac1adb2b27c17add627b8 Signed-off-by: Automerger Merge Worker <android-build-automerger-merge-worker@system.gserviceaccount.com>
diff --git a/car-qc-lib/res/drawable/qc_row_action_divider.xml b/car-qc-lib/res/drawable/qc_row_action_divider.xml index 75ffd46..62a8fe5 100644 --- a/car-qc-lib/res/drawable/qc_row_action_divider.xml +++ b/car-qc-lib/res/drawable/qc_row_action_divider.xml
@@ -1,5 +1,5 @@ <!-- - ~ Copyright (C) 2021 The Android Open Source Project + ~ 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. @@ -17,5 +17,5 @@ <shape xmlns:android="http://schemas.android.com/apk/res/android"> <size android:height="0dp" - android:width="@dimen/qc_toggle_margin"/> -</shape> + android:width="@dimen/qc_row_horizontal_margin"/> +</shape> \ No newline at end of file
diff --git a/car-qc-lib/res/drawable/qc_toggle_background.xml b/car-qc-lib/res/drawable/qc_toggle_background.xml index c139590..3688175 100644 --- a/car-qc-lib/res/drawable/qc_toggle_background.xml +++ b/car-qc-lib/res/drawable/qc_toggle_background.xml
@@ -16,14 +16,13 @@ --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background" - android:width="@dimen/qc_toggle_size" - android:height="@dimen/qc_toggle_size"> - <shape android:shape="rectangle"> - <solid android:color="@color/qc_toggle_background_color" /> - <corners android:radius="@dimen/qc_toggle_background_radius" /> - </shape> + android:width="@dimen/qc_toggle_size" + android:height="@dimen/qc_toggle_size" + android:start="@dimen/qc_toggle_background_padding" + android:top="@dimen/qc_toggle_background_padding" + android:drawable="@drawable/qc_toggle_button_background"> </item> - <item android:width="@dimen/qc_toggle_size" - android:height="@dimen/qc_toggle_size" - android:drawable="@drawable/qc_toggle_rotary_background"/> + <item android:width="@dimen/qc_toggle_rotary_highlight_size" + android:height="@dimen/qc_toggle_rotary_highlight_size" + android:drawable="@drawable/qc_toggle_rotary_background"/> </layer-list> \ No newline at end of file
diff --git a/car-qc-lib/res/drawable/qc_toggle_rotary_background.xml b/car-qc-lib/res/drawable/qc_toggle_rotary_background.xml index 406c44c..c0eb106 100644 --- a/car-qc-lib/res/drawable/qc_toggle_rotary_background.xml +++ b/car-qc-lib/res/drawable/qc_toggle_rotary_background.xml
@@ -14,21 +14,15 @@ ~ 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_focused="true" android:state_pressed="true"> - <shape android:shape="rectangle"> - <solid android:color="@color/car_ui_rotary_focus_pressed_fill_secondary_color"/> - <stroke android:width="@dimen/car_ui_rotary_focus_pressed_stroke_width" - android:color="@color/car_ui_rotary_focus_pressed_stroke_secondary_color"/> - <corners android:radius="@dimen/qc_toggle_rotary_background_radius" /> - </shape> +<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> + <item + android:width="@dimen/qc_toggle_rotary_shadow_size" + android:height="@dimen/qc_toggle_rotary_shadow_size" + android:start="@dimen/qc_toggle_rotary_shadow_padding" + android:top="@dimen/qc_toggle_rotary_shadow_padding" + android:drawable="@drawable/qc_toggle_rotary_shadow"> </item> - <item android:state_focused="true"> - <shape android:shape="rectangle"> - <solid android:color="@color/car_ui_rotary_focus_fill_secondary_color"/> - <stroke android:width="@dimen/car_ui_rotary_focus_stroke_width" - android:color="@color/car_ui_rotary_focus_stroke_secondary_color"/> - <corners android:radius="@dimen/qc_toggle_rotary_background_radius" /> - </shape> - </item> -</selector> \ No newline at end of file + <item android:width="@dimen/qc_toggle_rotary_highlight_size" + android:height="@dimen/qc_toggle_rotary_highlight_size" + android:drawable="@drawable/qc_toggle_rotary_highlight"/> +</layer-list> \ No newline at end of file
diff --git a/car-qc-lib/res/drawable/qc_toggle_rotary_highlight.xml b/car-qc-lib/res/drawable/qc_toggle_rotary_highlight.xml new file mode 100644 index 0000000..5894a8f --- /dev/null +++ b/car-qc-lib/res/drawable/qc_toggle_rotary_highlight.xml
@@ -0,0 +1,34 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + ~ Copyright (C) 2021 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. + --> +<selector xmlns:android="http://schemas.android.com/apk/res/android"> + <item android:state_focused="true" android:state_pressed="true"> + <shape android:shape="rectangle"> + <solid android:color="@color/car_ui_rotary_focus_pressed_fill_secondary_color"/> + <stroke android:width="@dimen/car_ui_rotary_focus_pressed_stroke_width" + android:color="@color/car_ui_rotary_focus_stroke_color"/> + <corners android:radius="@dimen/qc_toggle_rotary_highlight_radius" /> + </shape> + </item> + <item android:state_focused="true"> + <shape android:shape="rectangle"> + <solid android:color="@color/car_ui_rotary_focus_fill_color"/> + <stroke android:width="@dimen/car_ui_rotary_focus_stroke_width" + android:color="@color/car_ui_rotary_focus_stroke_color"/> + <corners android:radius="@dimen/qc_toggle_rotary_highlight_radius" /> + </shape> + </item> +</selector> \ No newline at end of file
diff --git a/car-qc-lib/res/drawable/qc_toggle_rotary_shadow.xml b/car-qc-lib/res/drawable/qc_toggle_rotary_shadow.xml new file mode 100644 index 0000000..2717321 --- /dev/null +++ b/car-qc-lib/res/drawable/qc_toggle_rotary_shadow.xml
@@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + ~ 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. + --> +<selector xmlns:android="http://schemas.android.com/apk/res/android"> + <item android:state_focused="true" android:state_pressed="false"> + <shape android:shape="rectangle"> + <stroke android:width="@dimen/qc_toggle_rotary_shadow_width" + android:color="@color/qc_toggle_rotary_shadow_color"/> + <corners android:radius="@dimen/qc_toggle_rotary_shadow_radius" /> + </shape> + </item> +</selector> \ No newline at end of file
diff --git a/car-qc-lib/res/drawable/qc_toggle_unavailable_background.xml b/car-qc-lib/res/drawable/qc_toggle_unavailable_background.xml index 98cbded..e9f2e12 100644 --- a/car-qc-lib/res/drawable/qc_toggle_unavailable_background.xml +++ b/car-qc-lib/res/drawable/qc_toggle_unavailable_background.xml
@@ -16,16 +16,18 @@ --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background" - android:width="@dimen/qc_toggle_size" - android:height="@dimen/qc_toggle_size"> + android:width="@dimen/qc_toggle_size" + android:height="@dimen/qc_toggle_size" + android:start="@dimen/qc_toggle_background_padding" + android:top="@dimen/qc_toggle_background_padding"> <shape android:shape="rectangle"> <solid android:color="@color/qc_toggle_unavailable_background_color" /> <stroke android:color="@color/qc_toggle_unavailable_color" - android:width="@dimen/qc_toggle_unavailable_outline_width" /> + android:width="@dimen/qc_toggle_unavailable_outline_width" /> <corners android:radius="@dimen/qc_toggle_background_radius" /> </shape> </item> - <item android:width="@dimen/qc_toggle_size" - android:height="@dimen/qc_toggle_size" - android:drawable="@drawable/qc_toggle_rotary_background"/> -</layer-list> + <item android:width="@dimen/qc_toggle_rotary_highlight_size" + android:height="@dimen/qc_toggle_rotary_highlight_size" + android:drawable="@drawable/qc_toggle_rotary_background"/> +</layer-list> \ No newline at end of file
diff --git a/car-qc-lib/res/values/colors.xml b/car-qc-lib/res/values/colors.xml index e3fbd6f..62bcfdc 100644 --- a/car-qc-lib/res/values/colors.xml +++ b/car-qc-lib/res/values/colors.xml
@@ -18,5 +18,6 @@ <color name="qc_start_icon_color">@android:color/white</color> <color name="qc_toggle_off_background_color">#626262</color> <color name="qc_toggle_unavailable_background_color">@android:color/transparent</color> - <color name="qc_toggle_unavailable_color">#75FFFFFF</color> + <color name="qc_toggle_unavailable_color">#37FFFFFF</color> + <color name="qc_toggle_rotary_shadow_color">#C7000000</color> </resources> \ No newline at end of file
diff --git a/car-qc-lib/res/values/dimens.xml b/car-qc-lib/res/values/dimens.xml index 6247561..b973774 100644 --- a/car-qc-lib/res/values/dimens.xml +++ b/car-qc-lib/res/values/dimens.xml
@@ -26,10 +26,18 @@ <dimen name="qc_action_items_horizontal_margin">32dp</dimen> <dimen name="qc_toggle_size">72dp</dimen> <dimen name="qc_toggle_margin">12dp</dimen> + <dimen name="qc_row_horizontal_margin">16dp</dimen> <dimen name="qc_toggle_background_radius">16dp</dimen> - <dimen name="qc_toggle_rotary_background_radius">11dp</dimen> - <dimen name="qc_toggle_foreground_icon_inset">14dp</dimen> + <dimen name="qc_toggle_background_padding">4dp</dimen> + <dimen name="qc_toggle_foreground_icon_inset">18dp</dimen> <dimen name="qc_toggle_unavailable_outline_width">2dp</dimen> + <dimen name="qc_toggle_rotary_highlight_size">80dp</dimen> + <dimen name="qc_toggle_rotary_highlight_radius">20dp</dimen> + <dimen name="qc_toggle_rotary_shadow_size">64dp</dimen> + <dimen name="qc_toggle_rotary_shadow_width">4dp</dimen> + <dimen name="qc_toggle_rotary_shadow_radius">16dp</dimen> + <dimen name="qc_toggle_rotary_shadow_padding">8dp</dimen> + <dimen name="qc_seekbar_padding_top">16dp</dimen> </resources> \ No newline at end of file