Skip to content

Commit 938105a

Browse files
afohrmanimhappi
afohrman
authored and
imhappi
committed
[Adaptive] [Side Sheet] Added detached variants of standard and coplanar 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
1 parent 2fd2d66 commit 938105a

File tree

10 files changed

+254
-2
lines changed

10 files changed

+254
-2
lines changed

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,19 @@ public View onCreateDemoView(
7272
setSideSheetCallback(
7373
standardRightSideSheet, R.id.side_sheet_state_text, R.id.side_sheet_slide_offset_text);
7474

75+
// Set up detached standard side sheet.
76+
View detachedStandardSideSheet =
77+
setUpSideSheet(
78+
view,
79+
R.id.standard_detached_side_sheet_container,
80+
R.id.show_standard_detached_side_sheet_button,
81+
R.id.detached_close_icon_button);
82+
83+
setSideSheetCallback(
84+
detachedStandardSideSheet,
85+
R.id.detached_side_sheet_state_text,
86+
R.id.detached_side_sheet_slide_offset_text);
87+
7588
// Set up vertically scrolling side sheet.
7689
View verticallyScrollingSideSheet =
7790
setUpSideSheet(
@@ -123,6 +136,19 @@ public View onCreateDemoView(
123136
R.id.coplanar_side_sheet_state_text,
124137
R.id.coplanar_side_sheet_slide_offset_text);
125138

139+
// Set up detached coplanar side sheet.
140+
View detachedCoplanarSideSheet =
141+
setUpSideSheet(
142+
view,
143+
R.id.coplanar_detached_side_sheet_container,
144+
R.id.show_coplanar_detached_side_sheet_button,
145+
R.id.coplanar_detached_side_sheet_close_icon_button);
146+
147+
setSideSheetCallback(
148+
detachedCoplanarSideSheet,
149+
R.id.coplanar_detached_side_sheet_state_text,
150+
R.id.coplanar_detached_side_sheet_slide_offset_text);
151+
126152
return view;
127153
}
128154

‎catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_content_coplanar_detached.xml‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<?xml version="1.0" encoding="utf-8"?><!--
2+
Copyright 2022 The Android Open Source Project
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
17+
xmlns:app="http://schemas.android.com/apk/res-auto"
18+
xmlns:tools="http://schemas.android.com/tools"
19+
android:layout_width="match_parent"
20+
android:layout_height="match_parent"
21+
android:padding="24dp"
22+
android:gravity="center_horizontal"
23+
android:orientation="vertical">
24+
25+
<Button
26+
android:id="@+id/coplanar_detached_side_sheet_close_icon_button"
27+
style="?attr/materialIconButtonStyle"
28+
android:layout_width="wrap_content"
29+
android:layout_height="wrap_content"
30+
android:contentDescription="@string/cat_sidesheet_close_button_content_desc"
31+
app:icon="@drawable/ic_close_vd_theme_24px"
32+
app:layout_constraintEnd_toEndOf="parent"
33+
app:layout_constraintTop_toTopOf="parent"
34+
tools:ignore="ContentDescription" />
35+
36+
<TextView
37+
android:id="@+id/coplanar_detached_side_sheet_title_text"
38+
android:layout_width="0dp"
39+
android:layout_height="wrap_content"
40+
android:text="@string/cat_sidesheet_coplanar_detached_title"
41+
android:textAppearance="?attr/textAppearanceHeadlineSmall"
42+
app:layout_constraintEnd_toStartOf="@id/coplanar_detached_side_sheet_close_icon_button"
43+
app:layout_constraintStart_toStartOf="parent"
44+
app:layout_constraintTop_toTopOf="parent" />
45+
46+
<androidx.core.widget.NestedScrollView
47+
android:layout_width="0dp"
48+
android:layout_height="wrap_content"
49+
app:layout_constraintEnd_toEndOf="parent"
50+
app:layout_constraintStart_toStartOf="parent"
51+
app:layout_constraintTop_toBottomOf="@id/coplanar_detached_side_sheet_title_text">
52+
53+
<LinearLayout
54+
android:layout_width="match_parent"
55+
android:layout_height="wrap_content"
56+
android:orientation="vertical">
57+
58+
<TextView
59+
android:id="@+id/coplanar_detached_side_sheet_state_text"
60+
android:layout_width="wrap_content"
61+
android:layout_height="wrap_content"
62+
android:text="@string/cat_sidesheet_state_settling"
63+
android:textAppearance="?attr/textAppearanceHeadlineSmall" />
64+
65+
<TextView
66+
android:id="@+id/coplanar_detached_side_sheet_slide_offset_text"
67+
android:layout_width="wrap_content"
68+
android:layout_height="wrap_content"
69+
android:text="@string/cat_sidesheet_slide_offset_text"
70+
android:textAppearance="?attr/textAppearanceHeadlineSmall" />
71+
72+
<TextView
73+
android:layout_width="wrap_content"
74+
android:layout_height="wrap_content"
75+
android:text="@string/cat_sidesheet_filler_text" />
76+
</LinearLayout>
77+
</androidx.core.widget.NestedScrollView>
78+
</androidx.constraintlayout.widget.ConstraintLayout>

‎catalog/java/io/material/catalog/sidesheet/res/layout/cat_sidesheet_detached_content.xml‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<?xml version="1.0" encoding="utf-8"?><!--
2+
Copyright 2022 The Android Open Source Project
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
17+
xmlns:app="http://schemas.android.com/apk/res-auto"
18+
xmlns:tools="http://schemas.android.com/tools"
19+
android:layout_width="match_parent"
20+
android:layout_height="match_parent"
21+
android:padding="24dp"
22+
android:clickable="true"
23+
android:focusable="true"
24+
android:gravity="center_horizontal"
25+
android:orientation="vertical">
26+
27+
<Button
28+
android:id="@+id/detached_close_icon_button"
29+
style="?attr/materialIconButtonStyle"
30+
android:layout_width="wrap_content"
31+
android:layout_height="wrap_content"
32+
android:contentDescription="@string/cat_sidesheet_close_button_content_desc"
33+
app:icon="@drawable/ic_close_vd_theme_24px"
34+
app:layout_constraintEnd_toEndOf="parent"
35+
app:layout_constraintTop_toTopOf="@id/detached_side_sheet_title_text"
36+
tools:ignore="ContentDescription" />
37+
38+
<TextView
39+
android:id="@+id/detached_side_sheet_title_text"
40+
android:layout_width="0dp"
41+
android:layout_height="wrap_content"
42+
android:text="@string/cat_sidesheet_standard_detached_title"
43+
android:textAppearance="?attr/textAppearanceHeadlineSmall"
44+
app:layout_constraintEnd_toStartOf="@id/detached_close_icon_button"
45+
app:layout_constraintStart_toStartOf="parent"
46+
app:layout_constraintTop_toTopOf="parent" />
47+
48+
<TextView
49+
android:id="@+id/detached_side_sheet_state_text"
50+
android:layout_width="wrap_content"
51+
android:layout_height="wrap_content"
52+
android:text="@string/cat_sidesheet_state_settling"
53+
android:textAppearance="?attr/textAppearanceHeadlineSmall"
54+
app:layout_constraintEnd_toEndOf="parent"
55+
app:layout_constraintStart_toStartOf="parent"
56+
app:layout_constraintTop_toBottomOf="@id/detached_side_sheet_title_text" />
57+
58+
<TextView
59+
android:id="@+id/detached_side_sheet_slide_offset_text"
60+
android:layout_width="wrap_content"
61+
android:layout_height="wrap_content"
62+
android:text="@string/cat_sidesheet_slide_offset_text"
63+
android:textAppearance="?attr/textAppearanceHeadlineSmall"
64+
app:layout_constraintEnd_toEndOf="parent"
65+
app:layout_constraintStart_toStartOf="parent"
66+
app:layout_constraintTop_toBottomOf="@id/detached_side_sheet_state_text" />
67+
68+
</androidx.constraintlayout.widget.ConstraintLayout>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
android:id="@+id/cat_sidesheet_coordinator_layout"
2121
android:layout_width="match_parent"
2222
android:layout_height="match_parent"
23+
app:backgroundTint="?attr/colorSurfaceVariant"
2324
android:fitsSystemWindows="true">
2425

2526
<com.google.android.material.appbar.AppBarLayout
@@ -53,6 +54,12 @@
5354
android:layout_height="wrap_content"
5455
android:layout_marginTop="16dp"
5556
android:text="@string/cat_sidesheet_standard_button_show_text" />
57+
<Button
58+
android:id="@+id/show_standard_detached_side_sheet_button"
59+
android:layout_width="wrap_content"
60+
android:layout_height="wrap_content"
61+
android:layout_marginTop="16dp"
62+
android:text="@string/cat_sidesheet_standard_detached_button_show_text" />
5663
<Button
5764
android:id="@+id/show_vertically_scrolling_side_sheet_button"
5865
android:layout_width="wrap_content"
@@ -71,6 +78,12 @@
7178
android:layout_height="wrap_content"
7279
android:layout_marginTop="16dp"
7380
android:text="@string/cat_sidesheet_coplanar_button_show_text" />
81+
<Button
82+
android:id="@+id/show_coplanar_detached_side_sheet_button"
83+
android:layout_width="wrap_content"
84+
android:layout_height="wrap_content"
85+
android:layout_marginTop="16dp"
86+
android:text="@string/cat_sidesheet_coplanar_detached_button_show_text" />
7487
<TextView
7588
android:layout_width="wrap_content"
7689
android:layout_height="wrap_content"
@@ -89,6 +102,17 @@
89102
<include layout="@layout/cat_sidesheet_content" />
90103
</LinearLayout>
91104

105+
<LinearLayout
106+
android:id="@+id/standard_detached_side_sheet_container"
107+
style="@style/Widget.Material3.SideSheet.Detached"
108+
android:layout_width="256dp"
109+
android:layout_height="match_parent"
110+
android:orientation="vertical"
111+
app:layout_behavior="@string/side_sheet_behavior"
112+
tools:targetApi="lollipop">
113+
<include layout="@layout/cat_sidesheet_detached_content" />
114+
</LinearLayout>
115+
92116
<LinearLayout
93117
android:id="@+id/vertically_scrolling_side_sheet_container"
94118
style="@style/Widget.Material3.SideSheet"
@@ -112,4 +136,16 @@
112136
<include layout="@layout/cat_sidesheet_content_coplanar" />
113137
</LinearLayout>
114138

139+
<LinearLayout
140+
android:id="@+id/coplanar_detached_side_sheet_container"
141+
style="@style/Widget.Material3.SideSheet.Detached"
142+
android:layout_width="256dp"
143+
android:layout_height="match_parent"
144+
android:orientation="vertical"
145+
app:coplanarSiblingViewId="@id/nested_scroll_view"
146+
app:layout_behavior="@string/side_sheet_behavior"
147+
tools:targetApi="lollipop">
148+
<include layout="@layout/cat_sidesheet_content_coplanar_detached" />
149+
</LinearLayout>
150+
115151
</androidx.coordinatorlayout.widget.CoordinatorLayout>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,13 @@
5050
Show Standard Side Sheet
5151
</string>
5252

53+
<string name="cat_sidesheet_standard_detached_title" description="Title of the detached standard side sheet. [CHAR_LIMIT=NONE]">
54+
Detached Standard Side Sheet
55+
</string>
56+
<string name="cat_sidesheet_standard_detached_button_show_text" description="Label of button which shows the detached standard side sheet. [CHAR_LIMIT=NONE]">
57+
Show Detached Standard Side Sheet
58+
</string>
59+
5360
<string name="cat_sidesheet_standard_vertically_scrolling_button_show_text" description="Label of button which shows the standard side sheet. [CHAR_LIMIT=NONE]">
5461
Show Vertically Scrolling Standard Side Sheet
5562
</string>
@@ -68,6 +75,13 @@
6875
Show Coplanar Side Sheet
6976
</string>
7077

78+
<string name="cat_sidesheet_coplanar_detached_title" description="Title of the detached coplanar side sheet. [CHAR_LIMIT=NONE]">
79+
Detached Coplanar Side Sheet
80+
</string>
81+
<string name="cat_sidesheet_coplanar_detached_button_show_text" description="Label of button which shows the detached coplanar side sheet. [CHAR_LIMIT=NONE]">
82+
Show Detached Coplanar Side Sheet
83+
</string>
84+
7185
<string name="cat_sidesheet_close_button_content_desc" description="Content description for the button to hide the side sheet. [CHAR_LIMIT=NONE]">
7286
Close sheet
7387
</string>

‎lib/java/com/google/android/material/sidesheet/RightSheetDelegate.java‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ int getHiddenOffset() {
5757
@Override
5858
int getExpandedOffset() {
5959
// Calculate the expanded offset based on the width of the content.
60-
return max(0, getHiddenOffset() - sheetBehavior.getChildWidth());
60+
return max(
61+
0, getHiddenOffset() - sheetBehavior.getChildWidth() - sheetBehavior.getInnerMargin());
6162
}
6263

6364
/** 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) {
121122

122123
@Override
123124
<V extends View> int getOutwardEdge(@NonNull V child) {
124-
return child.getLeft();
125+
return child.getLeft() - sheetBehavior.getInnerMargin();
125126
}
126127

127128
@Override
@@ -143,4 +144,9 @@ void updateCoplanarSiblingLayoutParams(
143144
coplanarSiblingLayoutParams.rightMargin = parentWidth - sheetLeft;
144145
}
145146
}
147+
148+
@Override
149+
int calculateInnerMargin(@NonNull MarginLayoutParams marginLayoutParams) {
150+
return marginLayoutParams.rightMargin;
151+
}
146152
}

‎lib/java/com/google/android/material/sidesheet/SheetDelegate.java‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,4 +82,10 @@ abstract int calculateTargetStateOnViewReleased(
8282
/** Set the coplanar sheet layout params depending on the screen size. */
8383
abstract void updateCoplanarSiblingLayoutParams(
8484
@NonNull MarginLayoutParams coplanarSiblingLayoutParams, int sheetLeft, int sheetRight);
85+
86+
/**
87+
* Calculates the margin on the inner side of the sheet based on the {@link MarginLayoutParams}.
88+
* For right based sheets, the inner margin would be the right margin.
89+
*/
90+
abstract int calculateInnerMargin(@NonNull MarginLayoutParams marginLayoutParams);
8591
}

‎lib/java/com/google/android/material/sidesheet/SideSheetBehavior.java‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ public class SideSheetBehavior<V extends View> extends CoordinatorLayout.Behavio
103103

104104
private int childWidth;
105105
private int parentWidth;
106+
private int innerMargin;
106107

107108
@Nullable private WeakReference<V> viewRef;
108109
@Nullable private WeakReference<View> coplanarSiblingViewRef;
@@ -305,6 +306,9 @@ public boolean onLayoutChild(
305306
parentWidth = parent.getWidth();
306307
childWidth = child.getWidth();
307308

309+
MarginLayoutParams margins = (MarginLayoutParams) child.getLayoutParams();
310+
innerMargin = margins != null ? sheetDelegate.calculateInnerMargin(margins) : 0;
311+
308312
int currentOffset = calculateCurrentOffset(savedOutwardEdge, child);
309313

310314
ViewCompat.offsetLeftAndRight(child, currentOffset);
@@ -337,6 +341,10 @@ int getParentWidth() {
337341
return parentWidth;
338342
}
339343

344+
int getInnerMargin() {
345+
return innerMargin;
346+
}
347+
340348
private int calculateCurrentOffset(int savedOutwardEdge, V child) {
341349
int currentOffset;
342350

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
-->
1717
<resources>
1818
<dimen name="m3_side_sheet_width">256dp</dimen>
19+
<dimen name="m3_side_sheet_margin_detached">16dp</dimen>
1920

2021
<dimen name="m3_side_sheet_standard_elevation">@dimen/m3_sys_elevation_level0</dimen>
2122
<dimen name="m3_side_sheet_modal_elevation">@dimen/m3_sys_elevation_level1</dimen>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,15 @@
2828
<item name="android:elevation" tools:ignore="NewApi">@dimen/m3_side_sheet_standard_elevation</item>
2929
</style>
3030

31+
<style name="Widget.Material3.SideSheet.Detached">
32+
<!-- Layout_* attributes break when set via a default style, but it's ok to
33+
set layout_* attributes from this style, because this style always
34+
needs to be explicitly set on the behavior's associated View in the
35+
layout. -->
36+
<item name="android:layout_margin">@dimen/m3_side_sheet_margin_detached</item>
37+
<item name="shapeAppearance">?attr/shapeAppearanceLargeComponent</item>
38+
</style>
39+
3140
<!-- Style for the M3 Modal Side Sheet. -->
3241
<style name="Widget.Material3.SideSheet.Modal">
3342
<item name="android:elevation" tools:ignore="NewApi">@dimen/m3_side_sheet_modal_elevation</item>

0 commit comments

Comments
 (0)