From e599ddbd61fcb513c118633d2ecd4235cf2cf1e6 Mon Sep 17 00:00:00 2001
From: Wenbo Jie <wenbojie@google.com>
Date: Mon, 3 Mar 2025 01:21:43 +0000
Subject: [DocsUI M3] Fix the 3-section layout on compact screen

* Update table header height as per spec.
* Show table header section for medium/compact
  screen size with Name column only.
* Add divider in compact screen size for header and
  breadcrumb, make it as 3-section layout, similar to
  other screen size layouts.
* Adjust the bottom section layout in compact screen to
  prevent breadcrumb section from being shadowed by
  the saver footer in file saver mode.

Check the attached bug for demo.

Bug: 399225360
Test: m DocumentsUIGoogle && manual inspection
Flag: com.android.documentsui.flags.use_material3
Change-Id: I251da779013964b93835f7820dcf0b4d025cab0a
---
 .../layout-w900dp/column_headers.xml               | 192 ++++++++++-----------
 .../layout-w900dp/shared_cell_content.xml          |  40 -----
 .../layout/column_headers.xml                      |  39 ++++-
 .../layout/directory_app_bar.xml                   |  23 ++-
 .../layout/drawer_layout.xml                       |  37 ++--
 .../layout/shared_cell_content.xml                 |  40 +++++
 .../values-w600dp/dimens.xml                       |   5 +
 .../values-w900dp/dimens.xml                       |   5 +
 .../values/dimens.xml                              |  13 +-
 .../android/documentsui/HorizontalBreadcrumb.java  |  11 +-
 .../android/documentsui/NavigationViewManager.java |  24 ++-
 .../documentsui/dirlist/DirectoryFragment.java     |   7 +
 .../documentsui/sorting/TableHeaderController.java |  25 ++-
 13 files changed, 278 insertions(+), 183 deletions(-)
 delete mode 100644 res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/shared_cell_content.xml
 create mode 100644 res/flag(com.android.documentsui.flags.use_material3)/layout/shared_cell_content.xml

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 c692b4124..dcd3283b4 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
@@ -27,111 +27,103 @@
     android:orientation="horizontal"
     android:layout_width="match_parent"
     android:layout_height="@dimen/doc_header_height"
-    android:paddingHorizontal="@dimen/list_container_padding"
+    android:baselineAligned="false"
+    android:gravity="center_vertical"
+    android:paddingStart="@dimen/table_header_padding_start"
+    android:paddingEnd="@dimen/table_header_padding_end"
     android:visibility="gone">
-
+    <!-- Placeholder for MIME/thumbnail icon -->
+    <View
+        android:layout_width="@dimen/list_item_icon_size"
+        android:layout_height="@dimen/list_item_icon_size"
+        android:layout_gravity="center_vertical"
+        android:layout_marginEnd="@dimen/list_item_icon_margin_end"
+        android:layout_marginStart="0dp"/>
+
+    <!-- Column headers -->
     <LinearLayout
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="match_parent"
-        android:baselineAligned="false"
-        android:gravity="center_vertical"
-        android:minHeight="@dimen/list_item_height"
-        android:paddingStart="@dimen/list_item_padding_start"
-        android:paddingEnd="@dimen/list_item_padding_end"
+        android:layout_weight="1"
         android:orientation="horizontal">
-        <!-- Placeholder for MIME/thumbnail icon -->
-        <View
-            android:layout_width="@dimen/list_item_icon_size"
-            android:layout_height="@dimen/list_item_icon_size"
-            android:layout_gravity="center_vertical"
-            android:layout_marginEnd="@dimen/list_item_icon_margin_end"
-            android:layout_marginStart="0dp"/>
-
-        <!-- Column headers -->
-        <LinearLayout
+
+        <com.android.documentsui.sorting.HeaderCell
+            android:id="@android:id/title"
+            android:layout_width="0dp"
+            android:layout_height="match_parent"
+            android:layout_weight="0.4"
+            android:layout_marginEnd="12dp"
+            android:clickable="true"
+            android:focusable="false"
+            android:gravity="center_vertical"
+            android:orientation="horizontal"
+            android:animateLayoutChanges="true">
+
+            <include layout="@layout/shared_cell_content" />
+        </com.android.documentsui.sorting.HeaderCell>
+
+        <com.android.documentsui.sorting.HeaderCell
+            android:id="@android:id/summary"
+            android:layout_width="0dp"
+            android:layout_height="match_parent"
+            android:layout_weight="0"
+            android:layout_marginEnd="0dp"
+            android:clickable="true"
+            android:focusable="false"
+            android:gravity="center_vertical"
+            android:orientation="horizontal"
+            android:animateLayoutChanges="true">
+
+            <include layout="@layout/shared_cell_content" />
+        </com.android.documentsui.sorting.HeaderCell>
+
+        <com.android.documentsui.sorting.HeaderCell
+            android:id="@+id/file_type"
             android:layout_width="0dp"
             android:layout_height="match_parent"
