From b00d0c7f4762f5babb84da63afc4eaa0639c8370 Mon Sep 17 00:00:00 2001
From: Cassy Chun-Crogan <cassycc@google.com>
Date: Thu, 20 Mar 2025 03:41:05 +0000
Subject: [DocsUI M3] Centre items in grid layout

Previously items (columns) were not centred leading to any extra spacing
going to the righthand side.

Add an outer FrameLayout layer where width is match_parent which will
evenly distribute the space between items. Within the FrameLayout
centre the actual grid item with center_horizontal.

See bug for demo.

Bug: 404978773
Test: m DocumentsUIGoogle && manual inspection
Flag: com.android.documentsui.flags.use_material3
Change-Id: I379a9a97c0e6c3b8656a9c730e862cdc903de370
---
 .../layout/item_doc_grid.xml                       | 295 +++++++++++----------
 1 file changed, 151 insertions(+), 144 deletions(-)

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
-- 
cgit v1.2.3-59-g8ed1b