Usage guidelines
- Performing an optional sub-task within a larger task
- Presenting help info while maintaining the current page and its context
- Requesting minimal amounts of information froma user (1-2 fields only)
- Capturing user’s full attention for something important
- Displaying system errors or notices. Consider a Callout instead
- Any time a separate, designated URL is desired
- Any action that should not interrupt users from their current work stream
- On top of another sheet, as this can create usability issues and confusion
Mobile best practices
- Sheets should be triggered by the users action, like tapping on a button.
- Use a sheet for non-immersive content and simple tasks.
- Sheets always sit in front of other UI elements.
Provide a collapse or a close affordance—multiple if possible. This could include an X, back arrow, grabber or close button.
Include Buttons in the header of Sheet as this can lead to sizing and internationalization problems.
Round the corners of full sheets. Only Partial and Action sheets should have rounded corners.
Accessibility
People use Android’s accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:
Variants
Size
Sheets are available in three sizes.
- Full sheet
Full sheet is always the full height of the viewport. They need to be dismissed to interact with underlying content. - Partial sheet
Partial sheet can be any height from 50% to 90% of the viewport. They are used when content on the sheet relates to the layer behind, therefore a background wash is optional. They are dismissed by swiping down or tapping outside of the sheet area. - Action sheet
Action sheets can be any height up to 50% of the viewport. They always include a background wash and need to be dismissed to interact with the underlying content. Action sheets can serve as an alternative to dialogs and inline menus.
Full sheet
Partial sheet
Action sheet
Sheets can utilize several navigation actions.
Close
To close a sheet, use an icon button in the top left corner with the “close” icon.Back
To return to a previous screen, use an icon button in the top left corner with an “arrow-back” icon.Button
An inline Button can be used for a variety of purposes, back, close, next, save, etc.Grabber
A Grabber is a short gray line at the top of the sheet that tells the user that the sheet can be collapsed or expanded.Outside click
For the Partial Sheet and Action Sheet the user may be able to tap outside of the sheet to exit.
Animation
By default, Sheet animates in from the bottom of the screen. It animates out when the header close button is pressed, the user swipes down or the user taps outside of the sheet. Visit Material Design for more information on container motion.