-            android:layout_weight="1"
-            android:orientation="horizontal">
-
-            <com.android.documentsui.sorting.HeaderCell
-                android:id="@android:id/title"
-                android:layout_width="0dp"
-                android:layout_height="match_parent"
-                android:layout_weight="0.4"
-                android:layout_marginEnd="12dp"
-                android:clickable="true"
-                android:focusable="false"
-                android:gravity="center_vertical"
-                android:orientation="horizontal"
-                android:animateLayoutChanges="true">
-
-                <include layout="@layout/shared_cell_content" />
-            </com.android.documentsui.sorting.HeaderCell>
-
-            <com.android.documentsui.sorting.HeaderCell
-                android:id="@android:id/summary"
-                android:layout_width="0dp"
-                android:layout_height="match_parent"
-                android:layout_weight="0"
-                android:layout_marginEnd="0dp"
-                android:clickable="true"
-                android:focusable="false"
-                android:gravity="center_vertical"
-                android:orientation="horizontal"
-                android:animateLayoutChanges="true">
-
-                <include layout="@layout/shared_cell_content" />
-            </com.android.documentsui.sorting.HeaderCell>
-
-            <com.android.documentsui.sorting.HeaderCell
-                android:id="@+id/file_type"
-                android:layout_width="0dp"
-                android:layout_height="match_parent"
-                android:layout_weight="0.2"
-                android:clickable="true"
-                android:focusable="false"
-                android:gravity="center_vertical"
-                android:orientation="horizontal"
-                android:animateLayoutChanges="true">
-
-                <include layout="@layout/shared_cell_content" />
-            </com.android.documentsui.sorting.HeaderCell>
-
-            <com.android.documentsui.sorting.HeaderCell
-                android:id="@+id/size"
-                android:layout_width="0dp"
-                android:layout_height="match_parent"
-                android:layout_weight="0.2"
-                android:clickable="true"
-                android:focusable="false"
-                android:gravity="center_vertical"
-                android:orientation="horizontal"
-                android:animateLayoutChanges="true">
-
-                <include layout="@layout/shared_cell_content" />
-            </com.android.documentsui.sorting.HeaderCell>
-
-            <com.android.documentsui.sorting.HeaderCell
-                android:id="@+id/date"
-                android:layout_width="0dp"
-                android:layout_height="match_parent"
-                android:layout_weight="0.2"
-                android:clickable="true"
-                android:focusable="false"
-                android:gravity="center_vertical"
-                android:orientation="horizontal"
-                android:animateLayoutChanges="true">
-
-                <include layout="@layout/shared_cell_content" />
-            </com.android.documentsui.sorting.HeaderCell>
-        </LinearLayout>
-
-        <!-- Placeholder for preview icon in picker mode -->
-        <View
-            android:id="@+id/preview_icon_placeholder"
-            android:layout_width="@dimen/list_item_icon_size"
-            android:layout_height="@dimen/list_item_icon_size"
-            android:layout_marginEnd="@dimen/list_item_icon_margin_end" />
+            android:layout_weight="0.2"
+            android:clickable="true"
+            android:focusable="false"
+            android:gravity="center_vertical"
+            android:orientation="horizontal"
+            android:animateLayoutChanges="true">
+
+            <include layout="@layout/shared_cell_content" />
+        </com.android.documentsui.sorting.HeaderCell>
+
+        <com.android.documentsui.sorting.HeaderCell
+            android:id="@+id/size"
+            android:layout_width="0dp"
+            android:layout_height="match_parent"
+            android:layout_weight="0.2"
+            android:clickable="true"
+            android:focusable="false"
+            android:gravity="center_vertical"
+            android:orientation="horizontal"
+            android:animateLayoutChanges="true">
+
+            <include layout="@layout/shared_cell_content" />
+        </com.android.documentsui.sorting.HeaderCell>
+
+        <com.android.documentsui.sorting.HeaderCell
+            android:id="@+id/date"
+            android:layout_width="0dp"
+            android:layout_height="match_parent"
+            android:layout_weight="0.2"
+            android:clickable="true"
+            android:focusable="false"
+            android:gravity="center_vertical"
+            android:orientation="horizontal"
+            android:animateLayoutChanges="true">
+
+            <include layout="@layout/shared_cell_content" />
+        </com.android.documentsui.sorting.HeaderCell>
     </LinearLayout>
