summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
author Cassy Chun-Crogan <cassycc@google.com> 2025-03-20 04:18:27 +0000
committer Cassy Chun-Crogan <cassycc@google.com> 2025-03-20 20:40:23 +0000
commitb7e3e6e63350447a71053435b6c1ed82d07ca0b3 (patch)
tree03d424bd84190988df77f6a45b92806638d9ffbf
parentb00d0c7f4762f5babb84da63afc4eaa0639c8370 (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
-rw-r--r--res/flag(com.android.documentsui.flags.use_material3)/color/grid_item_ripple_color.xml28
-rw-r--r--res/flag(com.android.documentsui.flags.use_material3)/drawable/grid_item_mask.xml21
-rw-r--r--res/flag(com.android.documentsui.flags.use_material3)/drawable/grid_nameplate_background.xml214
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