Skip to content

Commit 4364c4f

Browse files
afohrmanpaulfthomas
authored andcommitted
[Adaptive][Side Sheet] Add standard side sheet documentation.
PiperOrigin-RevId: 482800309
1 parent 00c9ce5 commit 4364c4f

File tree

2 files changed

+206
-6
lines changed

2 files changed

+206
-6
lines changed

docs/components/SideSheet.md

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
<!--docs:
2+
title: "Side Sheets"
3+
layout: detail
4+
section: components
5+
excerpt: "Side sheets slide in from the side of the screen to reveal more content."
6+
iconId: side_sheet
7+
path: /catalog/side-sheet-behavior/
8+
-->
9+
10+
# Side Sheets
11+
12+
[Side sheets](https://material.io/components/sheets-side) are surfaces
13+
containing supplementary content that are anchored to the side of the screen.
14+
15+
See [Bottom Sheet documentation](BottomSheet.md) for documentation about
16+
[bottom sheets](https://m3.material.io/components/bottom-sheets/overview).
17+
18+
**Contents**
19+
20+
* [Using side sheets](#using-side-sheets)
21+
* [Standard side sheet](#standard-side-sheet)
22+
* [Anatomy and key properties](#anatomy-and-key-properties)
23+
* [Theming](#theming-side-sheets)
24+
25+
## Using side sheets
26+
27+
Before you can use Material side sheets, you need to add a dependency to the
28+
Material Components for Android library. For more information, go to the
29+
[Getting started](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md)
30+
page.
31+
32+
Standard side sheet basic usage:
33+
34+
```xml
35+
<androidx.coordinatorlayout.widget.CoordinatorLayout
36+
...>
37+
38+
<FrameLayout
39+
...
40+
android:id="@+id/standard_side_sheet"
41+
app:layout_behavior="com.google.android.material.sidesheet.SideSheetBehavior">
42+
43+
<!-- Side sheet content. -->
44+
45+
</FrameLayout>
46+
47+
</androidx.coordinatorlayout.widget.CoordinatorLayout>
48+
```
49+
50+
### Setting behavior
51+
52+
There are several attributes that can be used to adjust the behavior of
53+
standard side sheets.
54+
55+
Behavior attributes can be applied to standard side sheets in xml by setting
56+
them on a child `View` set to `app:layout_behavior`, or programmatically:
57+
58+
```kt
59+
val standardSideSheetBehavior = SideSheetBehavior.from(standardSideSheet)
60+
// Use this to programmatically apply behavior attributes
61+
```
62+
63+
More information about these attributes and their default values is available in
64+
the [behavior attributes](#behavior-attributes) section.
65+
66+
### Setting state
67+
68+
Standard side sheets have the following states:
69+
70+
* `STATE_EXPANDED`: The side sheet is visible at its maximum height and it
71+
is neither dragging nor settling (see below).
72+
* `STATE_HIDDEN`: The side sheet is no longer visible and can only be
73+
re-shown programmatically.
74+
* `STATE_DRAGGING`: The user is actively dragging the side sheet.
75+
* `STATE_SETTLING`: The side sheet is settling to a specific height after a
76+
drag/swipe gesture. This will be the peek height, expanded height, or 0, in
77+
case the user action caused the side sheet to hide.
78+
79+
You can set a state on the side sheet:
80+
81+
```kt
82+
sideSheetBehavior.state = Sheet.STATE_HIDDEN
83+
```
84+
85+
**Note:** `STATE_SETTLING` and `STATE_DRAGGING` should not be set programmatically.
86+
87+
## Standard side sheet
88+
89+
Standard side sheets co-exist with the screen’s main UI region and allow for
90+
simultaneously viewing and interacting with both regions. They are commonly used
91+
to keep a feature or secondary content visible on screen when content in the
92+
main UI region is frequently scrolled or panned.
93+
94+
`SideSheetBehavior` is applied to a child of
95+
[CoordinatorLayout](https://developer.android.com/reference/androidx/coordinatorlayout/widget/CoordinatorLayout)
96+
to make that child a **standard side sheet**, which is a view that comes up
97+
from the side of the screen, elevated over the main content. It can be dragged
98+
vertically to expose more or less content.
99+
100+
API and source code:
101+
102+
* `SideSheetBehavior`
103+
* [Class definition](https://developer.android.com/reference/com/google/android/material/sidesheet/SideSheetBehavior)
104+
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/sidesheet/SideSheetBehavior.java)
105+
106+
### Standard side sheet example
107+
108+
The following example shows a standard side sheet in its collapsed and
109+
expanded states:
110+
111+
`SideSheetBehavior` works in tandem with `CoordinatorLayout` to let you
112+
display content in a side sheet, perform enter/exit animations, respond to
113+
dragging/swiping gestures, and more.
114+
115+
Apply the `SideSheetBehavior` to a direct child `View` of `CoordinatorLayout`:
116+
117+
```xml
118+
<androidx.coordinatorlayout.widget.CoordinatorLayout
119+
...>
120+
121+
<LinearLayout
122+
android:id="@+id/standard_side_sheet"
123+
style="@style/Widget.Material3.SideSheet"
124+
android:layout_width="256dp"
125+
android:layout_height="match_parent"
126+
android:orientation="vertical"
127+
app:layout_behavior="com.google.android.material.sidesheet.SideSheetBehavior">
128+
129+
<!-- Side sheet contents. -->
130+
<TextView
131+
android:layout_width="wrap_content"
132+
android:layout_height="wrap_content"
133+
android:text="@string/title"
134+
.../>
135+
136+
<TextView
137+
android:layout_width="wrap_content"
138+
android:layout_height="wrap_content"
139+
android:text="@string/supporting_text"
140+
.../>
141+
142+
<Button
143+
android:id="@+id/sidesheet_button"
144+
android:layout_width="wrap_content"
145+
android:layout_height="wrap_content"
146+
android:text="@string/action"
147+
.../>
148+
149+
</LinearLayout>
150+
151+
</androidx.coordinatorlayout.widget.CoordinatorLayout>
152+
```
153+
154+
In this example, the side sheet is the `LinearLayout`.
155+
156+
## Anatomy and key properties
157+
158+
Side sheets have a sheet and content.
159+
160+
### Sheet attributes
161+
162+
Element | Attribute | Related method(s) | Default value
163+
-------------- | --------------------- | --------------------------------- | -------------
164+
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurface`
165+
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceLargeComponent`
166+
**Elevation** | `android:elevation` | N/A | 0dp
167+
**Max width** | `android:maxWidth` | `setMaxWidth`<br/>`getMaxWidth` | N/A
168+
**Max height** | `android:maxHeight` | `setMaxHeight`<br/>`getMaxHeight` | N/A
169+
170+
### Behavior attributes
171+
172+
More info about these attributes and how to use them in the
173+
[setting behavior](#setting-behavior) section.
174+
175+
Behavior | Related method(s) | Default value
176+
------------------------------------------- | ------------------------------------------------------------------------- | -------------
177+
`app:behavior_draggable` | `setDraggable`<br/>`isDraggable` | `true`
178+
179+
### Styles
180+
181+
**Element** | **Value**
182+
------------------------- | -------------------------------------------
183+
Standard side sheet style | `@style/Widget.Material3.SideSheet`
184+
185+
Note: There is no default style theme attribute for standard
186+
side sheets, because `SideSheetBehavior`s don't have a designated associated
187+
`View`.
188+
189+
See the full list of
190+
[styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/sidesheet/res/values/styles.xml),
191+
and
192+
[attributes](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/sidesheet/res/values/attrs.xml).
193+
194+
## Theming side sheets
195+
196+
Side sheets support
197+
[Material Theming](https://material.io/components/sheets-side#theming), which
198+
can customize color and shape.
199+
200+
### Side sheet theming example
201+
202+
API and source code:
203+
204+
* `SideSheetBehavior`
205+
* [Class definition](https://developer.android.com/reference/com/google/android/material/sidesheet/SideSheetBehavior)
206+
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/sidesheet/SideSheetBehavior.java)

docs/components/SideSheetBehavior.md

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)