diff options
author | 2025-03-20 04:18:27 +0000 | |
---|---|---|
committer | 2025-03-20 20:40:23 +0000 | |
commit | b7e3e6e63350447a71053435b6c1ed82d07ca0b3 (patch) | |
tree | 03d424bd84190988df77f6a45b92806638d9ffbf | |
parent | b00d0c7f4762f5babb84da63afc4eaa0639c8370 (diff) |
[DocsUI M3] Uplift ripple for grid items
See bug for attached demo.
Bug: 404992153
Test: m DocumentsUIGoogle && manual inspection
Flag: com.android.documentsui.flags.use_material3
Change-Id: Id7dbf1186b6828824c44f36b77f39e703ca8a15a
3 files changed, 161 insertions, 102 deletions
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/color/grid_item_ripple_color.xml b/res/flag(com.android.documentsui.flags.use_material3)/color/grid_item_ripple_color.xml new file mode 100644 index 000000000..85e5b46ce --- /dev/null +++ b/res/flag(com.android.documentsui.flags.use_material3)/color/grid_item_ripple_color.xml @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + ~ Copyright (C) 2025 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_enabled="false" android:color="@android:color/transparent" /> + <!-- By default <ripple> introduces a gray-ish layer for the focused state which we don't + want, hence explicitly setting focused ripple color to transparent to get rid of that. + --> + <item android:state_focused="true" android:color="@android:color/transparent" /> + <item android:state_selected="true" android:alpha="@dimen/ripple_overlay_alpha" + android:color="?attr/colorOnPrimaryContainer" /> + <item android:alpha="@dimen/ripple_overlay_alpha" + android:color="?attr/colorOnSurface" /> +</selector> diff --git a/res/flag(com.android.documentsui.flags.use_material3)/drawable/grid_item_mask.xml b/res/flag(com.android.documentsui.flags.use_material3)/drawable/grid_item_mask.xml new file mode 100644 index 000000000..98473059c --- /dev/null +++ b/res/flag(com.android.documentsui.flags.use_material3)/drawable/grid_item_mask.xml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Copyright (C) 2025 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"> + <corners android:radius="@dimen/grid_item_nameplate_radius" /> + <!-- The color here doesn't matter, it's just being used as a mask. --> + <solid android:color="@android:color/white" /> +</shape>
\ No newline at end of file diff --git a/res/flag(com.android.documentsui.flags.use_material3)/drawable/grid_nameplate_background.xml b/res/flag(com.android.documentsui.flags.use_material3)/drawable/grid_nameplate_background.xml index 502efaede..087fc1c15 100644 --- a/res/flag(com.android.documentsui.flags.use_material3)/drawable/grid_nameplate_background.xml +++ b/res/flag(com.android.documentsui.flags.use_material3)/drawable/grid_nameplate_background.xml @@ -14,56 +14,124 @@ limitations under the License. --> -<selector xmlns:android="http://schemas.android.com/apk/res/android"> - <!-- selected --> - <item - android:state_focused="true" - android:state_hovered="true" - android:state_selected="true"> - <layer-list> +<ripple xmlns:android="http://schemas.android.com/apk/res/android" + android:color="@color/grid_item_ripple_color"> + + <!-- 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/grid_item_mask"/> + + <item> + <selector> + <!-- selected --> <item - android:bottom="@dimen/focus_ring_gap" - android:left="@dimen/focus_ring_gap" - android:right="@dimen/focus_ring_gap" - android:top="@dimen/focus_ring_gap"> - <shape> - <corners android:radius="@dimen/grid_item_nameplate_inner_radius" /> - <solid android:color="?attr/colorPrimaryContainer" /> - </shape> + android:state_focused="true" + android:state_hovered="true" + android:state_selected="true"> + <layer-list> + <item + android:bottom="@dimen/focus_ring_gap" + android:left="@dimen/focus_ring_gap" + android:right="@dimen/focus_ring_gap" + android:top="@dimen/focus_ring_gap"> + <shape> + <corners android:radius="@dimen/grid_item_nameplate_inner_radius" /> + <solid android:color="?attr/colorPrimaryContainer" /> + </shape> + </item> + <item + android:bottom="@dimen/focus_ring_gap" + android:left="@dimen/focus_ring_gap" + android:right="@dimen/focus_ring_gap" + android:top="@dimen/focus_ring_gap"> + <shape android:tint="?attr/colorOnPrimaryContainer"> + <corners android:radius="@dimen/grid_item_nameplate_inner_radius" /> + <solid android:color="@color/overlay_hover_color_percentage" /> + </shape> + </item> + <item> + <shape> + <corners android:radius="@dimen/grid_item_nameplate_radius" /> + <stroke + android:width="@dimen/focus_ring_width" + android:color="?attr/colorSecondary" /> + </shape> + </item> + </layer-list> + </item> + <item android:state_selected="true" android:state_focused="true"> + <layer-list> + <item + android:bottom="@dimen/focus_ring_gap" + android:left="@dimen/focus_ring_gap" + android:right="@dimen/focus_ring_gap" + android:top="@dimen/focus_ring_gap"> + <shape> + <corners android:radius="@dimen/grid_item_nameplate_inner_radius" /> + <solid android:color="?attr/colorPrimaryContainer" /> + </shape> + </item> + <item> + <shape> + <corners android:radius="@dimen/grid_item_nameplate_radius" /> + <stroke + android:width="@dimen/focus_ring_width" + android:color="?attr/colorSecondary" /> + </shape> + </item> + </layer-list> </item> <item - android:bottom="@dimen/focus_ring_gap" - android:left="@dimen/focus_ring_gap" - android:right="@dimen/focus_ring_gap" - android:top="@dimen/focus_ring_gap"> - <shape android:tint="?attr/colorOnPrimaryContainer"> - <corners android:radius="@dimen/grid_item_nameplate_inner_radius" /> - <solid android:color="@color/overlay_hover_color_percentage" /> - </shape> + android:state_hovered="true" + android:state_selected="true"> + <layer-list> + <item> + <shape> + <corners android:radius="@dimen/grid_item_nameplate_radius" /> + <solid android:color="?attr/colorPrimaryContainer" /> + </shape> + </item> + <item> + <shape android:tint="?attr/colorOnPrimaryContainer"> + <corners android:radius="@dimen/grid_item_nameplate_radius" /> + <solid android:color="@color/overlay_hover_color_percentage" /> + </shape> + </item> + </layer-list> </item> - <item> + <item android:state_selected="true"> <shape> <corners android:radius="@dimen/grid_item_nameplate_radius" /> - <stroke - android:width="@dimen/focus_ring_width" - android:color="?attr/colorSecondary" /> + <solid android:color="?attr/colorPrimaryContainer" /> </shape> </item> - </layer-list> - </item> - <item android:state_selected="true" android:state_focused="true"> - <layer-list> + + <!-- unselected --> <item - android:bottom="@dimen/focus_ring_gap" - android:left="@dimen/focus_ring_gap" - android:right="@dimen/focus_ring_gap" - android:top="@dimen/focus_ring_gap"> - <shape> - <corners android:radius="@dimen/grid_item_nameplate_inner_radius" /> - <solid android:color="?attr/colorPrimaryContainer" /> - </shape> + android:state_focused="true" + android:state_hovered="true"> + <layer-list> + <item + android:bottom="@dimen/focus_ring_gap" + android:left="@dimen/focus_ring_gap" + android:right="@dimen/focus_ring_gap" + android:top="@dimen/focus_ring_gap"> + <shape android:tint="?attr/colorOnSurface"> + <corners android:radius="@dimen/grid_item_nameplate_inner_radius" /> + <solid android:color="@color/overlay_hover_color_percentage" /> + </shape> + </item> + <item> + <shape> + <corners android:radius="@dimen/grid_item_nameplate_radius" /> + <stroke + android:width="@dimen/focus_ring_width" + android:color="?attr/colorSecondary" /> + </shape> + </item> + </layer-list> </item> - <item> + <item android:state_focused="true"> <shape> <corners android:radius="@dimen/grid_item_nameplate_radius" /> <stroke @@ -71,70 +139,12 @@ android:color="?attr/colorSecondary" /> </shape> </item> - </layer-list> - </item> - <item - android:state_hovered="true" - android:state_selected="true"> - <layer-list> - <item> - <shape> - <corners android:radius="@dimen/grid_item_nameplate_radius" /> - <solid android:color="?attr/colorPrimaryContainer" /> - </shape> - </item> - <item> - <shape android:tint="?attr/colorOnPrimaryContainer"> - <corners android:radius="@dimen/grid_item_nameplate_radius" /> - <solid android:color="@color/overlay_hover_color_percentage" /> - </shape> - </item> - </layer-list> - </item> - <item android:state_selected="true"> - <shape> - <corners android:radius="@dimen/grid_item_nameplate_radius" /> - <solid android:color="?attr/colorPrimaryContainer" /> - </shape> - </item> - - <!-- unselected --> - <item - android:state_focused="true" - android:state_hovered="true"> - <layer-list> - <item - android:bottom="@dimen/focus_ring_gap" - android:left="@dimen/focus_ring_gap" - android:right="@dimen/focus_ring_gap" - android:top="@dimen/focus_ring_gap"> + <item android:state_hovered="true"> <shape android:tint="?attr/colorOnSurface"> - <corners android:radius="@dimen/grid_item_nameplate_inner_radius" /> - <solid android:color="@color/overlay_hover_color_percentage" /> - </shape> - </item> - <item> - <shape> <corners android:radius="@dimen/grid_item_nameplate_radius" /> - <stroke - android:width="@dimen/focus_ring_width" - android:color="?attr/colorSecondary" /> + <solid android:color="@color/overlay_hover_color_percentage" /> </shape> </item> - </layer-list> - </item> - <item android:state_focused="true"> - <shape> - <corners android:radius="@dimen/grid_item_nameplate_radius" /> - <stroke - android:width="@dimen/focus_ring_width" - android:color="?attr/colorSecondary" /> - </shape> - </item> - <item android:state_hovered="true"> - <shape android:tint="?attr/colorOnSurface"> - <corners android:radius="@dimen/grid_item_nameplate_radius" /> - <solid android:color="@color/overlay_hover_color_percentage" /> - </shape> + </selector> </item> -</selector>
\ No newline at end of file +</ripple>
\ No newline at end of file |