Android Material Design Bottom Sheets Tutorial

With the Arrival of the new version 23.2 of library support Android brings a new component that can enrich the user interface of some of our applications, calls Bottom Sheets. You can find a detailed description of this component in the guides design of Material design.

What is Bottom Sheets ?

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

There are two major types of bottom sheets:

-> Persistent bottom sheet :- Normally used to display additional information to that shown in the main view. These panels have the same elevation as the main content and remain visible even when not being actively used.

-> Modal bottom sheet :- Commonly used as an alternative to simple menus or dialogs. They have a higher elevation than the main content, darken the display, and it is necessary to hide them continue to interact with the rest of the application.

Let’s Get it Working

In this tutorials we will learn how to use the bottom sheets. To really understand the usage of bottom sheets we will create an app. The App will show the usage of both the forms of this component.

Step 1 ) Update build.gradle file

Before you can use Bottom Sheet in your projects you need to add the following compile line to your Gradle dependencies block in your build.gradle file and rebuilt the project .

Step 2) Update strings.xml .

Add the below string values to the string.xml located in res => values => strings.xml .

Step 3) Update dimens.xml .

Add the below dimensions to the dimens.xml located in res => values => dimens.xml .

Step 4) Update activity_main.xml .

Open the layout file for the MainActivity.java i.e activity_main.xml and add the below code in your layout file . The code will create four buttons and view for bottom sheet.

content_main.xml .
Create a layout xml named content_main.xml and update the below code in that xml file. This code will create four buttons.

content_bottom_sheet.xml .
Create a layout xml named content_bottom_sheet.xml and update the below code in that xml file. This code will create view for bottom sheet. Here you can see that in relative layout there are attributes declared app:layout_behavior=”@string/bottom_sheet_behavior to automatically respond to user gestures to expand or collapse the view.

Step 5) Update MainActivity Class.

Now Open MainActivity.java and make some changes in code . Here we will see the how to handle bottom sheets and also see how it behaves in different states by checking the logcat.
Basically there are five states of Bottom sheet as follows :-
-> 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

The above code would result a screen like this:

Collapse Bottom Sheet

Collapse Bottom Sheet


Expanded Bottom Sheet

Expanded Bottom Sheet

Step 6 ) Create content_dialog_bottom_sheet.xml .

Create a layout xml named content_dialog_bottom_sheet.xml and update the below code in that xml file. This code will create view for bottom sheet dialog.

Step 7) Create CustomBottomSheetDialogFragment Class.

Create a class named CustomBottomSheetDialogFragment and extend it by BottomSheetDialogFragment .

Step 8) Update onClick() Listener.

Now update the onClick() Listener with the below code . Here in case R.id.show_bottom_sheet_dialog_button: i created the object of CustomBottomSheetDialogFragment and called the funtion show . It will show the Bottom Sheet Dialog on the screen .

The above code would result a screen like this:

Bottom Sheet Dialog

Bottom Sheet Dialog

DownloadCode
github

Enjoy Coding and Share Knowledge

  • Đức Phú

    great (y)

    • Admin

      Thanks Đức Phú 🙂

Show Buttons
Hide Buttons