Bottom Sheets in Android 2


In this tutorial, you will learn how to use Bottom Sheets in your Android project.

What’s a Bottom Sheet?

A Bottom Sheet is a sheet of material that slides up from the bottom edge of the screen. Displayed only as a result of a user-initiated action, and can be swiped up to reveal additional content. It can be a temporary modal surface or a persistent structural element of an app. – Material Design Spec

 

Bottom sheets are added to the Android Support Library in v23.2.0 version.

 

Bottom sheets have two use cases:

1. Persistent Bottom Sheet:

Persistent bottom sheets display in-app content that supplements the main view. It remains visible even when not actively in use, resting at the same elevation as an app and integrating with its content.

Usage

  1. To introduce new content on a unique surface
  2. To display content equal in value to the primary content

 

2. Modal Bottom Sheet:

Modal bottom sheets are alternatives to menus, or simple dialogs, and can display deep-linked content from another app. They appear above other UI elements and must be dismissed in order to interact with the underlying content. When a modal bottom sheet slides into the screen, the rest of the screen dims, giving focus to the bottom sheet.

Usage

  1. Present actions in a list or grid as an alternative to menus or simple dialogs.
  2. Display a contextual menu, when there is no obvious entry point for a menu.
  3. Prioritize the visibility of the elements they contain.

 

Getting Started

Start off by updating your support libraries to 23.2.0.

For persistent bottom sheet to work, your layout should contain a coordinator layout, and then in any child view of your coordinator layout, you can make it as a persistent bottom sheet by adding a custom property app:layout_behavior and use behavior_peekHeight to define how much of the Bottom Sheet you want visible. Note: if you bottom sheet need to scroll along with your layout, then use a NestedScrollView.

Adding a Bottom Sheet via XML

 

Adding a Bottom Sheet via dynamic

For your bottom sheet to be displayable, you need to create a BottomSheetBehavior.  This is created by getting a reference to the container view and calling BottomSheetBehavior.from() on that container.

 

Adding a BottomSheetDialog

You can also display a Dialog in place of a View in the bottom sheet. To do this, get the view from getLayoutInflater and pass it setContentView of the Dialog.

 

Adding a BottomSheetDialogFragment

You can also display a Fragment in place of a View in the bottom sheet. To do this, you class that extends BottomSheetDialogFragment.

Within the setupDialog() method, you can inflate a new layout file and retrieve the BottomSheetBehavior of the container view in your Activity. Once you have the behavior, you can create and associate aBottomSheetCallback with it to dismiss the Fragment when the sheet is hidden.

Finally, you can call show() on an instance of your Fragment to display it in the bottom sheet.

 

Listening to State Changes

Attach a BottomSheetCallback() to your behavior object. It provides 2 methods to override:

  • onStateChanged()
  • onSlide()

onStateChanged()

There are 5 flags in total:

  • STATE_DRAGGING: intermediate state while the user is dragging the bottom sheet up or down
  • STATE_COLLAPSED: default state
  • STATE_EXPANDED: fully expanded state of the bottom sheet.
  • STATE_HIDDEN: allows users to swipe down on the bottom sheet to completely hide it. Disabled by default
  • STATE_SETTLING: brief time between when the View is released and settling into its final position

 

 

ScreenShot:

bottom_sheet_xml.pngbottom_sheet_dynamic.pngbottom_sheet_dialog.pngbottom_sheet_fragment_dialog.png

Complete Source code available here.


About Durga Chiranjeevi

I’m a normal guy, engineer by education who is passionate about Programming and Internet. An android enthusiast, now moving for cross platforms and game development.