Bottom Sheet is a material design component, that was added to design support
library in version 23.2. Bottom sheet is a very simple window that displays from the
bottom of the screen, and can be used to reveal more content to the user.
Examples of bottom sheet can be seen in some of Google’s apps and widgets,
such as the Place Picker from the Places API.
In this post, I will be showing how you can use bottom sheets in your apps.
Bottom sheet can be a structural part of a UI or a temporary modal. To achieve
these, the design support library provides:
BottomSheetBehavior to be used with CoordinatorLayout
BottomSheetDialog which is a dialog with a bottom sheet behavior
BottomSheetDialogFragment which is an extension of DialogFragment, that
creates a BottomSheetDialog instead of a standard dialog.
To get started with BottomSheet in your apps, add the support library
dependecy to your build.gradle file:
Creating a Persistent Bottom Sheet
To create a bottom sheet as part of your interface layout,
Create a layout with CoordinatorLayout as the root, then add the
the view or layout for the bottom sheet, as a direct child of the
CoordinatorLayout. The bottom sheet layout must have app:layout_behavior
attribute, with value android.support.design.widget.BottomSheetBehavior.
For the bottom sheet to be displayable, we need a to create a
BottomSheetBehavior. This can be done by calling BottomSheetBehavior.from(),
passing a reference to the view with the bottom behavior attribute to the call.
This should be done from the Activity that uses the bottom sheet.
With a reference to the BottomSheetBehavior object, we can call the setState method, passing different behavior constants, that toggles the state of the bottom sheet.
BottomSheetBehavior.STATE_EXPANDED: Completely expands the bottom sheet.
BottomSheetBehavior.STATE_HIDE: Completely hides the bottom sheet.
BottomSheetBehavior.STATE_COLLAPSED: Sets the bottom sheet height with the value set on the peekHeight attribute.
peekHeight can be used to show a preview of the bottom sheet when the screen is displayed. It can be set in xml using the app:behavior_peekHeight attribute, or in code, by calling setPeekHeight on the BottomSheetBehavior object.
Creating a Modal Bottom Sheet
A modal bottom sheet is a dialog with a bottom sheet behavior, and is not part of your view hierarchy. It can be used as alternative to menus, content choosers or simple dialogs in your application. It can also present deep-linked content from other apps.
To do this:
Create a class that extends BottomSheetDialogFragment, inflated with the layout that will be used as the content of the modal dialog.
Create an instance of the modal bottom sheet and show it with the show method, passing the FragmentManager and a string tag as parameters.