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

Commit e599ddbd authored by Wenbo Jie's avatar Wenbo Jie
Browse files

[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
parent 5e1e9d11

res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/column_headers.xml

+92 −100
Original line number Diff line number Diff line
@@ -27,18 +27,11 @@ 
    android:orientation="horizontal"

    android:layout_width="match_parent"

    android:layout_height="@dimen/doc_header_height"

    android:paddingHorizontal="@dimen/list_container_padding"

    android:visibility="gone">



    <LinearLayout

        android:layout_width="match_parent"

        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:orientation="horizontal">

    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"
@@ -134,4 +127,3 @@ 
        android:layout_height="@dimen/list_item_icon_size"

        android:layout_marginEnd="@dimen/list_item_icon_margin_end" />

</LinearLayout>
 
 No newline at end of file
 
</LinearLayout>
 
 No newline at end of file

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

+36 −3
Original line number Diff line number Diff line
@@ -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

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

+17 −6
Original line number Diff line number Diff line
@@ -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

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

+24 −13
Original line number Diff line number Diff line
@@ -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. -->

            <LinearLayout

                android:id="@+id/bottom_container"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:orientation="vertical"

                android:layout_gravity="bottom">



                <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:layout_gravity="bottom"

                android:background="?attr/colorSurfaceBright"

                />

                    android:background="?attr/colorSurfaceBright" />



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

                />

                    android:background="?android:attr/colorBackgroundFloating" />



            </LinearLayout>



            <!-- Top section: toolbar, search chips, profile tab -->

            <include layout="@layout/directory_app_bar"/>

res/flag(com.android.documentsui.flags.use_material3)/layout-w900dp/shared_cell_content.xml→res/flag(com.android.documentsui.flags.use_material3)/layout/shared_cell_content.xml

+0 −0

File moved.

View file