Modal Bottom Sheet in Android with Examples

In this article, we will learn about how to add Modal Bottom Sheet in our app. We have seen this UI component in daily applications like Google Drive, Maps, or Music Player App. The modal Bottom sheet always appears from the bottom of the screen and if the user clicks on the outside content then it is dismissed. It can be dragged vertically and can be dismissed by sliding it down. 

Step by Step Implementation

Step 1: Create a new project

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?  

Step 2: Adding required dependency

Navigate to app > Gradle Scripts > build.gradle.kts(module) and add the following dependency in it.

implementation("com.google.android.material:material:1.12.0")

Step 3: Create a Bottom Sheet Fragment

Now create a bottom_sheet_layout.xml file and add the following code. Here we design the layout of our Modal Bottom sheet. It has a textview and two buttons. 

bottom_sheet_layout.xml:

Layout Design:

Step 4: Create a new Java/Kotlin file for Bottom Sheet Dialog

Now create BottomSheetDialog file and add the following code.This file extends the BottomSheetFragment and that's why it act as a fragment. When the user clicks on any bottom of modal sheet the onClickListener() gets invoked. 

Step 5: Working with MainActivity and its layout file

Navigate to app > java > package-name > MainActivity and also to res > layout > activity_main.xml and add the below code to those files. The code for the MainActivity file is provided in both Java and Kotlin.

Output: