From 87b24705a93fe7db4a442ff02d823c94cc760d1f Mon Sep 17 00:00:00 2001
From: Wenbo Jie <wenbojie@google.com>
Date: Fri, 17 Jan 2025 05:03:50 +0000
Subject: [DocsUI M3] Split the main container into 3 sections

* Split the main container section (right part) into
  3 sub sections: app bar and search chips, file list/grid,
  file path bar (breadcrumb), add gap between the 3
  sub sections and add corner radius. Note: this doesn't
  impact the compact layout.
* Remove the additional bottom padding for both nav
  tree and directory list in full screen mode.
* Removes the bottom border for table header as per spec.
* Explicitly specify background color for breadcrumb in
  compact screen to avoid overlap between the file list
  and the breadcrumb area.

Check the attached bug for demo video.

Bug: 387869597
Test: m DocumentsUIGoogle && manual inspection
Flag: com.android.documentsui.flags.use_material3
Change-Id: Ib7f7e8837d7486a0e902604386f802322e557ab0
---
 .../drawable/main_container_background.xml         | 20 ------
 .../main_container_bottom_section_background.xml   | 24 +++++++
 .../main_container_middle_section_background.xml   | 20 ++++++
 .../main_container_top_section_background.xml      | 24 +++++++
 .../drawable/sort_widget_background.xml            |  1 +
 .../layout-w900dp/column_headers.xml               |  1 -
 .../layout/directory_app_bar.xml                   |  4 ++
 .../layout/directory_header.xml                    |  3 -
 .../layout/drawer_layout.xml                       |  6 ++
 .../layout/fixed_layout.xml                        | 79 +++++++++++++--------
 .../layout/nav_rail_layout.xml                     | 81 ++++++++++++++--------
 .../values/dimens.xml                              |  3 +
 src/com/android/documentsui/BaseActivity.java      | 15 ++--
 13 files changed, 195 insertions(+), 86 deletions(-)
 delete mode 100644 res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_background.xml
 create mode 100644 res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_bottom_section_background.xml
 create mode 100644 res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_middle_section_background.xml
 create mode 100644 res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_top_section_background.xml

diff --git a/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_background.xml b/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_background.xml
deleted file mode 100644
index 151a7ba77..000000000
--- a/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_background.xml
+++ /dev/null
@@ -1,20 +0,0 @@
-<?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.
--->
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="rectangle">
-    <solid android:color="?attr/colorSurfaceBright" />
-    <corners android:radius="16dp" />
-</shape>
\ No newline at end of file
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_bottom_section_background.xml b/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_bottom_section_background.xml
new file mode 100644
index 000000000..04f425e16
--- /dev/null
+++ b/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_bottom_section_background.xml
@@ -0,0 +1,24 @@
+<?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.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="?attr/colorSurfaceBright" />
+    <corners
+        android:topLeftRadius="@dimen/main_container_corner_radius_small"
+        android:topRightRadius="@dimen/main_container_corner_radius_small"
+        android:bottomLeftRadius="@dimen/main_container_corner_radius_large"
+        android:bottomRightRadius="@dimen/main_container_corner_radius_large" />
+</shape>
\ No newline at end of file
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_middle_section_background.xml b/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_middle_section_background.xml
new file mode 100644
index 000000000..8b0b42bee
--- /dev/null
+++ b/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_middle_section_background.xml
@@ -0,0 +1,20 @@
+<?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.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="?attr/colorSurfaceBright" />
+    <corners android:radius="@dimen/main_container_corner_radius_small" />
+</shape>
\ No newline at end of file
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_top_section_background.xml b/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_top_section_background.xml
new file mode 100644
index 000000000..b35ed4060
--- /dev/null
+++ b/res/flag(com.android.documentsui.flags.use_material3)/drawable/main_container_top_section_background.xml
@@ -0,0 +1,24 @@
+<?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.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="?attr/colorSurfaceBright" />
+    <corners
+        android:topLeftRadius="@dimen/main_container_corner_radius_large"
+        android:topRightRadius="@dimen/main_container_corner_radius_large"
+        android:bottomLeftRadius="@dimen/main_container_corner_radius_small"
+        android:bottomRightRadius="@dimen/main_container_corner_radius_small" />
+</shape>
\ No newline at end of file
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/drawable/sort_widget_background.xml b/res/flag(com.android.documentsui.flags.use_material3)/drawable/sort_widget_background.xml
index 212dab765..5a9022035 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/drawable/sort_widget_background.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/drawable/sort_widget_background.xml
@@ -15,6 +15,7 @@
     limitations under the License.
   -->
 
