Add focus ring to widgets header
Change the widgets header drawable to be a selector with the
state_focused property in addition to the state_expanded property. The
focused items are drawn with a focus ring with no ripple, while the
unfocused items have a ripple.
Bug: 365120324
Test: focus traversal through left widget picker pane
Flag: EXEMPT bug fix
Change-Id: I710cb9e2d727a061e0c19df15526e8c832f6366b
diff --git a/res/drawable/bg_widgets_header_states_two_pane.xml b/res/drawable/bg_widgets_header_states_two_pane.xml
index 5f4b8c6..1ec41a9 100644
--- a/res/drawable/bg_widgets_header_states_two_pane.xml
+++ b/res/drawable/bg_widgets_header_states_two_pane.xml
@@ -14,18 +14,16 @@
limitations under the License.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
-
- <item android:state_expanded="true">
- <shape android:shape="rectangle">
- <solid android:color="?attr/widgetPickerHeaderBackgroundColor" />
- <corners android:radius="@dimen/widget_list_top_bottom_corner_radius" />
- </shape>
+ <item android:state_expanded="true" android:state_focused="false">
+ <ripple android:color="@color/accent_ripple_color">
+ <item android:drawable="@drawable/bg_widgets_header_two_pane_expanded_unfocused" />
+ </ripple>
</item>
-
- <item android:state_expanded="false">
- <shape android:shape="rectangle">
- <solid android:color="@android:color/transparent" />
- <corners android:radius="@dimen/widget_list_top_bottom_corner_radius" />
- </shape>
+ <item android:state_expanded="false" android:state_focused="false">
+ <ripple android:color="@color/accent_ripple_color">
+ <item android:drawable="@drawable/bg_widgets_header_two_pane_unexpanded_unfocused" />
+ </ripple>
</item>
+ <item android:drawable="@drawable/bg_widgets_header_two_pane_expanded_focused" android:state_expanded="true" android:state_focused="true" />
+ <item android:drawable="@drawable/bg_widgets_header_two_pane_unexpanded_focused" android:state_expanded="false" android:state_focused="true" />
</selector>
diff --git a/res/drawable/bg_widgets_header_two_pane.xml b/res/drawable/bg_widgets_header_two_pane.xml
index ca3feef..e237002 100644
--- a/res/drawable/bg_widgets_header_two_pane.xml
+++ b/res/drawable/bg_widgets_header_two_pane.xml
@@ -14,13 +14,10 @@
limitations under the License.
-->
<inset xmlns:android="http://schemas.android.com/apk/res/android"
- android:insetTop="@dimen/widget_list_entry_spacing" >
- <ripple
- android:color="@color/accent_ripple_color"
- android:paddingTop="@dimen/widget_list_header_view_vertical_padding"
- android:paddingBottom="@dimen/widget_list_header_view_vertical_padding" >
- <item android:id="@android:id/mask"
- android:drawable="@drawable/bg_widgets_header_states_two_pane" />
+ android:insetTop="@dimen/widget_list_entry_spacing">
+ <layer-list
+ android:paddingBottom="@dimen/widget_list_header_view_vertical_padding"
+ android:paddingTop="@dimen/widget_list_header_view_vertical_padding">
<item android:drawable="@drawable/bg_widgets_header_states_two_pane" />
- </ripple>
-</inset>
+ </layer-list>
+</inset>
\ No newline at end of file
diff --git a/res/drawable/bg_widgets_header_two_pane_expanded_focused.xml b/res/drawable/bg_widgets_header_two_pane_expanded_focused.xml
new file mode 100644
index 0000000..0ee3d14
--- /dev/null
+++ b/res/drawable/bg_widgets_header_two_pane_expanded_focused.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+ ~ Copyright (C) 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
+ ~
+ ~ 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.
+ -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+ <!-- Draw the focus ring -->
+ <item>
+ <shape>
+ <corners android:radius="@dimen/widget_focus_ring_corner_radius" />
+ <stroke
+ android:width="@dimen/widget_header_focus_ring_width"
+ android:color="?attr/widgetPickerTabBackgroundSelected" />
+ </shape>
+ </item>
+
+ <!-- Draw the background with padding to make it spaced within the focus ring. -->
+ <item
+ android:bottom="@dimen/widget_header_background_border"
+ android:end="@dimen/widget_header_background_border"
+ android:start="@dimen/widget_header_background_border"
+ android:top="@dimen/widget_header_background_border">
+ <shape android:shape="rectangle">
+ <corners android:radius="@dimen/widget_list_top_bottom_corner_radius" />
+ <solid android:color="?attr/widgetPickerHeaderBackgroundColor" />
+ </shape>
+ </item>
+</layer-list>
\ No newline at end of file
diff --git a/res/drawable/bg_widgets_header_two_pane_expanded_unfocused.xml b/res/drawable/bg_widgets_header_two_pane_expanded_unfocused.xml
new file mode 100644
index 0000000..9028ebe
--- /dev/null
+++ b/res/drawable/bg_widgets_header_two_pane_expanded_unfocused.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+ ~ Copyright (C) 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
+ ~
+ ~ 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.
+ -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
+ android:paddingBottom="@dimen/widget_list_header_view_vertical_padding"
+ android:paddingTop="@dimen/widget_list_header_view_vertical_padding">
+ <item>
+ <shape android:shape="rectangle">
+ <corners android:radius="@dimen/widget_list_top_bottom_corner_radius" />
+ <solid android:color="?attr/widgetPickerHeaderBackgroundColor" />
+ </shape>
+ </item>
+</layer-list>
\ No newline at end of file
diff --git a/res/drawable/bg_widgets_header_two_pane_unexpanded_focused.xml b/res/drawable/bg_widgets_header_two_pane_unexpanded_focused.xml
new file mode 100644
index 0000000..12dc907
--- /dev/null
+++ b/res/drawable/bg_widgets_header_two_pane_unexpanded_focused.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+ ~ Copyright (C) 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
+ ~
+ ~ 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.
+ -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+ <!-- Draw the focus ring and a transparent background -->
+ <item>
+ <shape>
+ <corners android:radius="@dimen/widget_focus_ring_corner_radius" />
+ <solid android:color="@android:color/transparent" />
+ <stroke
+ android:width="@dimen/widget_header_focus_ring_width"
+ android:color="?attr/widgetPickerTabBackgroundSelected" />
+ </shape>
+ </item>
+</layer-list>
\ No newline at end of file
diff --git a/res/drawable/bg_widgets_header_two_pane_unexpanded_unfocused.xml b/res/drawable/bg_widgets_header_two_pane_unexpanded_unfocused.xml
new file mode 100644
index 0000000..ba26f9f
--- /dev/null
+++ b/res/drawable/bg_widgets_header_two_pane_unexpanded_unfocused.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+ ~ Copyright (C) 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
+ ~
+ ~ 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.
+ -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+ <item>
+ <shape android:shape="rectangle">
+ <corners android:radius="@dimen/widget_list_top_bottom_corner_radius" />
+ <solid android:color="@android:color/transparent" />
+ </shape>
+ </item>
+</layer-list>
\ No newline at end of file
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 037687d..c225cd5 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -225,6 +225,10 @@
<!-- Bottom margin for the search and recommended widgets container with work profile -->
<dimen name="search_and_recommended_widgets_container_small_bottom_margin">10dp</dimen>
+ <dimen name="widget_header_focus_ring_width">3dp</dimen>
+ <dimen name="widget_focus_ring_corner_radius">28dp</dimen>
+ <dimen name="widget_header_background_border">5dp</dimen>
+
<dimen name="widget_list_top_bottom_corner_radius">28dp</dimen>
<dimen name="widget_list_content_corner_radius">4dp</dimen>