+
+    <!-- Placeholder for preview icon in picker mode -->
+    <View
+        android:id="@+id/preview_icon_placeholder"
+        android:layout_width="@dimen/list_item_icon_size"
+        android:layout_height="@dimen/list_item_icon_size"
+        android:layout_marginEnd="@dimen/list_item_icon_margin_end" />
 </LinearLayout>
\ No newline at end of file
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/shared_cell_content.xml b/res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/shared_cell_content.xml
deleted file mode 100644
index f269afdbe..000000000
--- a/res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/shared_cell_content.xml
+++ /dev/null
@@ -1,40 +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.
-  -->
-
-<merge xmlns:android="http://schemas.android.com/apk/res/android">
-    <TextView
-        android:id="@+id/label"
-        android:layout_height="wrap_content"
-        android:layout_width="wrap_content"
-        android:ellipsize="end"
-        android:singleLine="true"
-        android:textAlignment="viewStart"
-        android:textAppearance="@style/ListTableHeaderText"
-        android:textColor="?attr/colorOnSurface"/>
-
-    <ImageView
-        android:id="@+id/sort_arrow"
-        android:layout_height="@dimen/doc_header_sort_icon_size"
-        android:layout_width="@dimen/doc_header_sort_icon_size"
-        android:layout_marginStart="3dp"
-        android:visibility="gone"
-        android:focusable="true"
-        android:clickable="true"
-        android:background="?attr/colorSurfaceBright"
-        android:src="@drawable/ic_sort_arrow"
-        android:contentDescription="@null"/>
-</merge>
\ No newline at end of file
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/layout/column_headers.xml b/res/flag(com.android.documentsui.flags.use_material3)/layout/column_headers.xml
index fde349b88..18a8dc8f7 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/layout/column_headers.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/layout/column_headers.xml
@@ -15,6 +15,39 @@
     limitations under the License.
 -->
 
-<!-- A placeholder of table header on small screens. This won't inflate any view when it's included
-     into other layouts. -->
-<merge />
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/table_header"
+    android:orientation="horizontal"
+    android:layout_width="match_parent"
+    android:layout_height="@dimen/doc_header_height"
+    android:baselineAligned="false"
+    android:gravity="center_vertical"
+    android:paddingStart="@dimen/table_header_padding_start"
+    android:paddingEnd="@dimen/table_header_padding_end"
+    android:background="?attr/colorSurfaceBright"
+    android:visibility="gone">
+
+    <!-- Placeholder for MIME/thumbnail icon -->
+    <View
+        android:layout_width="@dimen/list_item_icon_size"
+        android:layout_height="@dimen/list_item_icon_size"
+        android:layout_gravity="center_vertical"
+        android:layout_marginEnd="@dimen/list_item_icon_margin_end"
+        android:layout_marginStart="0dp"/>
+
+    <!-- Column headers: Name only for compact/medium size screen -->
+    <com.android.documentsui.sorting.HeaderCell
+        android:id="@android:id/title"
+        android:layout_width="0dp"
+        android:layout_height="match_parent"
+        android:layout_weight="1"
+        android:clickable="true"
+        android:focusable="false"
+        android:gravity="center_vertical"
+        android:orientation="horizontal"
+        android:animateLayoutChanges="true">
+
+        <include layout="@layout/shared_cell_content" />
+    </com.android.documentsui.sorting.HeaderCell>
+</LinearLayout>
\ No newline at end of file
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 54a6a7cb2..94e4b953d 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
@@ -23,29 +23,40 @@
     android:layout_height="wrap_content"
     android:touchscreenBlocksFocus="false">
 