+<!-- TODO(b/379776735): remove this file after M3 uplift -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item
         android:top="-1dp"
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/column_headers.xml b/res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/column_headers.xml
index 57fb74751..e0b3ff430 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/column_headers.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/column_headers.xml
@@ -21,7 +21,6 @@
     android:orientation="horizontal"
     android:layout_width="match_parent"
     android:layout_height="@dimen/doc_header_height"
-    android:background="@drawable/sort_widget_background"
     android:visibility="gone">
 
     <LinearLayout
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_app_bar.xml b/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_app_bar.xml
index 95b322454..54a6a7cb2 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_app_bar.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_app_bar.xml
@@ -14,6 +14,7 @@
      limitations under the License.
 -->
 
+<!-- This is only used in DrawerLayout (compact screen) right now. -->
 <com.google.android.material.appbar.AppBarLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
@@ -35,6 +36,9 @@
 
             <include layout="@layout/directory_header" />
 
+            <!-- column headers are empty on small screens, in portrait or in grid mode. -->
+            <include layout="@layout/column_headers"/>
+
         </androidx.core.widget.NestedScrollView>
 
         <com.google.android.material.appbar.MaterialToolbar
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_header.xml b/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_header.xml
index 7623403f6..171c5882a 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_header.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/layout/directory_header.xml
@@ -52,7 +52,4 @@
     <!-- used for apps row. -->
     <include layout="@layout/apps_row"/>
 
-    <!-- column headers are empty on small screens, in portrait or in grid mode. -->
-    <include layout="@layout/column_headers"/>
-
 </LinearLayout>
\ No newline at end of file
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/layout/drawer_layout.xml b/res/flag(com.android.documentsui.flags.use_material3)/layout/drawer_layout.xml
index 8499c0112..e86e0ec5a 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/layout/drawer_layout.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/layout/drawer_layout.xml
@@ -28,6 +28,7 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent">
 
+        <!-- Main container -->
         <androidx.coordinatorlayout.widget.CoordinatorLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
@@ -35,6 +36,7 @@
             android:paddingTop="@dimen/main_container_padding_top"
             android:background="?attr/colorSurfaceBright">
 
+            <!-- Main list area (file list/grid or search results), full height -->
             <FrameLayout
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
@@ -62,11 +64,13 @@
                     android:layout_height="match_parent"/>
             </FrameLayout>
 
+            <!-- Footer of right hand side: Breadcrumbs and Picker footer. -->
             <com.android.documentsui.HorizontalBreadcrumb
                 android:id="@+id/horizontal_breadcrumb"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_gravity="bottom"
+                android:background="?attr/colorSurfaceBright"
                 />
 
             <androidx.coordinatorlayout.widget.CoordinatorLayout
@@ -77,10 +81,12 @@
                 android:background="?android:attr/colorBackgroundFloating"
                 />
 
+            <!-- Top section: toolbar, search chips, profile tab -->
             <include layout="@layout/directory_app_bar"/>
 
         </androidx.coordinatorlayout.widget.CoordinatorLayout>
 
+        <!-- Drawer section -->
         <LinearLayout
             android:id="@+id/drawer_roots"
             android:layout_width="256dp"
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/layout/fixed_layout.xml b/res/flag(com.android.documentsui.flags.use_material3)/layout/fixed_layout.xml
index 0b03572ac..feaa34e6d 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/layout/fixed_layout.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/layout/fixed_layout.xml
@@ -26,33 +26,33 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
+        android:orientation="horizontal"
+        android:baselineAligned="false"
         android:background="?attr/colorSurfaceContainer"
-        android:orientation="vertical">
-
+        android:paddingTop="@dimen/layout_padding_top"
+        android:paddingBottom="@dimen/layout_padding_bottom"
+        android:paddingEnd="@dimen/layout_padding_end">
+
+        <!-- Navigation: left hand side. -->
+        <FrameLayout
+            android:id="@+id/container_roots"
+            android:layout_width="256dp"
+            android:layout_height="match_parent"
+            />
+
+        <!-- Main container for the right hand side. -->
         <LinearLayout
             android:layout_width="match_parent"
