Material Components for Android

Android

Bottom Sheets

Bottom Sheets

BottomSheetBehavior is applied to a child of CoordinatorLayout 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

Usage

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:

If you’re already using CoordinatorLayout for your activity, adding a bottom sheet is trivial:

  1. Add any View as a direct child of CoordinatorLayout.
  2. Apply the behavior by adding the following xml attribute app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
  3. Set the desired behavior flags
    • app:behavior_hideable whether this bottom sheet can be hidden by dragging it down.
    • app:behavior_peekHeight the peek height for the collapsed state.
    • app:behavior_skipCollapsed if the bottom sheet is hideable, and this is set to true, it does not have a collapsed state.

To programatically control the bottom sheet you can call the setState method on the BottomSheetBehavior. A common pattern is setting a peek height and setting the state to collapsed to make it visible to the user:

bottomSheetBehavior.setPeekHeight(300);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

Using BottomSheetDialogFragment provides a similar UI and interactions as BottomSheetBehavior, however BottomSheetDialogFragment does not require CoordinatorLayout and creates a modal bottom sheet (essentially a dialog).