+    <!-- Technically we don't need this CollapsingToolbarLayout wrapper when use_material3 flag
+         is ON, because we don't want to hide anything in the app header area when scrolling, but
+         some files (e.g. NavigationViewManager and others) uses the existence of this element to
+         do some specific logic, hence leaving it here with "noScroll" behavior.
+     -->
     <com.google.android.material.appbar.CollapsingToolbarLayout
         android:id="@+id/collapsing_toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:titleEnabled="false"
-        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
+        app:layout_scrollFlags="noScroll">
 
-        <androidx.core.widget.NestedScrollView
+        <LinearLayout
             android:layout_width="match_parent"
-            android:layout_height="wrap_content">
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            android:background="?attr/colorSurfaceBright">
 
             <include layout="@layout/directory_header" />
 
-            <!-- column headers are empty on small screens, in portrait or in grid mode. -->
+            <com.google.android.material.divider.MaterialDivider
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                app:dividerColor="?attr/colorSurfaceContainer"
+                app:dividerThickness="@dimen/main_container_section_gap" />
+
             <include layout="@layout/column_headers"/>
 
-        </androidx.core.widget.NestedScrollView>
+        </LinearLayout>
 
         <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
-            app:layout_collapseMode="pin"
             android:touchscreenBlocksFocus="false">
 
             <TextView
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 de6b3d8a9..8e23aad19 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
@@ -40,7 +40,6 @@
             <FrameLayout
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
-                android:paddingBottom="@dimen/file_area_padding_bottom"
                 app:layout_behavior="@string/scrolling_behavior">
 
                 <FrameLayout
@@ -66,21 +65,33 @@
             </FrameLayout>
 
             <!-- Footer of right hand side: Breadcrumbs and Picker footer. -->
-            <com.android.documentsui.HorizontalBreadcrumb
-                android:id="@+id/horizontal_breadcrumb"
+            <LinearLayout
+                android:id="@+id/bottom_container"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_gravity="bottom"
-                android:background="?attr/colorSurfaceBright"
-                />
+                android:orientation="vertical"
+                android:layout_gravity="bottom">
 
-            <androidx.coordinatorlayout.widget.CoordinatorLayout
-                android:id="@+id/container_save"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_gravity="bottom|center_horizontal"
-                android:background="?android:attr/colorBackgroundFloating"
-                />
+                <com.google.android.material.divider.MaterialDivider
+                    android:id="@+id/breadcrumb_top_divider"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    app:dividerColor="?attr/colorSurfaceContainer"
+                    app:dividerThickness="@dimen/main_container_section_gap" />
+
+                <com.android.documentsui.HorizontalBreadcrumb
+                    android:id="@+id/horizontal_breadcrumb"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:background="?attr/colorSurfaceBright" />
+
+                <androidx.coordinatorlayout.widget.CoordinatorLayout
+                    android:id="@+id/container_save"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:background="?android:attr/colorBackgroundFloating" />
+
+            </LinearLayout>
 
             <!-- Top section: toolbar, search chips, profile tab -->
             <include layout="@layout/directory_app_bar"/>
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/layout/shared_cell_content.xml b/res/flag(com.android.documentsui.flags.use_material3)/layout/shared_cell_content.xml
new file mode 100644
index 000000000..f269afdbe
--- /dev/null
+++ b/res/flag(com.android.documentsui.flags.use_material3)/layout/shared_cell_content.xml
@@ -0,0 +1,40 @@
+<?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.
+  -->
+
+<merge xmlns:android="http://schemas.android.com/apk/res/android">
+    <TextView
+        android:id="@+id/label"
+        android:layout_height="wrap_content"
+        android:layout_width="wrap_content"
+        android:ellipsize="end"
+        android:singleLine="true"
+        android:textAlignment="viewStart"
+        android:textAppearance="@style/ListTableHeaderText"
+        android:textColor="?attr/colorOnSurface"/>
+
+    <ImageView
+        android:id="@+id/sort_arrow"
+        android:layout_height="@dimen/doc_header_sort_icon_size"
+        android:layout_width="@dimen/doc_header_sort_icon_size"
+        android:layout_marginStart="3dp"
+        android:visibility="gone"
+        android:focusable="true"
+        android:clickable="true"
+        android:background="?attr/colorSurfaceBright"
+        android:src="@drawable/ic_sort_arrow"
+        android:contentDescription="@null"/>
+</merge>
\ No newline at end of file
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/values-w600dp/dimens.xml b/res/flag(com.android.documentsui.flags.use_material3)/values-w600dp/dimens.xml
index 4707991f6..880d6c0b0 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/values-w600dp/dimens.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/values-w600dp/dimens.xml
@@ -26,5 +26,10 @@
     <dimen name="toolbar_padding_start">@dimen/main_container_padding_start</dimen>
 
     <dimen name="list_container_padding">@dimen/space_extra_small_6</dimen>
