[Adaptive] [Side Sheet] Added detached variants of standard and copla…

…nar sheets. Added logic for an innerMargin to SideSheetBehavior and delegates and incorporated innerMargin into the sheet offset calculations to account for the extra spacing and avoid a jump when dragging the sheet to STATE_EXPANDED. Also added a colored background to the catalog demo in order to see the corners of the sheet. PiperOrigin-RevId: 495701453
material-components · Dec 16, 2022 · 938105a · 938105a
1 parent 2fd2d66
commit 938105a
Show file tree

Hide file tree

Showing 10 changed files with 254 additions and 2 deletions.
diff --git a/catalog/java/io/material/catalog/sidesheet/SideSheetMainDemoFragment.java b/catalog/java/io/material/catalog/sidesheet/SideSheetMainDemoFragment.java
@@ -72,6 +72,19 @@ public View onCreateDemoView(
     setSideSheetCallback(
         standardRightSideSheet, R.id.side_sheet_state_text, R.id.side_sheet_slide_offset_text);
 
+    // Set up detached standard side sheet.
+    View detachedStandardSideSheet =
+        setUpSideSheet(
+            view,
+            R.id.standard_detached_side_sheet_container,
+            R.id.show_standard_detached_side_sheet_button,
+            R.id.detached_close_icon_button);
+
+    setSideSheetCallback(
+        detachedStandardSideSheet,
+        R.id.detached_side_sheet_state_text,
+        R.id.detached_side_sheet_slide_offset_text);
+
     // Set up vertically scrolling side sheet.
     View verticallyScrollingSideSheet =
         setUpSideSheet(
@@ -123,6 +136,19 @@ public View onCreateDemoView(
         R.id.coplanar_side_sheet_state_text,
         R.id.coplanar_side_sheet_slide_offset_text);
 
+    // Set up detached coplanar side sheet.
+    View detachedCoplanarSideSheet =
+        setUpSideSheet(
+            view,
+            R.id.coplanar_detached_side_sheet_container,
+            R.id.show_coplanar_detached_side_sheet_button,
+            R.id.coplanar_detached_side_sheet_close_icon_button);
+
+    setSideSheetCallback(
+        detachedCoplanarSideSheet,
+        R.id.coplanar_detached_side_sheet_state_text,
+        R.id.coplanar_detached_side_sheet_slide_offset_text);
+
     return view;
   }
 

diff --git a/...java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_content_coplanar_detached.xml b/...java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_content_coplanar_detached.xml
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  Copyright 2022 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.
+  -->
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
+  xmlns:tools="http://schemas.android.com/tools"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent"
+  android:padding="24dp"
+  android:gravity="center_horizontal"
+  android:orientation="vertical">
+
+  <Button
+    android:id="@+id/coplanar_detached_side_sheet_close_icon_button"
+    style="?attr/materialIconButtonStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:contentDescription="@string/cat_sidesheet_close_button_content_desc"
+    app:icon="@drawable/ic_close_vd_theme_24px"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintTop_toTopOf="parent"
+    tools:ignore="ContentDescription" />
+
+  <TextView
+    android:id="@+id/coplanar_detached_side_sheet_title_text"
+    android:layout_width="0dp"
+    android:layout_height="wrap_content"
+    android:text="@string/cat_sidesheet_coplanar_detached_title"
+    android:textAppearance="?attr/textAppearanceHeadlineSmall"
+    app:layout_constraintEnd_toStartOf="@id/coplanar_detached_side_sheet_close_icon_button"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent" />
+
+  <androidx.core.widget.NestedScrollView
+    android:layout_width="0dp"
+    android:layout_height="wrap_content"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toBottomOf="@id/coplanar_detached_side_sheet_title_text">
+
+    <LinearLayout
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:orientation="vertical">
+
+      <TextView
+        android:id="@+id/coplanar_detached_side_sheet_state_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/cat_sidesheet_state_settling"
+        android:textAppearance="?attr/textAppearanceHeadlineSmall" />
+
+      <TextView
+        android:id="@+id/coplanar_detached_side_sheet_slide_offset_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/cat_sidesheet_slide_offset_text"
+        android:textAppearance="?attr/textAppearanceHeadlineSmall" />
+
+      <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/cat_sidesheet_filler_text" />
+    </LinearLayout>
+  </androidx.core.widget.NestedScrollView>
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_detached_content.xml b/catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_detached_content.xml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  Copyright 2022 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.
+  -->
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
+  xmlns:tools="http://schemas.android.com/tools"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent"
+  android:padding="24dp"
+  android:clickable="true"
+  android:focusable="true"
+  android:gravity="center_horizontal"
+  android:orientation="vertical">
+
+  <Button
+    android:id="@+id/detached_close_icon_button"
+    style="?attr/materialIconButtonStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:contentDescription="@string/cat_sidesheet_close_button_content_desc"
+    app:icon="@drawable/ic_close_vd_theme_24px"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintTop_toTopOf="@id/detached_side_sheet_title_text"
+    tools:ignore="ContentDescription" />
+
+  <TextView
+    android:id="@+id/detached_side_sheet_title_text"
+    android:layout_width="0dp"
+    android:layout_height="wrap_content"
+    android:text="@string/cat_sidesheet_standard_detached_title"
+    android:textAppearance="?attr/textAppearanceHeadlineSmall"
+    app:layout_constraintEnd_toStartOf="@id/detached_close_icon_button"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent" />
+
+  <TextView
+    android:id="@+id/detached_side_sheet_state_text"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/cat_sidesheet_state_settling"
+    android:textAppearance="?attr/textAppearanceHeadlineSmall"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toBottomOf="@id/detached_side_sheet_title_text" />
+
+  <TextView
+    android:id="@+id/detached_side_sheet_slide_offset_text"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/cat_sidesheet_slide_offset_text"
+    android:textAppearance="?attr/textAppearanceHeadlineSmall"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toBottomOf="@id/detached_side_sheet_state_text" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_fragment.xml b/catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_fragment.xml
@@ -20,6 +20,7 @@
   android:id="@+id/cat_sidesheet_coordinator_layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
+  app:backgroundTint="?attr/colorSurfaceVariant"
   android:fitsSystemWindows="true">
 
   <com.google.android.material.appbar.AppBarLayout
@@ -53,6 +54,12 @@
         android:layout_height="wrap_content"
         android:layout_marginTop="16dp"
         android:text="@string/cat_sidesheet_standard_button_show_text" />
+      <Button
+        android:id="@+id/show_standard_detached_side_sheet_button"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="@string/cat_sidesheet_standard_detached_button_show_text" />
       <Button
         android:id="@+id/show_vertically_scrolling_side_sheet_button"
         android:layout_width="wrap_content"
@@ -71,6 +78,12 @@
         android:layout_height="wrap_content"
         android:layout_marginTop="16dp"
         android:text="@string/cat_sidesheet_coplanar_button_show_text" />
+      <Button
+        android:id="@+id/show_coplanar_detached_side_sheet_button"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="@string/cat_sidesheet_coplanar_detached_button_show_text" />
       <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
@@ -89,6 +102,17 @@
     <include layout="@layout/cat_sidesheet_content" />
   </LinearLayout>
 
+  <LinearLayout
+    android:id="@+id/standard_detached_side_sheet_container"
+    style="@style/Widget.Material3.SideSheet.Detached"
+    android:layout_width="256dp"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    app:layout_behavior="@string/side_sheet_behavior"
+    tools:targetApi="lollipop">
+    <include layout="@layout/cat_sidesheet_detached_content" />
+  </LinearLayout>
+
   <LinearLayout
     android:id="@+id/vertically_scrolling_side_sheet_container"
     style="@style/Widget.Material3.SideSheet"
@@ -112,4 +136,16 @@
     <include layout="@layout/cat_sidesheet_content_coplanar" />
   </LinearLayout>
 
+  <LinearLayout
+    android:id="@+id/coplanar_detached_side_sheet_container"
+    style="@style/Widget.Material3.SideSheet.Detached"
+    android:layout_width="256dp"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    app:coplanarSiblingViewId="@id/nested_scroll_view"
+    app:layout_behavior="@string/side_sheet_behavior"
+    tools:targetApi="lollipop">
+    <include layout="@layout/cat_sidesheet_content_coplanar_detached" />
+  </LinearLayout>
+
 </androidx.coordinatorlayout.widget.CoordinatorLayout>
diff --git a/catalog/java/io/material/catalog/sidesheet/res/values/strings.xml b/catalog/java/io/material/catalog/sidesheet/res/values/strings.xml
@@ -50,6 +50,13 @@
     Show Standard Side Sheet
   </string>
 
+  <string name="cat_sidesheet_standard_detached_title" description="Title of the detached standard side sheet. [CHAR_LIMIT=NONE]">
+    Detached Standard Side Sheet
+  </string>
+  <string name="cat_sidesheet_standard_detached_button_show_text" description="Label of button which shows the detached standard side sheet. [CHAR_LIMIT=NONE]">
+    Show Detached Standard Side Sheet
+  </string>
+
   <string name="cat_sidesheet_standard_vertically_scrolling_button_show_text" description="Label of button which shows the standard side sheet. [CHAR_LIMIT=NONE]">
     Show Vertically Scrolling Standard Side Sheet
   </string>
@@ -68,6 +75,13 @@
     Show Coplanar Side Sheet
   </string>
 
+  <string name="cat_sidesheet_coplanar_detached_title" description="Title of the detached coplanar side sheet. [CHAR_LIMIT=NONE]">
+    Detached Coplanar Side Sheet
+  </string>
+  <string name="cat_sidesheet_coplanar_detached_button_show_text" description="Label of button which shows the detached coplanar side sheet. [CHAR_LIMIT=NONE]">
+    Show Detached Coplanar Side Sheet
+  </string>
+
   <string name="cat_sidesheet_close_button_content_desc" description="Content description for the button to hide the side sheet. [CHAR_LIMIT=NONE]">
     Close sheet
   </string>

diff --git a/lib/java/com/google/android/material/sidesheet/RightSheetDelegate.java b/lib/java/com/google/android/material/sidesheet/RightSheetDelegate.java
@@ -57,7 +57,8 @@ int getHiddenOffset() {
   @Override
   int getExpandedOffset() {
     // Calculate the expanded offset based on the width of the content.
-    return max(0, getHiddenOffset() - sheetBehavior.getChildWidth());
+    return max(
+        0, getHiddenOffset() - sheetBehavior.getChildWidth() - sheetBehavior.getInnerMargin());
   }
 
   /** Whether the view has been released from a drag close to the origin edge. */
@@ -121,7 +122,7 @@ boolean isSettling(View child, int state, boolean isReleasingView) {
 
   @Override
   <V extends View> int getOutwardEdge(@NonNull V child) {
-    return child.getLeft();
+    return child.getLeft() - sheetBehavior.getInnerMargin();
   }
 
   @Override
@@ -143,4 +144,9 @@ void updateCoplanarSiblingLayoutParams(
       coplanarSiblingLayoutParams.rightMargin = parentWidth - sheetLeft;
     }
   }
+
+  @Override
+  int calculateInnerMargin(@NonNull MarginLayoutParams marginLayoutParams) {
+    return marginLayoutParams.rightMargin;
+  }
 }
diff --git a/lib/java/com/google/android/material/sidesheet/SheetDelegate.java b/lib/java/com/google/android/material/sidesheet/SheetDelegate.java
@@ -82,4 +82,10 @@ abstract int calculateTargetStateOnViewReleased(
   /** Set the coplanar sheet layout params depending on the screen size. */
   abstract void updateCoplanarSiblingLayoutParams(
       @NonNull MarginLayoutParams coplanarSiblingLayoutParams, int sheetLeft, int sheetRight);
+
+  /**
+   * Calculates the margin on the inner side of the sheet based on the {@link MarginLayoutParams}.
+   * For right based sheets, the inner margin would be the right margin.
+   */
+  abstract int calculateInnerMargin(@NonNull MarginLayoutParams marginLayoutParams);
 }
diff --git a/lib/java/com/google/android/material/sidesheet/SideSheetBehavior.java b/lib/java/com/google/android/material/sidesheet/SideSheetBehavior.java
@@ -103,6 +103,7 @@ public class SideSheetBehavior<V extends View> extends CoordinatorLayout.Behavio
 
   private int childWidth;
   private int parentWidth;
+  private int innerMargin;
 
   @Nullable private WeakReference<V> viewRef;
   @Nullable private WeakReference<View> coplanarSiblingViewRef;
@@ -305,6 +306,9 @@ public boolean onLayoutChild(
     parentWidth = parent.getWidth();
     childWidth = child.getWidth();
 
+    MarginLayoutParams margins = (MarginLayoutParams) child.getLayoutParams();
+    innerMargin = margins != null ? sheetDelegate.calculateInnerMargin(margins) : 0;
+
     int currentOffset = calculateCurrentOffset(savedOutwardEdge, child);
 
     ViewCompat.offsetLeftAndRight(child, currentOffset);
@@ -337,6 +341,10 @@ int getParentWidth() {
     return parentWidth;
   }
 
+  int getInnerMargin() {
+    return innerMargin;
+  }
+
   private int calculateCurrentOffset(int savedOutwardEdge, V child) {
     int currentOffset;
 

diff --git a/lib/java/com/google/android/material/sidesheet/res/values/dimens.xml b/lib/java/com/google/android/material/sidesheet/res/values/dimens.xml
@@ -16,6 +16,7 @@
 -->
 <resources>
   <dimen name="m3_side_sheet_width">256dp</dimen>
+  <dimen name="m3_side_sheet_margin_detached">16dp</dimen>
 
   <dimen name="m3_side_sheet_standard_elevation">@dimen/m3_sys_elevation_level0</dimen>
   <dimen name="m3_side_sheet_modal_elevation">@dimen/m3_sys_elevation_level1</dimen>

diff --git a/lib/java/com/google/android/material/sidesheet/res/values/styles.xml b/lib/java/com/google/android/material/sidesheet/res/values/styles.xml
@@ -28,6 +28,15 @@
     <item name="android:elevation" tools:ignore="NewApi">@dimen/m3_side_sheet_standard_elevation</item>
   </style>
 
+  <style name="Widget.Material3.SideSheet.Detached">
+    <!-- Layout_* attributes break when set via a default style, but it's ok to
+         set layout_* attributes from this style, because this style always
+         needs to be explicitly set on the behavior's associated View in the
+         layout. -->
+    <item name="android:layout_margin">@dimen/m3_side_sheet_margin_detached</item>
+    <item name="shapeAppearance">?attr/shapeAppearanceLargeComponent</item>
+  </style>
+
   <!-- Style for the M3 Modal Side Sheet. -->
   <style name="Widget.Material3.SideSheet.Modal">
     <item name="android:elevation" tools:ignore="NewApi">@dimen/m3_side_sheet_modal_elevation</item>