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

Modal Bottom Sheet

Arnold Wafula
3 min readFeb 3, 2023
Photo by Jonathan Kemper on Unsplash

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;

  1. Standard bottom sheet
  2. 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.

Standard Bottom sheet. Image courtesy of: https://m3.material.io/components/bottom-sheets

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.

Modal bottom sheet. Image courtesy of: https://m3.material.io/components/bottom-sheets

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 ā˜®ļøāœŒļø

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Arnold Wafula
Arnold Wafula

Written by Arnold Wafula

NATIVE ANDROID DEVELOPER & TECHNICAL WRITER. OPEN TO GIGS. CONTACT ME AT arnold.wafula0@gmail.com

No responses yet

What are your thoughts?