material-components_material-components-android/docs/components/BottomSheetDialogFragment.md

Modal Bottom Sheets

Using modal bottom sheets

BottomSheetDialogFragment is a thin layer on top of the regular support library Fragment that renders your fragment as a modal bottom sheet, fundamentally acting as a dialog.

Modal bottom sheets render a shadow on the content below them to indicate that they are modal, essentially a dialog. If the content outside of the dialog is tapped then the bottom sheet is dismissed. Modal bottom sheets can be dragged vertically and dismissed by completely sliding them down.

Note: To implement non-modal Persistent bottom sheets use BottomSheetBehavior in conjunction with a CoordinatorLayout.

Design & API Documentation

• Material Design guidelines: Modal Bottom Sheets
• Class definition
• Class overview

Usage

1. Subclass BottomSheetDialogFragment
2. Override onCreateView.
3. Use one of the two versions of show to display the dialog. Notice BottomSheetDialogFragment is a subclass of AppCompatFragment, which means you need to use Activity.getSupportFragmentManager().

Note: Don't call setOnCancelListener or setOnDismissListener on a BottomSheetDialogFragment, instead you can override onCancel(DialogInterface) or onDismiss(DialogInterface) if necessary.

Theming

There are two options for theming the BottomSheetDialog that is displayed by this fragment. Either using the Theme.MaterialComponents.BottomSheetDialog, Theme.MaterialComponents.Light.BottomSheetDialog, and Theme.MaterialComponents.DayNight.BottomSheetDialog variants of the themes, or by using ThemeOverlay.MaterialComponents.BottomSheetDialog. The benefit of using the ThemeOverlay version is that any changes to your main theme, such as updated colors will be reflected in the BottomSheet. If you use the Theme versions you have more control over exactly what attributes are included in each, but it also means you'll have to duplicate any changes that you've made in your main theme into these as well.

Fullscreen mode

On API 21 and above the BottomSheet will be rendered fullscreen (edge to edge) if the navigationBar is transparent, and enableEdgeToEdge is true. It can automatically add insets if any of paddingBottomSystemWindowInsets, paddingLeftSystemWindowInsets, paddingRightSystemWindowInsets, or paddingTopSystemWindowInsets are set to true in the style, either by updating the style passed to the constructor, or by updating the default style specified by the bottomSheetDialogTheme attribute in your theme.

BottomSheetDialog will also add padding to the top when the BottomSheet slides under the status bar to prevent content from being drawn underneath it.

Related Concepts

BottomSheetDialogFragments are a more modern version of Dialogs. They have a nicer-looking entrance animation and since they are pinned to the bottom they may feel easier to use on larger devices.

BottomSheetDialogFragments look very similar to the effects of BottomSheetBehavior but the latter is not modal and requires a CoordinatorLayout.