BottomSheetBehavior is applied to a child of
to make that child a persistent bottom sheet.
Persistent bottom sheets are views that come up from the bottom of the screen, elevated over the main content. They can be dragged vertically to expose more or less of their content.
Note: If you want to use Bottom Sheets that are modal (dialogs), use BottomSheetDialogFragment.
Design & API Documentation
BottomSheetBehavior works in tandem with CoordinatorLayout to let you display
content on a Bottom sheet (a layer on top of the main content), perform
enter/exit animations, respond to dragging/swiping gestures, etc.
Bottom sheets have 5 states:
STATE_COLLAPSED: The bottom sheet is visible but only showing its peek height. This state is usually the ‘resting position’ of a Bottom Sheet. The peek height is chosen by the developer and should be enough to indicate there is extra content, allow the user to trigger an action or expand the bottom sheet.
STATE_EXPANDED: The bottom sheet is visible and its maximum height and it is neither dragging or settling (see below).
STATE_DRAGGING: The user is actively dragging the bottom sheet up or down.
STATE_SETTLING: The bottom sheet is settling to specific height after a drag/swipe gesture. This will be the peek height, expanded height, or 0, in case the user action caused the bottom sheet to hide.
STATE_HIDDEN: The bottom sheet is no longer visible.
If you’re already using CoordinatorLayout for your activity, adding a bottom sheet is trivial:
- Add any View as a direct child of CoordinatorLayout.
- Apply the behavior by adding the following xml attribute
- Set the desired behavior flags
app:behavior_hideablewhether this bottom sheet can be hidden by dragging it down.
app:behavior_peekHeightthe peek height for the collapsed state.
app:behavior_skipCollapsedif the bottom sheet is hideable, and this is set to true, it does not have a collapsed state.
To programmatically control the bottom sheet you can call the
BottomSheetBehavior. A common pattern is setting a peek height and
setting the state to collapsed to make it visible to the user:
Using BottomSheetDialogFragment provides a
similar UI and interactions as
BottomSheetDialogFragment does not require CoordinatorLayout and creates a modal
bottom sheet (essentially a dialog).