Select Page

What is BottomSheet ?

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

What are the Types ?

According to material design, Bottom Sheets can be two types : Persistent and Modal

Persistent : It remains visible on the screen.You need to include your bottom sheet inside the main layout.To make a view as persistent Bottom Sheet in your screen all you need to do is have CoordinatorLayout at the top level of your layout.

Modal : Modal bottom sheets are dialogs which are alternatives to content choosers, simple menus or dialogs, and can display deep-linked content from another app. It is similar to a Dialog, for this you need BottomSheetDialogFragment.

bottomsheet

How to create a BottomSheet ?

For adding a BottomSheet into your application first, you need to add the design library(>=23.2) into your dependency list.

dependencies {
implementation 'com.android.support:design:27.1.0'
}

There are three choices available for creating a BottomSheet, they are listed below

  1. BottomSheetBehavior : add this behavior to a child view of CoordinatorLayout to make it work as a bottom sheet.
  2. BottomSheetDialog : It’s like a dialog creation, Create a BottomSheetDialog and you can set the content view for that dialog.
  3. BottomSheetDialogFragment : This is a version of DialogFragment that shows a bottom sheet using BottomSheetDialog instead of a floating dialog.

BottomSheetDialogFragment uses the BottomSheetDialog as the base inside the fragment, so we discuss other two ways and types of the BottomSheet.

How to implement a Persistent BottomSheet ?

For persistent bottomSheet, you just have to use a CoordinatorLayout as the main element of your layout and attach a BottomSheet behavior to a view .For this use the code below.

<?xml version="1.0" encoding="utf-8">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="droidmentor.checking.BottomSheet.BottomSheetExample">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F3F3F3"
android:orientation="vertical"
android:paddingBottom="@dimen/inbetween_space"
android:paddingLeft="@dimen/activity_vertical_margin"
android:paddingRight="@dimen/activity_vertical_margin"
android:paddingTop="@dimen/inbetween_space"
app:behavior_hideable="false"
app:behavior_peekHeight="@dimen/bs_peek_height"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
View persistentbottomSheet = coordinatorLayout.findViewById(R.id.bottomsheet);
final BottomSheetBehavior behavior = BottomSheetBehavior.from(persistentbottomSheet);

How do I configure BottomSheetCallBack ?

You can track the events of the BottomSheet using BottomSheetCallBack. Use the code below for configuring the BottomSheetCallBack with your BottomSheet.

if (behavior != null)
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
// React to state change
//showing the different states
switch (newState) {
case BottomSheetBehavior.STATE_HIDDEN:
break;
case BottomSheetBehavior.STATE_EXPANDED:
break;
case BottomSheetBehavior.STATE_COLLAPSED:
break;
case BottomSheetBehavior.STATE_DRAGGING:
break;
case BottomSheetBehavior.STATE_SETTLING:
break;
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
// React to dragging events
}
});

How to implement a Modal BottomSheet ?

Modal BottomSheets are basically Dialog Fragments that slide from the bottom. You can anyone of your layout as a content view of the BottomSheetDialog. So view creation is as usual layout creation, here the code explains to create a BottomSheetDialog and inflate the layout into that dialog.

View modalbottomsheet = getLayoutInflater().inflate(R.layout.bottom_sheet_sample, null);
BottomSheetDialog dialog = new BottomSheetDialog(this);
dialog.setContentView(modalbottomsheet);
dialog.setCanceledOnTouchOutside(false);
dialog.setCancelable(false);

View on GithubDownload .zip

This ends the blog on BottomSheet in Android. Feel free to comment and share, keep watching this space get more updates on Android Stuff!

Elsewhere

Jaison Fernando

Android Developer at NFN Labs
Elsewhere