Getting Started with Bottom Sheets in Android Using Kotlin Part 1 [Beginner Friendly]
Tags: android, bottomsheet, bottomsheetdialogfragment, kotlin
Published: 2023-02-04 17:58:02

![Photo by [Jonathan Kemper](https://unsplash.com/de/@jupp?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/t6Wmvbw_MdI?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1e8nu6veqjz8zyxs2mhy.jpeg)
Hi guys 👋, in this article, I'm going to 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.

Its use has been preferred over dialogs in recent years and as a smartphone user either on Android or iOS, you must have interacted with it. 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 a diverse range of information and layouts, including menu items, actions, and supplemental content.

---

**There are two types of bottom sheets;**

1. Standard bottom sheet
2. Modal bottom sheet

## Standard Bottom Sheet
Also known as persistent bottom sheets, they co-exist with the screens main U.I and allow for simultaneous interaction with both the U.I and itself. It exists in the expanded, collapsed, and hidden states.

A good example of an app that utilizes the standard bottom sheet is Google Maps.
![Standard Bottom sheet. Image courtesy of: https://m3.material.io/components/bottom-sheets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8y04ovn3a6h89th8992d.png)

## Modal Bottom Sheet
Strictly use 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.
![Modal bottom sheet. Image courtesy of: https://m3.material.io/components/bottom-sheets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fqca0z78mp0cwew7yqa.png)

In android development, they extend the [BottomSheetDialogFragment](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetDialogFragment) class to provide functionalities such as behavior, and screen height among others. In this article, I am going to focus on the modal bottom sheets since they have a more popular use case compared to persistent bottom sheets.

If you wish to go straight into the source code, click the GitHub link below;
{% embed https://github.com/arnold-wafula/ModalBottomSheet-Medium.git %}

---

On [Android Studio](https://developer.android.com/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;

{% gist https://gist.github.com/arnold-wafula/192d409a2ec52ed89594064a6f8b2ea8.js %}

Set up the MainActivity file by copy-pasting the code below;

MainActivity.kt
{% gist https://gist.github.com/arnold-wafula/fa071386514ecd6abb66ea0356c3692f.js %}

We will then define the layout for a single item containing an image and text that will appear in the modal bottom sheet. Create a new layout XML file item_bottomsheet and copy-paste the source code below;

item_bottomsheet.xml
{% gist https://gist.github.com/arnold-wafula/81824076de87df3b2c8207e839b4144c.js %}

Finally, the ModalBottomSheetDialog class displays the items defined in the item_bottomsheet.xml.

ModalBottomSheetDialog.kt
{% gist https://gist.github.com/arnold-wafula/a2ad8233a69e4475b0b4a3a500ae2bfa.js %}


Here is the final result;

![Main screen with buttons to launch bottom sheets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2rhhazni301sgq3uckw.png)

![bottom sheet displayed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77h1fjrdw72wi408j9uv.png)

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 of the same.

Peace ☮️✌️