-            android:layout_height="0dp"
-            android:layout_weight="1"
-            android:orientation="horizontal"
-            android:baselineAligned="false"
-            android:paddingTop="@dimen/layout_padding_top"
-            android:paddingBottom="@dimen/layout_padding_bottom"
-            android:paddingEnd="@dimen/layout_padding_end">
-
-            <!-- Navigation: left hand side. -->
-            <FrameLayout
-                android:id="@+id/container_roots"
-                android:layout_width="256dp"
-                android:layout_height="match_parent"
-                />
-
-            <!-- Main container for the right hand side. -->
+            android:layout_height="match_parent"
+            android:orientation="vertical">
+
+            <!-- Top section: toolbar, search chips, profile tab -->
             <LinearLayout
                 android:layout_width="match_parent"
-                android:layout_height="match_parent"
+                android:layout_height="wrap_content"
                 android:orientation="vertical"
-                android:background="@drawable/main_container_background"
-                android:paddingTop="@dimen/main_container_padding_top">
+                android:paddingTop="@dimen/main_container_padding_top"
+                android:background="@drawable/main_container_top_section_background">
 
                 <com.google.android.material.appbar.MaterialToolbar
                     android:id="@+id/toolbar"
@@ -73,7 +73,19 @@
 
                 <include layout="@layout/directory_header" />
 
-                <!-- Main list area (file list/grid or search results). -->
+            </LinearLayout>
+
+            <!-- Main list area (file list/grid or search results). -->
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="0dp"
+                android:layout_weight="1"
+                android:orientation="vertical"
+                android:layout_marginTop="@dimen/main_container_section_gap"
+                android:background="@drawable/main_container_middle_section_background">
+
+                <include layout="@layout/column_headers"/>
+
                 <FrameLayout
                     android:layout_width="match_parent"
                     android:layout_height="0dp"
@@ -92,22 +104,29 @@
                         android:layout_height="match_parent" />
 
                 </FrameLayout>
+            </LinearLayout>
+
+            <!-- Footer of right hand side: Breadcrumbs and Picker footer. -->
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/main_container_section_gap"
+                android:background="@drawable/main_container_bottom_section_background">
 
-                <!-- Footer of right hand side: Breadcrumbs and Picker footer. -->
                 <com.android.documentsui.HorizontalBreadcrumb
                     android:id="@+id/horizontal_breadcrumb"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content" />
 
-                <androidx.coordinatorlayout.widget.CoordinatorLayout
-                    android:id="@+id/container_save"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:background="?android:attr/colorBackgroundFloating"
-                    android:elevation="8dp" />
-
             </LinearLayout>
 
+            <androidx.coordinatorlayout.widget.CoordinatorLayout
+                android:id="@+id/container_save"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="?android:attr/colorBackgroundFloating"
+                android:elevation="8dp" />
+
         </LinearLayout>
 
     </LinearLayout>
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/layout/nav_rail_layout.xml b/res/flag(com.android.documentsui.flags.use_material3)/layout/nav_rail_layout.xml
index 5d753f336..618aa7f14 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/layout/nav_rail_layout.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/layout/nav_rail_layout.xml
@@ -49,54 +49,81 @@
             <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
-                android:orientation="vertical"
-                android:background="@drawable/main_container_background"
-                android:paddingTop="@dimen/main_container_padding_top">
+                android:orientation="vertical">
 
-                <com.google.android.material.appbar.MaterialToolbar
-                    android:id="@+id/toolbar"
+                <!-- Top section: toolbar, search chips, profile tab -->
+                <LinearLayout
                     android:layout_width="match_parent"
-                    android:layout_height="?attr/actionBarSize"
-                    android:layout_marginTop="@dimen/action_bar_margin"
-                    android:touchscreenBlocksFocus="false">
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical"
+                    android:paddingTop="@dimen/main_container_padding_top"
+                    android:background="@drawable/main_container_top_section_background">
 
-                    <TextView
-                        android:id="@+id/searchbar_title"
+                    <com.google.android.material.appbar.MaterialToolbar
+                        android:id="@+id/toolbar"
                         android:layout_width="match_parent"
-                        android:layout_height="?android:attr/actionBarSize"
-                        android:gravity="center_vertical"
-                        android:text="@string/search_bar_hint"
-                        android:textAppearance="@style/SearchBarTitle" />
+                        android:layout_height="?attr/actionBarSize"
+                        android:layout_marginTop="@dimen/action_bar_margin"
+                        android:touchscreenBlocksFocus="false">
+
+                        <TextView
+                            android:id="@+id/searchbar_title"
+                            android:layout_width="match_parent"
+                            android:layout_height="?android:attr/actionBarSize"
+                            android:gravity="center_vertical"
+                            android:text="@string/search_bar_hint"
+                            android:textAppearance="@style/SearchBarTitle" />
+
+                    </com.google.android.material.appbar.MaterialToolbar>
 
