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

Commit 1884c846 authored by Cassy Chun-Crogan's avatar Cassy Chun-Crogan
Browse files

[DocsUI M3] Uplift layout and colours for files in the grid 

Update the layout and colours of files in the grid to match the figma
spec. Simplify the layout by converting the unnecessary
MaterialCardViews to the simpler FrameLayouts.

Only the non-selected and selected state are handled. Future CLs will
implement focused, disabled, touch selected, etc.

See https://b.corp.google.com/issues/381962394#comment4 for before and
after screenshots.

Bug: 381962394
Test: m DocumentsUIGoogle && manual inspection
Flag: com.android.documentsui.flags.use_material3
Change-Id: Idac5968388ba37a559787e7db2230c10866a933f
parent f19c8fea

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

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

-->



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

    <!-- selected -->

    <item android:state_selected="true">

        <shape>

            <corners android:radius="@dimen/grid_item_nameplate_radius" />

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

        </shape>

    </item>

</selector>
 
 No newline at end of file

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

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

-->



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

    <!-- selected -->

    <item android:state_selected="true">

        <shape>

            <corners android:radius="@dimen/grid_item_thumbnail_radius" />

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

        </shape>

    </item>

</selector>
 
 No newline at end of file

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

+130 −156
Original line number Diff line number Diff line
@@ -14,37 +14,26 @@ 
     limitations under the License.

-->



<!-- FYI: This layout has an extra top level container view that was previously used

     to allow for the insertion of debug info. The debug info is now gone, but the

     container remains because there is a high likelihood of UI regression relating

     to focus and selection states, some of which are specific to keyboard

     when touch mode is not enable. So, if you, heroic engineer of the future,

     decide to rip these out, please be sure to check out focus and keyboards. -->

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

    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="match_parent"

    android:layout_height="wrap_content"

    android:layout_margin="4dp"

    android:foreground="?android:attr/selectableItemBackground"

    android:layout_width="@dimen/grid_item_width"

    android:layout_height="@dimen/grid_item_height"

    android:layout_margin="@dimen/grid_item_layout_margin"

    android:clickable="true"

    android:focusable="true"

    app:cardElevation="0dp">



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

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:elevation="0dp"

        android:duplicateParentState="true"

    app:cardBackgroundColor="@android:color/transparent"

    app:cardElevation="0dp"

        app:strokeWidth="1dp"

        app:strokeColor="?android:strokeColor">

    app:strokeWidth="0dp">



    <RelativeLayout

        android:id="@+id/grid_item_layout"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

            android:duplicateParentState="true">

        android:layout_marginStart="@dimen/grid_item_layout_marginStart"

        android:layout_marginEnd="@dimen/grid_item_layout_marginEnd"

        android:layout_marginTop="@dimen/grid_item_layout_marginTop">



        <!-- Main item thumbnail.  Comprised of two overlapping images, the

             visibility of which is controlled by code in
@@ -52,16 +41,28 @@ 


        <FrameLayout

            android:id="@+id/thumbnail"

                android:background="?attr/gridItemTint"

                android:layout_width="match_parent"

                android:layout_height="wrap_content">

            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="wrap_content"

                    android:scaleType="centerCrop"

                    android:layout_height="match_parent"

                    android:contentDescription="@null"

                    android:scaleType="centerCrop"

                    android:tint="?attr/gridItemTint"

                    android:tintMode="src_over" />
@@ -70,8 +71,10 @@ 
                    android:layout_width="@dimen/icon_size"

                    android:layout_height="@dimen/icon_size"

                    android:layout_gravity="center"

                    android:scaleType="fitCenter"

                    android:contentDescription="@null"/>

                    android:contentDescription="@null"

                    android:scaleType="fitCenter" />



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



        </FrameLayout>
