diff options
4 files changed, 312 insertions, 246 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 diff --git a/res/flag(com.android.documentsui.flags.use_material3)/layout/item_doc_grid.xml b/res/flag(com.android.documentsui.flags.use_material3)/layout/item_doc_grid.xml index 7d40f794b..a8e3148b4 100644 --- a/res/flag(com.android.documentsui.flags.use_material3)/layout/item_doc_grid.xml +++ b/res/flag(com.android.documentsui.flags.use_material3)/layout/item_doc_grid.xml @@ -13,163 +13,170 @@ See the License for the specific language governing permissions and limitations under the License. --> - -<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" +<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/item_root" - android:layout_width="@dimen/grid_width" - android:layout_height="@dimen/grid_height" - android:layout_margin="@dimen/grid_item_margin" + android:layout_width="match_parent" + android:layout_height="wrap_content" android:clickable="true" android:defaultFocusHighlightEnabled="false" - android:focusable="true" - android:paddingEnd="@dimen/grid_item_padding_end" - android:paddingStart="@dimen/grid_item_padding_start" - android:paddingTop="@dimen/grid_item_padding_top"> - -<!-- Main item thumbnail. Comprised of two overlapping images, the - visibility of which is controlled by code in - DirectoryFragment.java. --> - - <FrameLayout - android:id="@+id/thumbnail" - android:layout_width="@dimen/grid_item_thumbnail_width" - android:layout_height="@dimen/grid_item_thumbnail_height" - android:layout_centerHorizontal="true" - android:background="@drawable/grid_thumbnail_background"> - - <!-- stroke width will be controlled dynamically in the code. --> - <com.google.android.material.card.MaterialCardView - android:id="@+id/icon_wrapper" - android:layout_width="@dimen/grid_item_icon_width" - android:layout_height="@dimen/grid_item_icon_height" - android:layout_gravity="center" - app:cardBackgroundColor="?attr/colorSurfaceContainerLowest" - app:cardElevation="0dp" - app:strokeColor="?attr/colorSecondaryContainer" - app:strokeWidth="0dp"> - - <com.android.documentsui.GridItemThumbnail - android:id="@+id/icon_thumb" - android:layout_width="match_parent" - android:layout_height="match_parent" - android:contentDescription="@null" - android:scaleType="centerCrop" - android:tint="?attr/gridItemTint" - android:tintMode="src_over" /> - - <com.android.documentsui.GridItemThumbnail - android:id="@+id/icon_mime_lg" - android:layout_width="@dimen/icon_size" - android:layout_height="@dimen/icon_size" + android:focusable="true"> + + <RelativeLayout + android:layout_width="@dimen/grid_width" + android:layout_height="@dimen/grid_height" + android:layout_margin="@dimen/grid_item_margin" + android:layout_gravity="center_horizontal" + android:paddingEnd="@dimen/grid_item_padding_end" + android:paddingStart="@dimen/grid_item_padding_start" + android:paddingTop="@dimen/grid_item_padding_top" + android:duplicateParentState="true"> + + <!-- Main item thumbnail. Comprised of two overlapping images, the + visibility of which is controlled by code in + DirectoryFragment.java. --> + + <FrameLayout + android:id="@+id/thumbnail" + android:layout_width="@dimen/grid_item_thumbnail_width" + android:layout_height="@dimen/grid_item_thumbnail_height" + android:layout_centerHorizontal="true" + android:background="@drawable/grid_thumbnail_background"> + + <!-- stroke width will be controlled dynamically in the code. --> + <com.google.android.material.card.MaterialCardView + android:id="@+id/icon_wrapper" + android:layout_width="@dimen/grid_item_icon_width" + android:layout_height="@dimen/grid_item_icon_height" android:layout_gravity="center" - android:contentDescription="@null" - android:scaleType="fitCenter" /> - - </com.google.android.material.card.MaterialCardView> - - </FrameLayout> - - <FrameLayout - android:id="@+id/preview_icon" - android:layout_width="@dimen/button_touch_size" - android:layout_height="@dimen/button_touch_size" - android:layout_alignParentEnd="true" - android:layout_alignParentTop="true" - android:clickable="true" - android:focusable="true" - android:pointerIcon="hand"> - - <ImageView - android:layout_width="@dimen/zoom_icon_size" - android:layout_height="@dimen/zoom_icon_size" - android:layout_gravity="center" - android:background="@drawable/circle_button_background" - android:padding="2dp" - android:scaleType="fitCenter" - android:src="@drawable/ic_zoom_out" /> - - </FrameLayout> - - <!-- Item nameplate. Has some text fields (title, size, mod-time, etc). --> - - <LinearLayout - android:id="@+id/nameplate" - android:layout_width="@dimen/grid_item_nameplate_width" - android:layout_height="@dimen/grid_item_nameplate_height" - android:layout_below="@id/thumbnail" - android:layout_marginTop="@dimen/grid_item_nameplate_marginTop" - android:background="@drawable/grid_nameplate_background" - android:orientation="vertical" - android:duplicateParentState="true" - android:padding="@dimen/grid_item_nameplate_padding"> - - <!-- Top row. --> - <LinearLayout - android:layout_width="match_parent" - android:layout_height="wrap_content" - android:gravity="center" - android:orientation="horizontal"> + app:cardBackgroundColor="?attr/colorSurfaceContainerLowest" + app:cardElevation="0dp" + app:strokeColor="?attr/colorSecondaryContainer" + app:strokeWidth="0dp"> + + <com.android.documentsui.GridItemThumbnail + android:id="@+id/icon_thumb" + android:layout_width="match_parent" + android:layout_height="match_parent" + android:contentDescription="@null" + android:scaleType="centerCrop" + android:tint="?attr/gridItemTint" + android:tintMode="src_over" /> + + <com.android.documentsui.GridItemThumbnail + android:id="@+id/icon_mime_lg" + android:layout_width="@dimen/icon_size" + android:layout_height="@dimen/icon_size" + android:layout_gravity="center" + android:contentDescription="@null" + android:scaleType="fitCenter" /> + + </com.google.android.material.card.MaterialCardView> + + </FrameLayout> + + <FrameLayout + android:id="@+id/preview_icon" + android:layout_width="@dimen/button_touch_size" + android:layout_height="@dimen/button_touch_size" + android:layout_alignParentEnd="true" + android:layout_alignParentTop="true" + android:clickable="true" + android:focusable="true" + android:pointerIcon="hand"> <ImageView - android:id="@+id/icon_profile_badge" - android:layout_width="@dimen/briefcase_icon_size" - android:layout_height="@dimen/briefcase_icon_size" - android:layout_marginEnd="@dimen/briefcase_icon_margin" - android:contentDescription="@string/a11y_work" - android:gravity="center_vertical" - android:src="@drawable/ic_briefcase" - android:tint="?android:attr/colorAccent" /> - - <TextView - android:id="@android:id/title" - android:layout_width="wrap_content" - android:layout_height="wrap_content" - android:ellipsize="end" - android:singleLine="true" - android:textAlignment="center" - android:textAppearance="@style/FileItemLabelText" /> + android:layout_width="@dimen/zoom_icon_size" + android:layout_height="@dimen/zoom_icon_size" + android:layout_gravity="center" + android:background="@drawable/circle_button_background" + android:padding="2dp" + android:scaleType="fitCenter" + android:src="@drawable/ic_zoom_out" /> - </LinearLayout> + </FrameLayout> + + <!-- Item nameplate. Has some text fields (title, size, mod-time, etc). --> - <!-- Bottom row. --> <LinearLayout - android:layout_width="match_parent" - android:layout_height="wrap_content" - android:gravity="center" - android:orientation="horizontal"> - - <TextView - android:id="@+id/details" - android:layout_width="wrap_content" - android:layout_height="wrap_content" - android:layout_marginEnd="4dp" - android:ellipsize="end" - android:singleLine="true" - android:textAlignment="viewStart" - android:textAppearance="@style/ItemCaptionText" /> - - <TextView - android:id="@+id/bullet" - android:layout_width="wrap_content" + android:id="@+id/nameplate" + android:layout_width="@dimen/grid_item_nameplate_width" + android:layout_height="@dimen/grid_item_nameplate_height" + android:layout_below="@id/thumbnail" + android:layout_marginTop="@dimen/grid_item_nameplate_marginTop" + android:background="@drawable/grid_nameplate_background" + android:orientation="vertical" + android:duplicateParentState="true" + android:padding="@dimen/grid_item_nameplate_padding"> + + <!-- Top row. --> + <LinearLayout + android:layout_width="match_parent" android:layout_height="wrap_content" - android:layout_marginEnd="4dp" - android:singleLine="true" - android:text="@string/bullet" - android:textAlignment="viewStart" - android:textAppearance="@style/ItemCaptionText" /> - - <TextView - android:id="@+id/date" - android:layout_width="wrap_content" + android:gravity="center" + android:orientation="horizontal"> + + <ImageView + android:id="@+id/icon_profile_badge" + android:layout_width="@dimen/briefcase_icon_size" + android:layout_height="@dimen/briefcase_icon_size" + android:layout_marginEnd="@dimen/briefcase_icon_margin" + android:contentDescription="@string/a11y_work" + android:gravity="center_vertical" + android:src="@drawable/ic_briefcase" + android:tint="?android:attr/colorAccent" /> + + <TextView + android:id="@android:id/title" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:ellipsize="end" + android:singleLine="true" + android:textAlignment="center" + android:textAppearance="@style/FileItemLabelText" /> + + </LinearLayout> + + <!-- Bottom row. --> + <LinearLayout + android:layout_width="match_parent" android:layout_height="wrap_content" - android:ellipsize="end" - android:singleLine="true" - android:textAlignment="viewStart" - android:textAppearance="@style/ItemCaptionText" /> + android:gravity="center" + android:orientation="horizontal"> + + <TextView + android:id="@+id/details" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:layout_marginEnd="4dp" + android:ellipsize="end" + android:singleLine="true" + android:textAlignment="viewStart" + android:textAppearance="@style/ItemCaptionText" /> + + <TextView + android:id="@+id/bullet" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:layout_marginEnd="4dp" + android:singleLine="true" + android:text="@string/bullet" + android:textAlignment="viewStart" + android:textAppearance="@style/ItemCaptionText" /> + + <TextView + android:id="@+id/date" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:ellipsize="end" + android:singleLine="true" + android:textAlignment="viewStart" + android:textAppearance="@style/ItemCaptionText" /> + + </LinearLayout> </LinearLayout> - </LinearLayout> + </RelativeLayout> -</RelativeLayout>
\ No newline at end of file +</FrameLayout>
\ No newline at end of file |