|
| 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) |
0 commit comments