Bottom Sheet is a really nice way to create improved UI and UX designs. They are used by almost all big applications out there, be it Uber, Google Maps, Google Docs and almost any other Google application. Android comes with built in support for making bottom sheets. We can make bottom sheets in two ways, we are going to see both in this tutorial.

The complete working code is available at this GitHub repo.

Persistent Bottom Sheet

Persistent stays always in your layout available to you all the time. When you want your user to move the sheet up and down manually then you need to use persistent bottom sheet. Persistent bottom sheet works with CoordinatorLayout. Lets see an example.

Below is a layout file containing a LinearLayout with two Buttons as the main layout, initially visible to the user, followed by a NestedScrollView which acts as the bottom sheet.

The attribute app:behavior_hideable=”true” makes the bottom sheets completely hide-able even if you have set a peek height. Remove this attribute (or set it to false) if you want the bottom sheet to stay at least at a give peek height.

To make a layout behave as BottomSheet, you need to add the app:layout_behaviour=”@string/bottom_sheet_behaviour” to the layout (as added to the NestedScrollView in above case. Line 37).

Sometimes even after adding the behaviour, bottom sheet will not hide and will keep showing, in this case you will explicitly have to set the peek height of the bottom sheet. To do this just add the following line.

This will set the peek height of the bottom sheet. Increase the value to see how the bottom sheets comes up.

bottom sheet

Peek Height = 0dp

bottom sheet

Peek Height = 60dp

Referencing Bottom Sheet in activity

To control the bottom sheet from you activity you need to get a reference of it. Here is how to get the reference.

The highlighted lines show the main code required to get the reference. First you get the reference to the view that has the bottom sheet behaviour (NestedScrollView in our case) tag and then get the BottomSheetBehaviour instance using BottomSheetBehaviour.from(view).

In the activity you can programmatically set the peek height as well the state of bottom sheet.

Listening to state changes

Bottom sheets define 5 different states, you can listen to state changes by setting a callback function.

Never miss a post

Bottom Sheet Fragments (Modal)

If you want to show different type of bottom sheets in the same activity or want to make reusable bottom sheet the should use BottomSheetDialogFragment. The process for this is very similar to that of making a DialogFragment. As in any DialogFragment, you will first have to create a layout file.

Now comes the JAVA file. For making a modal type of bottom sheet, you will have to extend BottomSheetDialogFragment and set the custom view.

Now all you have to do is get the instance and show the dialog.

Listening to state changes in BottomSheetDialogFragment

To listen for state changes in DialogFragment you will first have to get access to the BottomSheetBehaviour instance. Here is how you do it.

Make sure to dismiss the dialog when the state is STATE_HIDDEN, the bottom sheet might have disappeared (gone into hidden state) but since this is a DialogFragment, the dialog itself is still visible to the user.

This is how the BottomSheetDialogFragment looks:

bottom sheet


The complete working code is available at this GitHub repo.

That is it for this tutorial, hope you have enjoyed it!

Here are some other articles that you might like:

Adding 360 Photo Viewer in your Android App

Using Fonts in Android

Kotlin Data Class Tutorial

How to hide Floating Action Button when scrolling in Recycler View

Gurleen Sethi

How can I tell you about myself in just a few lines, to get to know me you can reach out to me, email, text, call, or any other method of communication you like. I am always there for you!


infinite · January 29, 2018 at 12:51 am

wow!That’s amazing! Thanks for your sharing!

Интересные материалы для Android-разработчика #106 - Подкасты Android Dev · January 25, 2018 at 8:40 pm

[…] Как сделать Bottom Sheet в Android […]

Move content to side in Drawer Layout Android - TheTechnoCafe · January 31, 2018 at 8:20 pm

[…] How to make Bottom Sheet in Android […]

How to use Room in Android - All you need to know to get started - TheTechnoCafe · February 19, 2018 at 7:09 pm

[…] How to make Bottom Sheet in Android […]

Leave a Reply

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

ten − 8 =