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

Commit 8b029bc3 authored by Cassy Chun-Crogan's avatar Cassy Chun-Crogan
Browse files

[DocsUI M3] Set spacing for grid items and outer grid bounds 

This CL fixes the spacing both between items and between the
outer items and the grid bounds when there's a perfect fit.

A follow up Cl will handle distributing extra space.

Update the size of the items to be 144 x 116.

There needs to be 16 dp between items so set the margin of each
item to be 8 dp. Also remove the padding on the items as the
spacing betweens is now purely defined within the margins.

There also needs to be padding on the edges of the grid as defined in figma.
This is the space between the outer items and the grid bounds and it is
difference for compact vs expanded windows. Since we don't want the 8 dp
margin to be added in addition to this outer padding, subtract the
margin from the outer padding.

Also in updateLayout() make sure to calculate the padding on the edges
of the grid (the mRecView padding) before calculating to the column
count. Previously the column count was based on the old padding.

See bug for demo and diagrams.

Bug: 404978549
Test: m DocumentsUIGoogle && manual inspection
Flag: com.android.documentsui.flags.use_material3
Change-Id: Ia2c737c25c045191378b16305dab0fab80179862
parent 92254810

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

+1 −4
Original line number Diff line number Diff line
@@ -22,10 +22,7 @@ 
    android:layout_margin="@dimen/grid_item_margin"

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

    android:focusable="true">



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

         visibility of which is controlled by code in

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

+5 −0
Original line number Diff line number Diff line
@@ -25,6 +25,11 @@ 


    <dimen name="toolbar_padding_start">@dimen/main_container_padding_start</dimen>



    <dimen name="grid_container_padding_left">@dimen/space_small_4</dimen>

    <dimen name="grid_container_padding_top">@dimen/space_extra_small_4</dimen>

    <dimen name="grid_container_padding_right">@dimen/space_small_4</dimen>

    <dimen name="grid_container_padding_bottom">@dimen/space_extra_small_4</dimen>



    <dimen name="list_container_padding">@dimen/space_extra_small_6</dimen>



    <!-- list_container_padding + list_item_padding_start -->

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

+7 −6
Original line number Diff line number Diff line
@@ -43,10 +43,14 @@ 
    <dimen name="progress_bar_height">4dp</dimen>

    <fraction name="grid_scale_min">85%</fraction>

    <fraction name="grid_scale_max">200%</fraction>

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

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

    <dimen name="grid_width">144dp</dimen>

    <dimen name="grid_height">116dp</dimen>

    <dimen name="grid_section_separator_height">0dp</dimen>

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

    <dimen name="grid_item_margin">@dimen/space_extra_small_4</dimen>

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

    <dimen name="grid_container_padding_top">@dimen/space_extra_small_4</dimen>

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

    <dimen name="grid_container_padding_bottom">@dimen/space_extra_small_4</dimen>

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

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

    <dimen name="list_item_height">56dp</dimen>
@@ -72,9 +76,6 @@ 
    <dimen name="breadcrumb_item_arrow_size">16dp</dimen>

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

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

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

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

    <dimen name="grid_item_padding_top">@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>

src/com/android/documentsui/dirlist/DirectoryFragment.java

+36 −6
Original line number Diff line number Diff line
@@ -829,14 +829,44 @@ public class DirectoryFragment extends Fragment implements SwipeRefreshLayout.On 
     */

    private void updateLayout(@ViewMode int mode) {

        mMode = mode;

        mAppBarHeight = getAppBarLayoutHeight();

        mSaveLayoutHeight = getSaveLayoutHeight();



        if (isUseMaterial3FlagEnabled()) {

            if (mode == MODE_GRID) {

                int itemMarg = getResources().getDimensionPixelSize(R.dimen.grid_item_margin);

                // Subtract the item's margin since we don't want to double count the margin in the

                // distance between the outer grid items and the grid boundary.

                int leftPad = getResources().getDimensionPixelSize(

                        R.dimen.grid_container_padding_left)

                        - itemMarg;

                int topPad = getResources().getDimensionPixelSize(

                        R.dimen.grid_container_padding_top)

                        - itemMarg;

                int rightPad = getResources().getDimensionPixelSize(

                        R.dimen.grid_container_padding_right) - itemMarg;

                int botPad = getResources().getDimensionPixelSize(

                        R.dimen.grid_container_padding_bottom)

                        - itemMarg;

                mRecView.setPadding(leftPad, topPad + mAppBarHeight, rightPad,

                        botPad + mSaveLayoutHeight);

            } else {

                int pad = getDirectoryPadding(mode);

                mRecView.setPadding(pad, mAppBarHeight, pad, mSaveLayoutHeight);

            }

            mColumnCount = calculateColumnCount(mode);

            if (mLayout != null) {

                mLayout.setSpanCount(mColumnCount);

            }

        } else {

            mColumnCount = calculateColumnCount(mode);

            if (mLayout != null) {

                mLayout.setSpanCount(mColumnCount);

            }

            int pad = getDirectoryPadding(mode);

        mAppBarHeight = getAppBarLayoutHeight();

        mSaveLayoutHeight = getSaveLayoutHeight();

            mRecView.setPadding(pad, mAppBarHeight, pad, mSaveLayoutHeight);

        }



        mRecView.requestLayout();

        mIconHelper.setViewMode(mode);