Bottom Sheet Android Tutorial – Working with BottomSheet

Have you seen the Bottom Sheet Android Component? It slides up from the Bottom to display some more options to the user. I am pretty sure that you have already seen Bottom Sheet in Google …

Android Bottom Sheet Tutorial

Have you seen the Bottom Sheet Android Component? It slides up from the Bottom to display some more options to the user. I am pretty sure that you have already seen Bottom Sheet in Google Maps application.

Bottom Sheet Android
Bottom Sheet Android

You can also use the Bottom Sheet in your application. And if you want to use it in your app, in this post, I will guide you about integrating the android Bottom sheet in your project.

You can also go through the official guide about the Bottom Sheet. 

Types of Bottom Sheet

#1 Persistent Bottom Sheet

As clear from the name, it is persistent at the bottom of the screen. A user can view the full Bottom Sheet by dragging the sheet up vertically. The Bottom Sheet is slightly elevated, and it can display more options or app content to the user. For example, the picture that we saw above is an example of a persistent bottom sheet.

#2 Modal Bottom Sheets

Again as the name suggests, these sheets behave like Modals or dialogues. It shadows the activity or fragment when activated. And if we tap outside the Bottom Sheet, it is dismissed just like a modal. A user can also slide up and slide down to activate and deactivate the Bottom Sheet, respectively.

Modal Bottom Sheet
Modal Bottom Sheet

I hope you got that what exactly is the android bottom sheet and when we can use it in our application. Now let’s learn how we can implement it in an Android Studio Project.

Persistent Bottom Sheet

Creating a new Project

  • As always we need to create a new android studio project. And for this sample I have created a new android project with an Empty Activity.
  • Now we will add the material design dependency in our project. To do this, open app level build.gradle file and inside the dependencies block add the following line.

  • Once you have added the above line a gradle sync is needed.

Designing Bottom Sheet

Now let’s design our Bottom Sheet. Here I won’t do some very complex or very beautiful design, but if you want to design your excellent layout, you can. As it is an example, I am creating a straightforward design.

  • Inside your layout folder, create a file named bottom_sheet_persistent.xml and copy the following code.

  • The above layout will look something like this.
bottom sheet android design
Bottom Sheet Design
  • But the above layout is just a simple XML layout and not a Bottom Sheet. And that is why to make the above layout a Bottom Sheet, we need to add some properties to the root layout.
  • Add these new properties to the root layout of the design, as you can see below.

  • As you can see 3 more properties are added here.
    • behavior_hideable: It is true, that means we can completely hide the bottom sheet by sliding it down.
    • behavior_peekHeight: It is the height of the sheet that will be visible.
    • layout_behavior: It is most important property, as it defines the layout as a Bottom Sheet.
  • I also added in ID, it is required to access the sheet in our code.

Adding Bottom Sheet to Activity

Our sheet is ready and now we can use it in our Activity or Fragment. We already have a default activity in our existing project that is the MainActivity and here we will add the Bottom Sheet.

  • Open activity_main.xml and write the following xml code.

Remember for Bottom Sheet, we need CoordinatorLayout. And here we are including the Bottom Sheet that we designed. The above xml code will generate the following view.

Bottom Sheet Persistent
Bottom Sheet Persistent

We can see the Bottom Sheet in our Activity, and we can also slide it up or slide it down. 

Now, let’s  see how we can access the BottomSheet in the code to make changes.

Expanding and Collapsing Bottom Sheet

  • First we will add a button in our activity_main.xml.

  • Then write the following code in MainActivity.kt.

  • The code is very simple and self explanatory. In case you have any question, please leave your comments below.
Persistent Bottom Sheet Android
Persistent Bottom Sheet Android

This is the Persistent Bottom Sheet, now let’s learn about Modal Bottom Sheet.

Modal Bottom Sheet

Designing Bottom Sheet

  • For this, we will create a new xml layout file named bottom_sheet_modal.xml.

We often use Modal Bottom Sheets to give user more options. And that is why I have a list here, and we will add options to this list in the code.

BottomSheetDialogFragment

We will create our Modal Bottom Sheet using BottomSheetDialogFragment. It is almost same as creating a DialogFragment. And it is also the subclass of DialogFragment.

  • Create a new class named MyBottomSheetDialogFragment and write the following code.

  • We will fire this Bottom Sheet on a Button Click.
  • So first add one more button in activity_main.xml.

  • And inside MainActivity.kt we will add the following piece of code.

  • And that’s it, you can see your Bottom Sheet by clicking the newly created button.
Bottom Sheet Modal
Bottom Sheet Modal

Now, that’s it for this tutorial friends. In case you have any problem, feel free to comment it below.

Bottom Sheet Android Source Code

In case you need my source code, you can get it from here.

Bottom Sheet Android Source Code

Finally, if you found this post useful, then don’t forget to share it with your friends. Thank You 🙂
Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x