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 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.
What we are going to build in this article?
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 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.
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.
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.
Now run your app and see the output of the app.