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 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 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:
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()
}
}
}