Android Bottom Sheet Material Design with Example

Android Bottom Sheet is the Android Materiel Design Components which slides up from the bottom of the screen. That was added to design support library in version 23.2.Bottom sheets are displayed as a result of the user-triggered action, and also it can reveal additional content by swiping up.

Types of Bottom Sheet Android

There are two types of Bottom Sheets available,

Persistent bottom sheets
     We need to include our bottom sheet in the main layout. For the Bottom Sheets, you just have to use CoordinatorLayout as a top level of your layout.The Bottom Sheets remains visible on the screen. Its used to display supporting the content of the user action.

Modal Bottom sheets
For Modal Bottom Sheets you need BottomSheetDialogFragment. It’s a dialog which are alternatives to content choosers, simple menus or dialogs.Used to present deep-linked content from other apps.

Persistent bottom sheets with Example

Adding support library
First, Add the design library to your App build.gradle dependency

compile 'com.android.support:design:26.1.0'

Bottom sheet view

create the bottom sheet view to add to the main layout.

Add,

app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

persistent_bottomsheet.xml

behavior_peekHeight: Defines the height of the visible part.

behavior_hideable: Defines if the bottom sheet can be hidden by swiping it down.

 

Adding the bottom sheet view into the main layout, In the main layout  CoordinatorLayout should be the top level view,


Related: Android recyclerview material design with Example [Download]

Related: Cardview Android Material Design with Example [Download]


activity_main.xml

In your MainActivity.java,

get the bottom sheet view

CoordinatorLayout coordinatorLayout = (CoordinatorLayout)findViewById(R.id.coordinator);
 View persistentbottomSheet = coordinatorLayout.findViewById(R.id.bottomsheet);

initialize the bottom sheet behavior,

BottomSheetBehavior behavior = BottomSheetBehavior.from(persistentbottomSheet);

Change the bottom sheet behavior,

behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
 behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

dynamically set the peek height
the height of the bottom sheet view

bottomSheetBehavior.setPeekHeight(340);

callback for bottom sheet state changes

behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) { }
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {}
});

The Complete MainActivity.java,


Related: Android Snackbar Material design with Example [Step By Step]


Screenshots

bottom sheet in android
bottom sheet in android
bottom sheet in android
bottom sheet in android

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top