Bottom sheets are containers with supplementary content that is located at the bottom of the screen.
Bottom sheet list view
- Use bottom sheets to show deep-linked content that supplements the screen’s primary UI region.
- Use bottom sheets when representing actions in a list as opposed to menus or simple dialog.
- Use bottom sheets when you need to allow for a wide variety of content and layouts.
- Use bottom sheets when easy access is needed.
Modal Bottom Sheet – List View
Modal bottom sheets are alternatives to inline menus or simple dialogs on mobile, providing room for additional items, longer descriptions, and iconography. They must be dismissed to interact with the underlying content.
Bottom sheet list view anatomy
B. List of Actions
C. Divider Line
User interaction with bottom sheet list view
Modal bottom sheet list view on mobile (left) and tablet (right)
Behavior and Interaction
Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen. The modal bottom sheets have a default elevation of 16dp and this allows to help users focus on their available choices.
Modal bottom sheets are primarily used on mobile. However, there is also a bottom sheet solution on tablet.