Android Bottom Sheet With Examples

In this tutorial we’ll discuss and implement android Bottom Sheet widget that was introduced with Android Support v23.2.

Android Bottom Sheet

According to google material design documentation;

A bottom sheet is a sheet that slides up from the bottom edge of the screen. Bottom sheets are displayed as a result of user triggered action, and also it can reveal additional content by swiping up.

Bottom sheet can be either modal – that slides up from bottom of the screen to reveal more content or persistent – when they’re integrated with the app to display supporting content.

BottomSheets can be implemented as BottomSheetBehavior, BottomSheetDialog and BottomSheetDialogFragment.

Android BottomSheetBehavior

BottomSheetBehavior is a type of layout_behavior used for persistent bottom sheets. It requires setting CoordinatorLayout as the root element of that layout and adding the xml attribute app:layout_behavior:android.support.design.widget.BottomSheetBehavior to the child view.

Let’s look at a sample xml child view that’ll be put inside the CoordinatorLayout.

Few inferences drawn from the above code snippet are:

  1. layout_behavior sets the view as bottom sheet
  2. behavior_peekHeight sets the visible part of the sheet
  3. behavior_hideable sets whether the view can be hidden by dragging it further downwards. It accepts boolean values.

Let’s create a new Project in Android Studio, set the template to Basic Activity and add the above the xml snippet in the activity_main.xml.

Let’s run our application once and see how it behaves.

android bottom sheet

Set app:behavior_hideable=”true” and the bottom sheet would stay hidden once dragged down.

android bottom sheet example

The BottomSheetBehavior class allows us to set the present state of the view programmatically. Following are the important constants used to handle the state:

  1. STATE_COLLAPSED : Sets the bottom sheet height with the value set on the peekHeight attribute.
  2. STATE_DRAGGING : The bottom sheet is being dragged
  3. STATE_EXPANDED : The bottom sheet is completely expanded
  4. STATE_HIDDEN : The bottom sheet is completely hidden from the screen

Let’s jump onto the business end of this tutorial. We’ll develop an application that displays a RecyclerView inside the bottom sheet with items to select.

Android Bottom Sheet Example Project Structure

android-bottom-sheet-project-structure

Android Bottom Sheet Example Code

The activity_main.xml layout is defined below.

MainActivity.java is given below.

Following are the inferences drawn from the above code.

behavior = BottomSheetBehavior.from(bottomSheet);
The from(View view) is a static method of the BottomSheetBehavior class and is used to take the instance of the behavior from the layout params of the View instance.

BottomSheetCallback is called upon the BottomSheetBehavior instance for us to receive callbacks like state changes and offset changes for our bottom sheet.

The ItemAdapter.java class has the implementation for the adapter of the RecyclerView as shown below.

The above code is similar to the ones we’ve been implementing in the previous RecyclerView tutorials barring the interface you see.

The interface is implemented in the MainActivity.java class with the aim to make the onItemClick functionality of RecyclerView similar to a ListView.

Back in the MainActivity.java class,

behavior.setState(BottomSheetBehavior.STATE_EXPANDED); expands the Bottom Sheet. Clicking a RecyclerView item would display a SnackBar and collapse the Bottom Sheet.

Let’s look at the application in action.

android bottom sheet example application

In the above output we can see that the BottomSheet can be dragged down without selecting an item.
To prevent it from collapsing without an item been selected, set the BottomSheetCallBack as:

This brings an end to android bottom sheet tutorial. We’ve implemented the persistent android Bottom Sheet in our application. We’ll delve into modal bottom sheets in a later tutorial. You can download the Android BottomSheet Tutorial from the link below.

By admin

Leave a Reply