How to make Bottom Sheet in Android
Hello world, today we are going to see how to make a persistence bottom sheet and how to make a modal bottom sheet in the android. The bottom sheet has two types, one is persistence and the second is a modal sheet. In both cases, the bottom sheet slides up. In the persistence bottom sheet, some parts of the bottom sheet showing to the user so that the user can slides up and in the model bottom sheet you can make a trigger to show the bottom sheet and it is fully hidden unlikely persistence bottom sheet. When a user clicks on a button or something you can trigger the modal bottom sheet to show. Let’s see the finished app which we are going to make below.
Add Bottom Sheet Dependency in Android Project
How to make Persistence Bottom Sheet
You can make your layout as you want for the sake of simplicity we make a simple view with textview but you can add what you like for example you can add recyclerview or any other view you like.
If you want to make this layout to be used as a bottom sheet then you have to add these 3 properties to your layout.
- app:layout_behavior, set this property value to com.google.android.material.bottomsheet.BottomSheetBehavior because we want our layout to behave like a bottom sheet.
- app:behavior_hideable, set the property value to true as we want to completely hide the bottom sheet if we swipe it down again when it is collapsed.
- app:behavior_peekHeight, set this property value to the value which you want to show the view when it is collapsed.
After making the layout for the bottom sheet we need to include this layout in our activity layout and make activity layout root layout to CoordinatorLayout. It is mandatory for the bottom sheet.
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 Maps application.
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.
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.