-                </com.google.android.material.appbar.MaterialToolbar>
+                    <include layout="@layout/directory_header" />
 
-                <include layout="@layout/directory_header" />
+                </LinearLayout>
 
                 <!-- Main list area (file list/grid or search results). -->
-                <FrameLayout
+                <LinearLayout
                     android:layout_width="match_parent"
                     android:layout_height="0dp"
-                    android:layout_weight="1">
+                    android:layout_weight="1"
+                    android:orientation="vertical"
+                    android:layout_marginTop="@dimen/main_container_section_gap"
+                    android:background="@drawable/main_container_middle_section_background">
 
-                    <FrameLayout
-                        android:id="@+id/container_directory"
-                        android:clipToPadding="false"
-                        android:layout_width="match_parent"
-                        android:layout_height="match_parent" />
+                    <include layout="@layout/column_headers"/>
 
                     <FrameLayout
-                        android:id="@+id/container_search_fragment"
-                        android:clipToPadding="false"
                         android:layout_width="match_parent"
-                        android:layout_height="match_parent" />
+                        android:layout_height="0dp"
+                        android:layout_weight="1">
+
+                        <FrameLayout
+                            android:id="@+id/container_directory"
+                            android:clipToPadding="false"
+                            android:layout_width="match_parent"
+                            android:layout_height="match_parent" />
 
-                </FrameLayout>
+                        <FrameLayout
+                            android:id="@+id/container_search_fragment"
+                            android:clipToPadding="false"
+                            android:layout_width="match_parent"
+                            android:layout_height="match_parent" />
+
+                    </FrameLayout>
+
+                </LinearLayout>
 
                 <!-- Footer of right hand side: Breadcrumbs and Picker footer. -->
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="@dimen/main_container_section_gap"
+                    android:background="@drawable/main_container_bottom_section_background">
+
                 <com.android.documentsui.HorizontalBreadcrumb
                     android:id="@+id/horizontal_breadcrumb"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content" />
+                </LinearLayout>
 
                 <androidx.coordinatorlayout.widget.CoordinatorLayout
                     android:id="@+id/container_save"
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/values/dimens.xml b/res/flag(com.android.documentsui.flags.use_material3)/values/dimens.xml
index 7ca1ec25a..c6a7ba8fd 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/values/dimens.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/values/dimens.xml
@@ -130,6 +130,9 @@
     <dimen name="main_container_padding_start">@dimen/space_small_4</dimen>
     <dimen name="main_container_padding_end">@dimen/space_small_4</dimen>
     <dimen name="main_container_padding_top">0dp</dimen>
+    <dimen name="main_container_section_gap">2dp</dimen>
+    <dimen name="main_container_corner_radius_large">16dp</dimen>
+    <dimen name="main_container_corner_radius_small">4dp</dimen>
     <dimen name="layout_padding_top">@dimen/space_small_1</dimen>
     <dimen name="layout_padding_bottom">@dimen/space_small_1</dimen>
     <dimen name="layout_padding_end">@dimen/space_small_1</dimen>
diff --git a/src/com/android/documentsui/BaseActivity.java b/src/com/android/documentsui/BaseActivity.java
index 4c25b3608..41fc5182f 100644
--- a/src/com/android/documentsui/BaseActivity.java
+++ b/src/com/android/documentsui/BaseActivity.java
@@ -525,11 +525,16 @@ public abstract class BaseActivity
             root.setPadding(insets.getSystemWindowInsetLeft(),
                     insets.getSystemWindowInsetTop(), insets.getSystemWindowInsetRight(), 0);
 
-            View saveContainer = findViewById(R.id.container_save);
-            saveContainer.setPadding(0, 0, 0, insets.getSystemWindowInsetBottom());
-
-            View rootsContainer = findViewById(R.id.container_roots);
-            rootsContainer.setPadding(0, 0, 0, insets.getSystemWindowInsetBottom());
+            // in M3, no additional bottom gap in full screen mode.
+            if (!useMaterial3()) {
+                View saveContainer = findViewById(R.id.container_save);
+                saveContainer.setPadding(
+                        0, 0, 0, insets.getSystemWindowInsetBottom());
+
+                View rootsContainer = findViewById(R.id.container_roots);
+                rootsContainer.setPadding(
+                        0, 0, 0, insets.getSystemWindowInsetBottom());
+            }
 
             return insets.consumeSystemWindowInsets();
         });
-- 
cgit v1.2.3-59-g8ed1b