Android BottomSheet Example in Kotlin - GeeksforGeeks

09 May, 2021
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. 
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. 
There are two different types of Bottom Sheet as 
Persistent Bottom Sheet and Modal Bottom Sheet
Persistent Bottom Sheet and 
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. 
We will be building a simple application in which we will be displaying the course details in our bottom sheets such as Course Name, Course Duration, Course Tracks, and many more. A sample video is given below to get an idea about what we are going to do in this article.
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. 
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout     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"    tools:context=".MainActivity">      <!--below is the button for opening our bottom sheet-->    <Button        android:id="@+id/idBtnShowBottomSheet"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:text="Show Bottom Sheet"        android:textAllCaps="false" />      </RelativeLayout>
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. 
XML
<?xml version="1.0" encoding="utf-8"?><androidx.cardview.widget.CardView    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content">      <RelativeLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="2dp">          <!--image view for displaying course image-->        <ImageView            android:id="@+id/idIVCourse"            android:layout_width="100dp"            android:layout_height="100dp"            android:layout_margin="10dp"            android:src="@drawable/dsa" />          <!--text view for displaying course name-->        <TextView            android:id="@+id/idTVCourseName"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginTop="10dp"            android:layout_toEndOf="@id/idIVCourse"            android:layout_toRightOf="@id/idIVCourse"            android:text="DSA Self Paced Course"            android:textColor="@color/black"            android:textSize="18sp"            android:textStyle="bold" />          <!--text view for displaying course tracks-->        <TextView            android:id="@+id/idTVCourseTracks"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@id/idTVCourseName"            android:layout_marginTop="10dp"            android:layout_toEndOf="@id/idIVCourse"            android:layout_toRightOf="@id/idIVCourse"            android:text="Course Tracks : 30"            android:textColor="@color/black"            android:textSize="15sp" />          <!--text view for displaying course duration-->        <TextView            android:id="@+id/idTVCourseDuration"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@id/idTVCourseTracks"            android:layout_marginTop="10dp"            android:layout_toEndOf="@id/idIVCourse"            android:layout_toRightOf="@id/idIVCourse"            android:text="Course Duration : 4 Months"            android:textColor="@color/black"            android:textSize="15sp" />                <!--button for dismissing our dialog-->        <Button            android:id="@+id/idBtnDismiss"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@id/idIVCourse"            android:layout_margin="10dp"            android:text="Dismiss dialog"            android:textAllCaps="false" />      </RelativeLayout>  </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.
Kotlin
import android.os.Bundleimport android.widget.Buttonimport androidx.appcompat.app.AppCompatActivityimport com.google.android.material.bottomsheet.BottomSheetDialog  class MainActivity : AppCompatActivity() {          // creating a variable for our button    lateinit var btnShowBottomSheet: Button    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main)                  // initializing our variable for button with its id.        btnShowBottomSheet = findViewById(R.id.idBtnShowBottomSheet);                  // adding on click listener for our button.        btnShowBottomSheet.setOnClickListener {                          // on below line we are creating a new bottom sheet dialog.            val dialog = BottomSheetDialog(this)                          // on below line we are inflating a layout file which we have created.            val view = layoutInflater.inflate(R.layout.bottom_sheet_dialog, null)                          // on below line we are creating a variable for our button             // which we are using to dismiss our dialog.            val btnClose = view.findViewById<Button>(R.id.idBtnDismiss)                          // on below line we are adding on click listener             // for our dismissing the dialog button.            btnClose.setOnClickListener {                // on below line we are calling a dismiss                 // method to close our dialog.                dialog.dismiss()            }            // below line is use to set cancelable to avoid             // closing of dialog box when clicking on the screen.            dialog.setCancelable(false)                          // on below line we are setting            // content view to our view.            dialog.setContentView(view)                          // on below line we are calling             // a show method to display a dialog.            dialog.show()        }    }}
Now run your app and see the output of the app. 
Output:
Kotlin Android
Picked
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Flexbox-Layout in Android
How to Post Data to API using Retrofit in Android?
Kotlin Array
Android UI Layouts
Retrofit with Kotlin Coroutine in Android
Kotlin Setters and Getters
Kotlin when expression