Modal Bottom Sheet in Kotlin

Implementation of a Modal Bottom Sheet in Android using Kotlin

A modal bottom sheet is a component that slides up from the bottom of the screen to show more content.

Photo by Anant

Here’s how you can set up a modal bottom sheet in an android application using Kotlin:

We will implement the bottom sheet on the click of a button.

First of all, create a new activity (preferably an Empty Activity) and modify the activity_main.xml file to add a button.

Now our screen looks like this,

Photo by Anant

Now it’s time to make a new layout file for the bottom sheet dialog.

Make a new layout file(Right-click on res ->New ->Layout Resource File) and name it dialog_layout.xml.

Add the following code in the dialog_layout.xml file,

Now, let’s add a listener to the button in the MainActivity.kt file;

Declare a global variable to access the button

lateinit var btnClick:Button

To initialize the global variable write,

btnClick=findViewById(R.id.btnClick)

Adding a listener to it,

btnClick.setOnClickListener {  }

Now in the curly braces add the following code to implement the bottom sheet dialog,

Now Run the application. When you click on the button you can see the bottom sheet coming up.

Now it’s time to make the items as well the cross button image clickable.

When an item is clicked, a Toast should be displayed and when the cross image is clicked, the bottom sheet should go back.

Add the following code to the existing listener,

Now Run the app again and see the changes.

Whenever we click on the Items, we see a Toast message and when the cross image is clicked, the bottom sheet goes back.

To implement the cross image(imgClose)we have used the following dismiss command,

dialog.dismiss()

But still, one issue needs to be fixed. Whenever we click on the outside the bottom sheet dialog, the bottom sheet dialog goes back automatically.

In order to fix this issue, add the following code in the ban click.setOnClickListener{}

dialog.setCancelable(false)

Now Run the application and the issue is resolved.

The Modal Bottom Sheet has been successfully implemented.

The final code looks like this,

activity_main.xml

dialog_layout.xml

MainActivity.kt

Thanks for reading! Do give a clap.