[Adaptive][Side Sheet] Add detached variant of modal side sheet.

PiperOrigin-RevId: 495709828

Author: afohrman

catalog/java/io/material/catalog/sidesheet/SideSheetMainDemoFragment.java

@@ -32,6 +32,7 @@
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.annotation.StringRes;
+import androidx.annotation.StyleRes;
 import androidx.core.view.ViewCompat;
 import com.google.android.material.sidesheet.SideSheetBehavior;
 import com.google.android.material.sidesheet.SideSheetCallback;
@@ -107,7 +108,6 @@ public View onCreateDemoView(
         R.id.side_sheet_title_text,
         R.string.cat_sidesheet_modal_title);
 
-    sideSheetDialog.setDismissWithSheetAnimationEnabled(true);
     View showModalSideSheetButton = view.findViewById(R.id.show_modal_side_sheet_button);
     showModalSideSheetButton.setOnClickListener(v -> sideSheetDialog.show());
 
@@ -123,6 +123,34 @@ public View onCreateDemoView(
       modalSideSheetCloseIconButton.setOnClickListener(v -> sideSheetDialog.hide());
     }
 
+    // Set up detached modal side sheet.
+    SideSheetDialog detachedSideSheetDialog =
+        new SideSheetDialog(requireContext(), getDetachedModalThemeOverlayResId());
+
+    setUpModalSheet(
+        detachedSideSheetDialog,
+        R.layout.cat_sidesheet_content,
+        R.id.m3_side_sheet,
+        R.id.side_sheet_title_text,
+        R.string.cat_sidesheet_modal_detached_title);
+
+    View showDetachedModalSideSheetButton =
+        view.findViewById(R.id.show_modal_detached_side_sheet_button);
+    showDetachedModalSideSheetButton.setOnClickListener(v -> detachedSideSheetDialog.show());
+
+    detachedSideSheetDialog
+        .getBehavior()
+        .addCallback(
+            createSideSheetCallback(
+                detachedSideSheetDialog.findViewById(R.id.side_sheet_state_text),
+                detachedSideSheetDialog.findViewById(R.id.side_sheet_slide_offset_text)));
+
+    View detachedModalSideSheetCloseIconButton =
+        detachedSideSheetDialog.findViewById(R.id.close_icon_button);
+    if (detachedModalSideSheetCloseIconButton != null) {
+      detachedModalSideSheetCloseIconButton.setOnClickListener(v -> detachedSideSheetDialog.hide());
+    }
+
     // Set up coplanar side sheet.
     View coplanarSideSheet =
         setUpSideSheet(
@@ -216,6 +244,11 @@ int getDemoContent() {
     return R.layout.cat_sidesheet_fragment;
   }
 
+  @StyleRes
+  private int getDetachedModalThemeOverlayResId() {
+    return R.style.ThemeOverlay_Catalog_SideSheet_Modal_Detached;
+  }
+
   @Override
   public boolean shouldShowDefaultDemoActionBar() {
     return false;

catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_fragment.xml

@@ -72,6 +72,12 @@
         android:layout_height="wrap_content"
         android:layout_marginTop="16dp"
         android:text="@string/cat_sidesheet_modal_button_show_text" />
+      <Button
+        android:id="@+id/show_modal_detached_side_sheet_button"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="@string/cat_sidesheet_modal_detached_button_show_text" />
       <Button
         android:id="@+id/show_coplanar_side_sheet_button"
         android:layout_width="wrap_content"

catalog/java/io/material/catalog/sidesheet/res/values/strings.xml

@@ -68,6 +68,13 @@
     Show Modal Side Sheet
   </string>
 
+  <string name="cat_sidesheet_modal_detached_title" description="Title of the detached modal side sheet. [CHAR_LIMIT=NONE]">
+    Detached Modal Side Sheet
+  </string>
+  <string name="cat_sidesheet_modal_detached_button_show_text" description="Label of button which shows the detached modal side sheet. [CHAR_LIMIT=NONE]">
+    Show Detached Modal Side Sheet
+  </string>
+
   <string name="cat_sidesheet_coplanar_title" description="Title of the coplanar side sheet. [CHAR_LIMIT=NONE]">
     Coplanar Side Sheet
   </string>

catalog/java/io/material/catalog/sidesheet/res/values/themes.xml

@@ -0,0 +1,20 @@
+<?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.
+  -->
+<resources>
+  <style name="ThemeOverlay.Catalog.SideSheet.Modal.Detached" parent="ThemeOverlay.Material3.SideSheetDialog">
+    <item name="sideSheetModalStyle">@style/Widget.Material3.SideSheet.Modal.Detached</item>
+  </style>
+</resources>

lib/java/com/google/android/material/sidesheet/res/values/styles.xml

@@ -44,6 +44,12 @@
     <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.Material3.Corner.Left</item>
   </style>
 
+  <!-- Style for the M3 Detached Modal Side Sheet. -->
+  <style name="Widget.Material3.SideSheet.Modal.Detached">
+    <item name="android:layout_margin">@dimen/m3_side_sheet_margin_detached</item>
+    <item name="shapeAppearanceOverlay">@null</item>
+  </style>
+
   <!-- Animation used for the M3 Modal Side Sheet. -->
   <style name="Animation.Material3.SideSheetDialog" parent="Animation.AppCompat.Dialog">
     <item name="android:windowEnterAnimation">@anim/m3_side_sheet_slide_in</item>