+
+    <!-- list_container_padding + list_item_padding_start -->
+    <dimen name="table_header_padding_start">28dp</dimen>
+    <!-- list_container_padding + list_item_padding_end -->
+    <dimen name="table_header_padding_end">20dp</dimen>
 </resources>
 
diff --git a/res/flag(com.android.documentsui.flags.use_material3)/values-w900dp/dimens.xml b/res/flag(com.android.documentsui.flags.use_material3)/values-w900dp/dimens.xml
index d37f3af68..24ff2b17b 100644
--- a/res/flag(com.android.documentsui.flags.use_material3)/values-w900dp/dimens.xml
+++ b/res/flag(com.android.documentsui.flags.use_material3)/values-w900dp/dimens.xml
@@ -36,4 +36,9 @@
     <dimen name="toolbar_padding_end">@dimen/space_small_3</dimen>
 
     <dimen name="drawer_padding_top">@dimen/space_small_1</dimen>
+
+    <!-- list_container_padding + list_item_padding_start -->
+    <dimen name="table_header_padding_start">32dp</dimen>
+    <!-- list_container_padding + list_item_padding_end -->
+    <dimen name="table_header_padding_end">12dp</dimen>
 </resources>
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 65740f15c..6735c715b 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
@@ -14,7 +14,7 @@
      limitations under the License.
 -->
 
-<!-- Dimensions/sizes for size Compact (<=600dp). -->
+<!-- Dimensions/sizes for size Compact (<600dp). -->
 <resources>
     <!-- Material design rounded radius -->
     <dimen name="material_round_radius">2dp</dimen>
@@ -23,10 +23,6 @@
     <dimen name="profile_tab_padding">0dp</dimen>
     <dimen name="grid_container_padding">20dp</dimen>
     <dimen name="list_container_padding">@dimen/space_extra_small_4</dimen>
-    <!-- For compact screen, file area occupies the whole screen height, when use_material3 flag is
-         ON we show breadcrumb at the bottom, so we need to add padding (breadcrumb height) at the
-         bottom to make sure breadcrumb won't over-shadow the file area. -->
-    <dimen name="file_area_padding_bottom">48dp</dimen>
     <dimen name="icon_size">40dp</dimen>
     <dimen name="button_touch_size">48dp</dimen>
     <dimen name="root_icon_size">24dp</dimen>
@@ -90,6 +86,11 @@
     <dimen name="briefcase_icon_size_photo">24dp</dimen>
     <dimen name="button_corner_radius">2dp</dimen>
 
+    <!-- list_container_padding + list_item_padding_start -->
+    <dimen name="table_header_padding_start">24dp</dimen>
+    <!-- list_container_padding + list_item_padding_end -->
+    <dimen name="table_header_padding_end">16dp</dimen>
+
     <dimen name="bottom_sheet_dialog_radius">28dp</dimen>
 
     <dimen name="drawer_edge_width">12dp</dimen>
@@ -115,7 +116,7 @@
     <dimen name="drag_shadow_padding">8dp</dimen>
 
     <dimen name="doc_header_sort_icon_size">32dp</dimen>
-    <dimen name="doc_header_height">60dp</dimen>
+    <dimen name="doc_header_height">48dp</dimen>
 
     <dimen name="dropdown_sort_widget_margin">12dp</dimen>
     <dimen name="dropdown_sort_widget_size">54dp</dimen>
diff --git a/src/com/android/documentsui/HorizontalBreadcrumb.java b/src/com/android/documentsui/HorizontalBreadcrumb.java
index 94f0e13f9..cb25479b3 100644
--- a/src/com/android/documentsui/HorizontalBreadcrumb.java
+++ b/src/com/android/documentsui/HorizontalBreadcrumb.java
@@ -25,6 +25,7 @@ import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
 
