Bottom Sheets Dialog in Android

Bottom Sheets Dialog in Android

One of the most significant changes to Android design was introduced during the 2014 Google I/O conference, material design. Even though Google had introduced a set of guidelines for their new design philosophy, developers were responsible for implementing the new patterns from scratch.

As with many things in software development, the Design support library improved with time, adding support for bottom sheets with the 23.2 release.

Example

In this tutorial, we are going to learn how to implement bottom sheets in out app. We are going to use two types of bottom sheets :

1. Persistent Bottom Sheet : Persistent bottom sheets remain visible on the screen. You can convert any view in your layout to a persistent bottom sheet.

2. Modal Bottom Sheet : Modal bottom sheets are dialogs which are alternatives to content choosers, simple menus, and dialogs.

VIDEO DEMO

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill required details. By default my activity is MainActivity.java.

2. Open build.gradle and include this libraries show below:

To implement the bottom sheet, you need to import the Design support library into your project, with a minimum version of 23.2.

3. Once you have synced your project with the Design support library, you can open the layout file that needs to include a bottom sheet. Create activity_main.xml and add the following code.

There are a few key points that you need to take care:

1. To use the bottom sheets widget, you must use a CoordinatorLayout container for the views.

2. As you notice that there is a NestedScrollView containing a LinearLayout. While any container view can be used in a bottom sheet, scrolling can only properly occur if you use a container that supports nested scrolling, such as the NestedScrollView or a RecyclerView.

3. For a container to be recognized by the Design support library as a bottom sheet container, you need to include the layout_behavior attribute and give it a value of android.support.design.widget.BottomSheetBehavior. You can see this used above in the NestedScrollView.

4. Now create content_main.xml that used in above xml file and add the below code.

5. Now the content that you want to show for bottom sheet, for this create new xml file naming bottom_sheet_content.xml and add whatever you like,

6. 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.

At start set the state of bottom sheet as Collapse Mode and peek height as 0.

There are five states of BottomSheet behavior:

  • STATE_COLLAPSED: this collapsed state is the default and shows just a portion of the layout along the bottom. The height can be controlled with the app:behavior_peekHeight attribute (defaults to 0).
  • STATE_DRAGGING: the intermediate state while the user is directly dragging the bottom sheet up or down.
  • STATE_SETTLING: that brief time between when the View is released and settling into its final position.
  • STATE_EXPANDED: the fully expanded state of the bottom sheet, where either the whole bottom sheet is visible (if its height is less than the containing CoordinatorLayout) or the entire CoordinatorLayout is filled.
  • STATE_HIDDEN: disabled by default (and enabled with the app:behavior_hideable attribute), enabling this allows users to swipe down on the bottom sheet to completely hide the bottom sheet.

Now to display your Bottom Sheet you have to set the Expanded Mode.

If you’d like to receive callbacks of state changes, you can add a BottomSheetCallback:

Till here we successfully implemented Bottom Sheet Dialog. Now in next step we will learn how to implement BottomSheetDialogFragment.

7. To implement Bottom Sheet Dialog Fragment, create a class naming BottomSheetFragment.java and extend it with 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 a BottomSheetCallback with it to dismiss the Fragment when the sheet is hidden.

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

8. For BottomSheetFragment class create xml file naming fragment_bottom_sheet.xml and add the below code to it.

9. Full source of MainActivity.java

10. That’s all you have to done.

Thanks. 🙂

Download Source Code – >

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)