Getting Started with Bottom Sheets in Android Using Kotlin Part 1 (Beginner Friendly)
Modal Bottom Sheet

Hi guys š, in this article, I will delve into what a bottom sheet is, its common uses, and how it can be implemented in Android development using Kotlin. I will cover its implementation in the traditional view system (XML-based).
Without further ado, we can ask ourselves the question. What is a bottom sheet?
According to Googleās material.io documentation, a bottom sheet is a surface containing supplementary content that are anchored to the bottom of the screen and can be dismissed in order to interact with the underlying content.
As a smartphone user, either on Android or iOS, you must have interacted with it as it has been preferred over dialogs in recent years. Personally, an avid YouTube user, it is heavily and perfectly integrated within its U.I.
It is also worth noting that they are flexible and can hold diverse information and layouts, including menu items, actions, and supplemental content.
There are two types of bottom sheets;
- Standard bottom sheet
- Modal bottom sheet
Standard Bottom Sheet
Also known as persistent bottom sheets, they co-exist with the screen main U.I and allow for simultaneous interaction with the U.I and itself. It exists in the expanded, collapsed, and hidden states.
An excellent example of an app that utilizes the standard bottom sheet is Google Maps.

Modal Bottom Sheet
Strictly used on mobile devices, modal bottom sheets block interaction with the rest of the screen and serve as a perfect alternative to dialogs, as they provide more room and allow for the use of views such as Images and Text.

In Android development, they extend the BottomSheetDialogFragment class to provide behavior and screen height functionalities. In this article, I will focus on the modal bottom sheets since they have a more widespread use case than persistent ones.
If you wish to go straight into the source code, click the GitHub link below;
Building the App
On Android Studio, Googleās official IDE for Android development, navigate to File->New->New Project. Under the templates tab, choose Phone and Tablet and select Empty Activity. Letās start by creating the activity_main layout;
activity_main.xml
Set up the MainActivity file by copy-pasting the code below;
MainActivity.kt
We will then define the layout for a single item containing an image and text appearing in the modal bottom sheet. Create a new layout XML file item_bottomsheet and copy-paste the source code below;
item_bottomsheet.xml
Finally, the ModalBottomSheetDialog class displays the items defined in the item_bottomsheet.xml.
ModalBottomSheetDialog.kt
Output


Conclusion
So that is a simple way to build the modal bottom sheet in Android. See you in part 2 of the article, where I will dive into the fullscreen implementation.
Thank you for reading š„³. Tap the āGive a tipā button below the article to support me.
See you at the next one.
Peace ā®ļøāļø