+import androidx.annotation.Nullable;
 import androidx.recyclerview.widget.LinearLayoutManager;
 import androidx.recyclerview.widget.RecyclerView;
 
@@ -45,6 +46,9 @@ public final class HorizontalBreadcrumb extends RecyclerView implements Breadcru
     private LinearLayoutManager mLayoutManager;
     private BreadcrumbAdapter mAdapter;
     private IntConsumer mClickListener;
+    // Represents the top divider (border) of the breadcrumb on the compact size screen.
+    // It will be null on other screen sizes, or when the use_material3 flag is OFF.
+    private @Nullable View mTopDividerView;
 
     public HorizontalBreadcrumb(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
@@ -61,12 +65,14 @@ public final class HorizontalBreadcrumb extends RecyclerView implements Breadcru
     @Override
     public void setup(Environment env,
             com.android.documentsui.base.State state,
-            IntConsumer listener) {
+            IntConsumer listener,
+            @Nullable View topDivider) {
 
         mClickListener = listener;
         mLayoutManager = new HorizontalBreadcrumbLinearLayoutManager(
                 getContext(), LinearLayoutManager.HORIZONTAL, false);
         mAdapter = new BreadcrumbAdapter(state, env, this::onKey);
+        mTopDividerView = topDivider;
         // Since we are using GestureDetector to detect click events, a11y services don't know which
         // views are clickable because we aren't using View.OnClickListener. Thus, we need to use a
         // custom accessibility delegate to route click events correctly.
@@ -109,6 +115,9 @@ public final class HorizontalBreadcrumb extends RecyclerView implements Breadcru
             setVisibility(GONE);
             setAdapter(null);
         }
+        if (mTopDividerView != null) {
+            mTopDividerView.setVisibility(visibility ? VISIBLE : GONE);
+        }
         mAdapter.updateLastItemSize();
     }
 
diff --git a/src/com/android/documentsui/NavigationViewManager.java b/src/com/android/documentsui/NavigationViewManager.java
index 86b5e517f..12afbd69b 100644
--- a/src/com/android/documentsui/NavigationViewManager.java
+++ b/src/com/android/documentsui/NavigationViewManager.java
@@ -27,10 +27,10 @@ import android.graphics.drawable.Drawable;
 import android.util.Log;
 import android.view.MenuItem;
 import android.view.View;
+import android.view.ViewGroup;
 import android.view.ViewOutlineProvider;
 import android.view.Window;
 import android.view.WindowManager;
-import android.widget.FrameLayout;
 
 import androidx.annotation.ColorRes;
 import androidx.annotation.Nullable;
@@ -144,7 +144,13 @@ public class NavigationViewManager extends SelectionTracker.SelectionObserver<St
         mState = state;
         mEnv = env;
         mBreadcrumb = breadcrumb;
-        mBreadcrumb.setup(env, state, this::onNavigationItemSelected);
+        mBreadcrumb.setup(
+                env,
+                state,
+                this::onNavigationItemSelected,
+                isUseMaterial3FlagEnabled()
+                        ? activity.findViewById(R.id.breadcrumb_top_divider)
+                        : null);
         mConfigStore = configStore;
         mInjector = injector;
         mProfileTabs =
@@ -297,7 +303,10 @@ public class NavigationViewManager extends SelectionTracker.SelectionObserver<St
     }
 
     public void update() {
-        updateScrollFlag();
+        // If use_material3 flag is ON, we don't want any scroll behavior, thus skipping this logic.
+        if (!isUseMaterial3FlagEnabled()) {
+            updateScrollFlag();
+        }
         updateToolbar();
         mProfileTabs.updateView();
 
@@ -467,8 +476,11 @@ public class NavigationViewManager extends SelectionTracker.SelectionObserver<St
         }
 
         if (!mIsActionModeActivated) {
-            FrameLayout.LayoutParams headerLayoutParams =
-                    (FrameLayout.LayoutParams) mHeader.getLayoutParams();
+            // This could be either FrameLayout.LayoutParams (when use_material3 flag is OFF) or
+            // LinearLayout.LayoutParams (when use_material3 flag is ON), so use the common parent
+            // class instead to make it work for both scenarios.
+            ViewGroup.MarginLayoutParams headerLayoutParams =
+                    (ViewGroup.MarginLayoutParams) mHeader.getLayoutParams();
             headerLayoutParams.setMargins(0, /* top= */ headerTopOffset, 0, 0);
             mHeader.setLayoutParams(headerLayoutParams);
         }
