Android BottomSheet Example in Kotlin
Last Updated :
25 May, 2025
The Bottom Sheet is seen in many of the applications such as Google Drive, Google Maps and most of the applications used the Bottom Sheet to display the data inside the application. In this article, we will take a look at implementing a Bottom Sheet in the Android app using Kotlin in Android Studio.
What is Bottom Sheet?
Bottom Sheet is a component of the Android design support library that is used to display different actions in an expandable UI design. It is an expandable widget that opens from the bottom of the android device on clicking on a specific Button or View.
Types of Bottom Sheet?
There are two different types of Bottom Sheet as
- Persistent Bottom Sheet
- Modal Bottom Sheet
1. Persistent Bottom Sheet
A Persistent Bottom Sheet will be displayed on the bottom of the screen in our Android application. This sheet will be displayed at the bottom of the screen making some portion of the content visible. The elevation of this bottom sheet is the same as that of the app. Users can be able to navigate to both the app along with the bottom sheet at a time. Below is the example for the Persistent Bottom Sheet.
2. Modal Bottom Sheet
Modal Bottom Sheet will also be displayed on the bottom of the screen, but the difference is the user will not be able to use the app's background content when the bottom sheet is open. This type of bottom sheet is having an elevation slightly higher than that of the app. When this bottom sheet is the open user will not be able to access the app's content. Users can at a time use the bottom sheet or the app's content. Below is the example for the Modal Bottom Sheet.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
activity_main.xml:
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context=".MainActivity">
<!--below is the button for opening our bottom sheet-->
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show Bottom Sheet" />
</LinearLayout>
Step 3: Creating a layout file for our bottom sheet
Navigate to the app > res > layout > Right-click on it > New > Layout Resource File and name it as bottom_sheet_dialog and add below code to it.
bottom_sheet_dialog.xml:
XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<!--image view for displaying course image-->
<ImageView
android:id="@+id/courseImageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/gfg_logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--text view for displaying course name-->
<TextView
android:id="@+id/courseNameTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="DSA Self Paced Course"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/courseImageView"
app:layout_constraintTop_toTopOf="@+id/courseImageView" />
<!--text view for displaying course tracks-->
<TextView
android:id="@+id/courseTracksTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Course Tracks : 30"
android:textColor="@color/black"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="@+id/courseDurationTextView"
app:layout_constraintStart_toStartOf="@+id/courseNameTextView"
app:layout_constraintTop_toBottomOf="@+id/courseDurationTextView" />
<!--text view for displaying course duration-->
<TextView
android:id="@+id/courseDurationTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Course Duration : 4 Months"
android:textColor="@color/black"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="@+id/courseNameTextView"
app:layout_constraintStart_toStartOf="@+id/courseNameTextView"
app:layout_constraintTop_toBottomOf="@+id/courseNameTextView" />
<!--button for dismissing our dialog-->
<Button
android:id="@+id/dismissButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/courseImageView"
android:layout_margin="10dp"
android:text="Dismiss dialog"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/courseImageView" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Step 4: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
MainActivity.kt:
Kotlin
package org.geeksforgeeks.demo
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.bottomsheet.BottomSheetDialog
class MainActivity : AppCompatActivity() {
// initialize button variables
private lateinit var button: Button
private lateinit var dismissButton: Button
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// initialize variable for button with its id
button = findViewById(R.id.button);
// on click event for button
button.setOnClickListener {
// create a new bottom sheet dialog
val dialog = BottomSheetDialog(this)
// inflate the layout file of bottom sheet
val view = layoutInflater.inflate(R.layout.bottom_sheet_dialog, null)
// initialize variable for dismiss button
dismissButton = view.findViewById(R.id.dismissButton)
// on click event for dismiss button
dismissButton.setOnClickListener {
// call dismiss method to close the dialog
dialog.dismiss()
}
// set cancelable to avoid closing of dialog box when clicking on the screen.
dialog.setCancelable(false)
// set content view to our view.
dialog.setContentView(view)
// call a show method to display a dialog
dialog.show()
}
}
}
Output:
Similar Reads
Android EditText in Kotlin
EditText is a widget in Android, that is used to get input from the user. EditText is commonly used in forms and login or registration screens. EditText extends the TextView class and provides more functionalities including handing text inputs such as cursor control, keyboard display and text valida
3 min read
Kotlin Flow in Android with Example
Kotlin Flow is a tool that helps developers work with data that changes over time like search results, live updates, or user input. It’s part of Kotlin’s coroutines, which are used for writing code that doesn’t block the app while waiting for something to finish, like a network call or a file to loa
8 min read
Kotlin Android Extensions
If you’ve been developing Android Apps for some time, you’re probably already tired of working with findViewById in your day-to-day life to recover views. Or maybe you gave up and started using the famous Butterknife library. If that’s your case, then you’ll love Kotlin Android Extensions. Kotlin ha
2 min read
CountDownTimer in Android using Kotlin
CountDownTimer app is about setting a time that moves in reverse order as it shows the time left in the upcoming event. A CountDownTimer is an accurate timer that can be used for a website or blog to display the count down to any special event, such as a birthday or anniversary. Likewise, here let’s
2 min read
ArrayAdapter in Android with Example
The Adapter acts as a bridge between the UI Component and the Data Source. It converts data from the data sources into view items that can be displayed into the UI Component. Data Source can be Arrays, HashMap, Database, etc. and UI Components can be ListView, GridView, Spinner, etc. ArrayAdapter is
3 min read
10 Kotlin Features to Boost Android Development
Android development has made a significant contribution to the world of mobile development. For Android development choosing the correct language is paramount. Kotlin and Java are the languages used for Android development. Both languages have their own Pros and Cons. Kotlin is a modern language dev
8 min read
Difference between Java and Kotlin in Android with Examples
Kotlin KOTLIN is a cross platform, statically types, general purpose programming language with type inference. KOTLIN is designed to interoperate fully with java but type inference allows its syntax to be more concise.KOTLIN is sponsored by JetBrains and Google through the Kotlin Foundation. Java JA
3 min read
Generate QR Code in Android using Kotlin
Many applications nowadays use QR codes within their application to hide some information. QR codes are seen within many payment applications which are used by the users to scan and make payments. The QR codes which are seen within these applications are generated inside the application itself. In t
4 min read
Dynamic CheckBox in Android with Examples
Android offers a wide variety of widgets for user interactions and CheckBox is one among them. CheckBox is a special kind of button with two states that can be either checked or unchecked. They serve as a simple tool to gather information from the user without much hassle. They are generally used to
3 min read
Notifications in Android with Example
Notification is a kind of message, alert, or status of an application (probably running in the background) that is visible or available in the Android's UI elements. This application could be running in the background but not in use by the user. The purpose of a notification is to notify the user ab
7 min read