Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 4a211f48 authored by Cassy Chun-Crogan's avatar Cassy Chun-Crogan
Browse files

[DocsUI M3] Add selection icons for grid items 

Add a selection circle that when tapped selects the item and displays
a check mark. The selection circle is now the selection region.

This also preserves the logic of not having a selection region for
folders in picker mode.

If the user selects the item another way, the check will be shown as
well.

The touch target for the selection circle is 34x34 but the visible
circle is smaller, defined by selection_circle.xml.

See bug for demo.

Bug: 407853191
Test: m DocumentsUIGoogle && manual inspection
Flag: com.android.documentsui.flags.use_material3
Change-Id: Ib44fd8a0c5780206c1d3cc11ea2799f91f0eebb9
parent f52cc8e9

res/flag(com.android.documentsui.flags.use_material3)/drawable/ic_check_circle.xml

+3 −3
Original line number Diff line number Diff line
@@ -14,12 +14,12 @@ Copyright (C) 2024 The Android Open Source Project 
    limitations under the License.

-->

<vector xmlns:android="http://schemas.android.com/apk/res/android"

    android:width="20dp"

    android:height="20dp"

    android:width="@dimen/icon_check_circle_size"

    android:height="@dimen/icon_check_circle_size"

    android:viewportWidth="960"

    android:viewportHeight="960">

    <path

        android:fillColor="?attr/colorOnPrimaryContainer"

        android:fillColor="?attr/colorPrimary"

        android:pathData="M428.28,628.78L669.87,388.2L612.41,330.5L428.28,513.63L346.15,432.5L288.7,490.2L428.28,628.78ZM480,872.13Q399.09,872.13 327.66,841.51Q256.22,810.89 202.66,757.34Q149.11,703.78 118.49,632.34Q87.87,560.91 87.87,480Q87.87,398.09 118.49,327.16Q149.11,256.22 202.66,202.66Q256.22,149.11 327.66,118.49Q399.09,87.87 480,87.87Q561.91,87.87 632.84,118.49Q703.78,149.11 757.34,202.66Q810.89,256.22 841.51,327.16Q872.13,398.09 872.13,480Q872.13,560.91 841.51,632.34Q810.89,703.78 757.34,757.34Q703.78,810.89 632.84,841.51Q561.91,872.13 480,872.13Z"/>

</vector>

res/flag(com.android.documentsui.flags.use_material3)/drawable/icon_check_background.xml

0 → 100644
+27 −0
Original line number Diff line number Diff line 
<?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.

-->

<!-- Draw a colorPrimary circle with a stroke that matches the width and colour of the thumbnail

border (grid_item_thumbnail_width - grid_item_icon_width). The colorPrimary circle is necessary as

the check icon has a checked-size hole which needs to appear colorPrimary. Since this icon is only

shown on a selected state on non-PC devices, we do not need to handle non-selected states and we

don't need to handle more complex PC states such as focused+hovered+selected.-->

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="oval">

    <solid android:color="?attr/colorOnPrimary" />

    <stroke

        android:width="@dimen/icon_check_stroke_size"

        android:color="?attr/colorPrimaryContainer" />

</shape>
 
 No newline at end of file

res/flag(com.android.documentsui.flags.use_material3)/drawable/selection_circle.xml

0 → 100644
+46 −0
Original line number Diff line number Diff line 
<?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.

-->

<!-- Draw a 20% black circle with essentially 2 strokes, the inner stroke is white and 2dp wide, the

     outer stroke is 20% black and 1dp wide. To achieve this draw a bigger circle to be the outer

     stroke, then draw the inner circle on top that contains both the circle and the inner stroke.

     -->

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- The outer 1dp 20% black stroke. -->

    <item android:bottom="@dimen/selection_outer_circle_padding"

        android:left="@dimen/selection_outer_circle_padding"

        android:right="@dimen/selection_outer_circle_padding"

        android:top="@dimen/selection_outer_circle_padding">

        <shape android:shape="oval">

            <solid android:color="@android:color/transparent" />

            <stroke

                android:width="@dimen/selection_outer_stroke_size"

                android:color="@color/selection_circle_black" />

        </shape>

    </item>

    <!-- The inner 2 dp white stroke on a 20% black circle. -->

    <item

        android:bottom="@dimen/selection_inner_circle_padding"

        android:left="@dimen/selection_inner_circle_padding"

        android:right="@dimen/selection_inner_circle_padding"

        android:top="@dimen/selection_inner_circle_padding">

        <shape android:shape="oval">

            <solid android:color="@color/selection_circle_black"/>

            <stroke

                android:width="@dimen/selection_inner_stroke_size"

                android:color="@android:color/white" />

        </shape>

    </item>

</layer-list>
 
 No newline at end of file

res/flag(com.android.documentsui.flags.use_material3)/layout/item_doc_grid.xml

+23 −0
Original line number Diff line number Diff line
@@ -61,6 +61,29 @@ 


        </com.google.android.material.card.MaterialCardView>



        <ImageView

            android:id="@+id/selection_circle"

            android:layout_width="@dimen/button_container_size"

            android:layout_height="@dimen/button_container_size"

            android:layout_marginStart="@dimen/selection_circle_margin"

            android:layout_marginTop="@dimen/selection_circle_margin"

            android:layout_gravity="top|start"

            android:background="@drawable/selection_circle"

            android:contentDescription="@null"

            android:elevation="0dp"

            android:scaleType="center" />



        <ImageView

            android:id="@+id/icon_check"

            android:layout_width="@dimen/button_container_size"

            android:layout_height="@dimen/button_container_size"

            android:layout_gravity="top|start"

            android:alpha="0"

            android:background="@drawable/icon_check_background"

            android:contentDescription="@null"

            android:duplicateParentState="true"

            android:scaleType="center"

            android:src="@drawable/ic_check_circle" />

    </FrameLayout>



    <FrameLayout

res/flag(com.android.documentsui.flags.use_material3)/values/colors.xml

+3 −0
Original line number Diff line number Diff line
@@ -103,6 +103,9 @@ 
   -->

  <color name="overlay_hover_color_percentage">#14000000</color> <!-- 8% -->



  <!-- 20% black -->

  <color name="selection_circle_black">#33000000</color>



  <!-- Peek -->

  <!-- Scrim for the overlay. Static color, 80% opacity in black, defined specifically for Peek. -->

  <color name="peek_overlay_scrim">#CC000000</color>