Create a bottom sheet
Stay organized with collections
Save and categorize content based on your preferences.
A bottom sheet shows secondary content, anchored to the bottom of the screen.
Version compatibility
This implementation requires that your project minSDK be set to API level 21 or
higher.
Dependencies
Implement a bottom sheet
To implement a bottom sheet, use the ModalBottomSheet
composable:
Expand and collapse the sheet
To expand and collapse the sheet, use SheetState
:
Key points
- Use the
content
slot, which uses a ColumnScope
to lay out sheet
content composables in a column.
- Use
rememberSheetState
to create an instance of SheetState
that you
pass to ModalBottomSheet
with the sheetState
parameter.
SheetState
provides access to the show
and hide
functions
and to properties related to the current sheet state. These functions
require a CoroutineScope
— for example, rememberCoroutineScope
—
and can be called in response to UI events.
Make sure to remove the ModalBottomSheet
from composition when you hide
the bottom sheet.
Results
Figure 1. A standard bottom sheet (left) and a modal bottom sheet (right).
Collections that contain this guide
This guide is part of these curated Quick Guide collections that cover
broader Android development goals:
Display interactive components
Learn how composable functions can enable you to easily
create beautiful UI components based on the Material Design design
system.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
{}
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[]]