@@ -79,103 +82,86 @@ 
            android:id="@+id/preview_icon"

            android:layout_width="@dimen/button_touch_size"

            android:layout_height="@dimen/button_touch_size"

                android:layout_alignParentTop="true"

            android:layout_alignParentEnd="true"

                android:pointerIcon="hand"

            android:layout_alignParentTop="true"

            android:clickable="true"

            android:focusable="true"

                android:clickable="true">

            android:pointerIcon="hand">



            <ImageView

                android:layout_width="@dimen/zoom_icon_size"

                android:layout_height="@dimen/zoom_icon_size"

                    android:padding="2dp"

                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 a mime-type icon and some text fields (title,

                 size, mod-time, etc). -->

        <!-- Item nameplate. Has some text fields (title, size, mod-time, etc). -->



        <LinearLayout

            android:id="@+id/nameplate"

                android:background="?android:attr/colorBackground"

                android:orientation="horizontal"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_below="@id/thumbnail">



                <FrameLayout

                    android:id="@+id/icon"

                    android:layout_width="wrap_content"

                    android:layout_height="match_parent"

                    android:layout_centerVertical="true"

                    android:pointerIcon="hand"

                    android:paddingTop="8dp"

                    android:paddingBottom="8dp"

                    android:paddingStart="12dp"

                    android:paddingEnd="8dp">



                    <ImageView

                        android:id="@+id/icon_mime_sm"

                        android:layout_width="@dimen/grid_item_icon_size"

                        android:layout_height="@dimen/grid_item_icon_size"

                        android:layout_gravity="center"

                        android:scaleType="center"

                        android:contentDescription="@null"/>



                    <ImageView

                        android:id="@+id/icon_check"

                        android:src="@drawable/ic_check_circle"

                        android:alpha="0"

                        android:layout_width="@dimen/check_icon_size"

                        android:layout_height="@dimen/check_icon_size"

                        android:layout_gravity="center"

                        android:scaleType="fitCenter"

                        android:contentDescription="@null"/>



                </FrameLayout>



                <RelativeLayout

            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:padding="@dimen/grid_item_nameplate_padding">



            <!-- Top row. -->

            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                    android:paddingBottom="8dp"

                    android:paddingTop="8dp"

                    android:paddingEnd="12dp">

                android:gravity="center"

                android:orientation="horizontal">



                <ImageView

                    android:id="@+id/icon_profile_badge"

                        android:layout_height="@dimen/briefcase_icon_size"

                    android:layout_width="@dimen/briefcase_icon_size"

                    android:layout_height="@dimen/briefcase_icon_size"

                    android:layout_marginEnd="@dimen/briefcase_icon_margin"

                        android:layout_alignTop="@android:id/title"

                        android:layout_alignBottom="@android:id/title"

                    android:contentDescription="@string/a11y_work"

                    android:gravity="center_vertical"

                    android:src="@drawable/ic_briefcase"

                        android:tint="?android:attr/colorAccent"

                        android:contentDescription="@string/a11y_work"/>

                    android:tint="?android:attr/colorAccent" />



                <TextView

                    android:id="@android:id/title"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                        android:layout_alignParentTop="true"

                        android:layout_toEndOf="@+id/icon_profile_badge"

                    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: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/CardPrimaryText"/>

                    android:textAppearance="@style/ItemCaptionText" />



                <TextView

                        android:id="@+id/details"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                        android:layout_below="@android:id/title"

                    android:layout_marginEnd="4dp"

                    android:singleLine="true"

                        android:ellipsize="end"

                    android:text="@string/bullet"

                    android:textAlignment="viewStart"

                    android:textAppearance="@style/ItemCaptionText" />
@@ -183,27 +169,15 @@ 
                    android:id="@+id/date"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                        android:layout_below="@android:id/title"

                        android:layout_toEndOf="@id/details"

                        android:singleLine="true"

                    android:ellipsize="end"

                    android:singleLine="true"

                    android:textAlignment="viewStart"

                    android:textAppearance="@style/ItemCaptionText" />



                </RelativeLayout>

            </LinearLayout>



        </LinearLayout>



    </RelativeLayout>



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


    <!-- An overlay that draws the item border when it is focused. -->

    <View

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="@drawable/item_doc_grid_border_rounded"

        android:contentDescription="@null"

        android:duplicateParentState="true"/>



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

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

+16 −0
Original line number Diff line number Diff line
@@ -66,6 +66,22 @@ 
    <dimen name="breadcrumb_item_height">36dp</dimen>

    <dimen name="dir_elevation">8dp</dimen>

    <dimen name="drag_shadow_size">120dp</dimen>

    <dimen name="grid_item_width">150dp</dimen>

    <dimen name="grid_item_height">132dp</dimen>

    <dimen name="grid_item_layout_marginStart">@dimen/space_extra_small_2</dimen>

    <dimen name="grid_item_layout_marginEnd">@dimen/space_extra_small_2</dimen>

    <dimen name="grid_item_layout_marginTop">@dimen/space_extra_small_2</dimen>

    <dimen name="grid_item_thumbnail_width">80dp</dimen>

    <dimen name="grid_item_thumbnail_height">80dp</dimen>

    <dimen name="grid_item_thumbnail_radius">12dp</dimen>

    <dimen name="grid_item_icon_width">64dp</dimen>

    <dimen name="grid_item_icon_height">64dp</dimen>

    <dimen name="grid_item_layout_margin">@dimen/space_small_1</dimen>

    <dimen name="grid_item_nameplate_width">142dp</dimen>

    <dimen name="grid_item_nameplate_height">44dp</dimen>

    <dimen name="grid_item_nameplate_padding">4dp</dimen>

    <dimen name="grid_item_nameplate_marginTop">@dimen/space_extra_small_2</dimen>

    <dimen name="grid_item_nameplate_radius">8dp</dimen>

    <dimen name="grid_item_elevation">2dp</dimen>

    <dimen name="grid_item_radius">12dp</dimen>

    <dimen name="max_drawer_width">280dp</dimen>

res/values/strings.xml

+3 −0
Original line number Diff line number Diff line
@@ -587,4 +587,7 @@ 
    <!-- Accessibility announcement when switching to list mode of files and directories shown. [CHAR_LIMIT=100] -->

    <string name="list_mode_showing">Showing in list mode.</string>



    <!-- Unicode Character “•” (U+2022). -->

    <string name="bullet">\u2022</string>



</resources>