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

Commit 89c4d019 authored by Wenbo Jie's avatar Wenbo Jie
Browse files

[DocsUI M3] Add navigation rail layout for medium size screen 

* Add a new layout nav_rail_layout for medium size >=600 && <900
  which also uses DrawerLayout but adds a narrower sidebar with
  icon/label only.
* Reuse RootsFragment to render Navigation rail so we can keep
  all existing functionality for navigation drawer on navigation
  rail. We store the layout ID on the RootsFragment argument to
  distinguish which layout is rendering, in medium size layout,
  2 instances of RootsFragment will be rendered: one for the
  navigation drawer, the other for navigation rail.
* A new layout nav_rail_item_root is created to cater the layout
  for navigation rail items.
* Extend the existing navigation drawer item classes to create
  the corresponding navigation rail item classes so we can use
  different layout for navigation rail items.

Check the bug item for demo.

Bug: 381958615
Test: Manual inpsection
Flag: com.android.documentsui.flags.use_material3
Change-Id: I8fac4646031e248020755327caed6b427b5d08cf
parent 28fdd411

res/flag(com.android.documentsui.flags.use_material3)/color/nav_rail_item_text_color.xml

0 → 100644
+21 −0
Original line number Diff line number Diff line 
<?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

  -->



<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_activated="true" android:color="?attr/colorSecondary" />

    <item android:color="?attr/colorOnSurfaceVariant" />

</selector>

res/flag(com.android.documentsui.flags.use_material3)/drawable/nav_rail_item_background.xml

0 → 100644
+23 −0
Original line number Diff line number Diff line 
<?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.

-->



<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- By default the nav rail item has a grey background when it's focused, but we need the

     background to be put on the icon inside, so we override the focus background color to be

     transparent here.

     -->

    <item android:state_focused="true" android:drawable="@android:color/transparent" />

</selector>
 
 No newline at end of file

res/flag(com.android.documentsui.flags.use_material3)/drawable/nav_rail_item_icon_background.xml

0 → 100644
+145 −0
Original line number Diff line number Diff line 
<?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.

-->



<ripple

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:color="@color/item_root_ripple_color">



    <!-- The mask below only works for the ripple itself, doesn't work for other <item>s, we

         need to explicitly apply the drawable if the other items also need this mask. -->

    <item

        android:id="@android:id/mask"

        android:drawable="@drawable/nav_rail_item_icon_mask"/>



    <item>

        <selector>

            <!-- Selected (activated). -->

            <!-- Highlight: when dragging files over the item. -->

            <item

                android:state_activated="true"

                app:state_highlighted="true">

                <layer-list>

                    <item>

                        <shape>

                            <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                            <solid android:color="?attr/colorSecondaryContainer" />

                        </shape>

                    </item>

                    <item>

                        <shape android:tint="?attr/colorOnSecondaryContainer">

                            <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                            <solid android:color="@color/overlay_color_percentage_10" />

                        </shape>

                    </item>

                </layer-list>

            </item>

            <item

                android:state_activated="true"

                android:state_pressed="true">

                <layer-list>

                    <item>

                        <shape>

                            <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                            <solid android:color="?attr/colorSecondaryContainer" />

                        </shape>

                    </item>

                    <item>

                        <shape android:tint="?attr/colorOnSecondaryContainer">

                            <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                            <solid android:color="@color/overlay_color_percentage_10" />

                        </shape>

                    </item>

                </layer-list>

            </item>

            <item

                android:state_activated="true"

                android:state_focused="true">

                <layer-list>

                    <item>

                        <shape>

                            <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                            <solid android:color="?attr/colorSecondaryContainer" />

                        </shape>

                    </item>

                    <item>

                        <shape>

                            <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                            <stroke

                                android:width="@dimen/focus_ring_width"

                                android:color="?attr/colorSecondary" />

                        </shape>

                    </item>

                </layer-list>

            </item>

            <item

                android:state_activated="true"

                android:state_hovered="true">

                <layer-list>

                    <item>

                        <shape>

                            <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                            <solid android:color="?attr/colorSecondaryContainer" />

                        </shape>

                    </item>

                    <item>

                        <shape android:tint="?attr/colorOnSecondaryContainer">

                            <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                            <solid android:color="@color/overlay_color_percentage_10" />

                        </shape>

                    </item>

                </layer-list>

            </item>

            <item android:state_activated="true">

                <shape>

                    <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                    <solid android:color="?attr/colorSecondaryContainer" />

                </shape>

            </item>



            <!-- Unselected. -->

            <item app:state_highlighted="true">

                <shape android:tint="?attr/colorOnSurface">

                    <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                    <solid android:color="@color/overlay_color_percentage_10" />

                </shape>

            </item>

            <item android:state_pressed="true">

                <shape android:tint="?attr/colorOnSurface">

                    <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                    <solid android:color="@color/overlay_color_percentage_10" />

                </shape>

            </item>

            <item android:state_focused="true">

                <shape>

                    <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                    <stroke

                        android:width="@dimen/focus_ring_width"

                        android:color="?attr/colorSecondary" />

                </shape>

            </item>

            <item android:state_hovered="true">

                <shape android:tint="?attr/colorOnSurface">

                    <corners android:radius="@dimen/nav_rail_item_icon_bg_radius" />

                    <solid android:color="@color/overlay_color_percentage_10" />

                </shape>

            </item>



            <!-- Default: use the container background. -->

            <item android:drawable="@android:color/transparent" />

        </selector>

    </item>

</ripple>
 
 No newline at end of file

res/flag(com.android.documentsui.flags.use_material3)/drawable/nav_rail_item_icon_mask.xml

0 → 100644
+21 −0
Original line number Diff line number Diff line 
<?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">

    <corners android:radius="@dimen/nav_rail_item_icon_bg_radius"/>

    <!-- The color here doesn't matter, it's just being used as a mask. -->

    <solid android:color="@android:color/white" />

</shape>
 
 No newline at end of file

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

0 → 100644
+25 −0
Original line number Diff line number Diff line 
<?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.

-->



<com.android.documentsui.sidebar.RootsList xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/roots_list"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:keyboardNavigationCluster="true"

    android:divider="@null"

    android:focusable="false"

    android:descendantFocusability="afterDescendants"

    style="@style/NavRailStyle"/>