@@ -498,7 +510,7 @@ public class NavigationViewManager extends SelectionTracker.SelectionObserver<St
     }
 
     interface Breadcrumb {
-        void setup(Environment env, State state, IntConsumer listener);
+        void setup(Environment env, State state, IntConsumer listener, @Nullable View topDivider);
 
         void show(boolean visibility);
 
diff --git a/src/com/android/documentsui/dirlist/DirectoryFragment.java b/src/com/android/documentsui/dirlist/DirectoryFragment.java
index 855a8273d..6de42db59 100644
--- a/src/com/android/documentsui/dirlist/DirectoryFragment.java
+++ b/src/com/android/documentsui/dirlist/DirectoryFragment.java
@@ -827,6 +827,13 @@ public class DirectoryFragment extends Fragment implements SwipeRefreshLayout.On
     }
 
     private int getSaveLayoutHeight() {
+        // When use_material3 flag is on, the bottom section not only includes the container_save,
+        // but also includes the breadcrumb and the divider, so we need to use the total height
+        // for their parent container.
+        if (isUseMaterial3FlagEnabled()) {
+            View bottomSection = getActivity().findViewById(R.id.bottom_container);
+            return bottomSection == null ? 0 : bottomSection.getHeight();
+        }
         View containerSave = getActivity().findViewById(R.id.container_save);
         return containerSave == null ? 0 : containerSave.getHeight();
     }
diff --git a/src/com/android/documentsui/sorting/TableHeaderController.java b/src/com/android/documentsui/sorting/TableHeaderController.java
index cb72ac916..fda7b2713 100644
--- a/src/com/android/documentsui/sorting/TableHeaderController.java
+++ b/src/com/android/documentsui/sorting/TableHeaderController.java
@@ -28,10 +28,11 @@ import javax.annotation.Nullable;
 /** View controller for table header that associates header cells in table header and columns. */
 public final class TableHeaderController implements SortController.WidgetController {
     private final HeaderCell mTitleCell;
-    private final HeaderCell mSummaryCell;
-    private final HeaderCell mSizeCell;
-    private final HeaderCell mFileTypeCell;
-    private final HeaderCell mDateCell;
+    // The 4 cells below will be null in compact/medium screen sizes when use_material3 flag is ON.
+    private final @Nullable HeaderCell mSummaryCell;
+    private final @Nullable HeaderCell mSizeCell;
+    private final @Nullable HeaderCell mFileTypeCell;
+    private final @Nullable HeaderCell mDateCell;
     private final SortModel mModel;
     // We assign this here porque each method reference creates a new object
     // instance (which is wasteful).
@@ -66,10 +67,18 @@ public final class TableHeaderController implements SortController.WidgetControl
 
     private void onModelUpdate(SortModel model, int updateTypeUnspecified) {
         bindCell(mTitleCell, SortModel.SORT_DIMENSION_ID_TITLE);
-        bindCell(mSummaryCell, SortModel.SORT_DIMENSION_ID_SUMMARY);
-        bindCell(mSizeCell, SortModel.SORT_DIMENSION_ID_SIZE);
-        bindCell(mFileTypeCell, SortModel.SORT_DIMENSION_ID_FILE_TYPE);
-        bindCell(mDateCell, SortModel.SORT_DIMENSION_ID_DATE);
+        if (mSummaryCell != null) {
+            bindCell(mSummaryCell, SortModel.SORT_DIMENSION_ID_SUMMARY);
+        }
+        if (mSizeCell != null) {
+            bindCell(mSizeCell, SortModel.SORT_DIMENSION_ID_SIZE);
+        }
+        if (mFileTypeCell != null) {
+            bindCell(mFileTypeCell, SortModel.SORT_DIMENSION_ID_FILE_TYPE);
+        }
+        if (mDateCell != null) {
+            bindCell(mDateCell, SortModel.SORT_DIMENSION_ID_DATE);
+        }
     }
 
     @Override
-- 
cgit v1.2.3-59-g8ed1b