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

Fullscreen Modal Bottom Sheet

Photo by Vojtech Bruzek on Unsplash

Introduction

As part 1 of the article discusses, a bottom sheet is an elevated surface anchored to the bottom of the screen. We also saw how it allows room for more user interface elements, such as images and text.

In this article, we will create a modal bottom sheet that occupies the entire height of the screen. Remember the types of bottom sheets? Modal bottom sheet and Standard bottom sheet. To learn how to create a fullscreen standard bottom sheet, refer to this article by Narayan Panthi.

What Will You Learn?

By the end of the article, you will learn the following;

1. Creating a full-screen bottom sheet
2. What is a bottom sheet behavior
3. Different bottom sheets states
4. Advantages of using bottom sheets

Building the App

Similar to the modal bottom sheet we created in part 1, the fullscreen bottom sheet will extend the BottomSheetDialogFragment class. If you wish to go straight into the source code, click the GitHub link below;

GitHub - arnold-wafula/ModalBottomSheet-Medium: A small project that demonstrates the…

Since we had already set up the project, we will only change two files and add a few resources such as text strings, images, and a drawable. The item_bottomsheet_fullscreen.xml file includes a header image, title, subtitle, and paragraph text inside a NestedScrollView. Find the source code below;

I created a toolbar containing a close button used as an alternative to swiping the bottom sheet down to dismiss it. I also added a drawable for the header image.

Difference Between a Modal Bottom Sheet and a Fullscreen Modal Bottom Sheet

So, what is the difference in implementation between the two? One thing we realize is the height. The fullscreen modal bottom sheet covers the entire screen height. How is this made possible? The peekHeight attribute. But first, we have to set the screen height to MATCH_PARENT.

// Height of the view
bottomSheet.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT

Subsequently, define the bottom sheet behavior and apply the peekHeight attribute. According to official Android developer documentation,

Bottom sheet behavior is an interaction behavior plugin for a child view of CoordinatorLayout to make it work as a bottom sheet.

val behavior = BottomSheetBehavior.from(bottomSheet)
behavior.peekHeight = resources.displayMetrics.heightPixels // Pop-up height

Bottom Sheet Behavior States

There are six states in the bottom sheet behavior;

1. STATE_EXPANDED — The bottom sheet is visible at its maximum height and neither dragging nor settling.
2. STATE_COLLAPSED — visible, but only its peak height is shown. Usually, the ‘resting position’ of a bottom Sheet.
3. STATE_DRAGGING — user is actively dragging the bottom sheet up or down.
4. STATE_HALF_EXPANDED — bottom sheet is half-expanded (used when fitToContents is false).
5. STATE_HIDDEN — the bottom sheet is hidden and no longer visible.
6. STATE_SETTLING — settling to a specific height after a drag/swipe gesture.

To better understand the states, check out this issue by SilverEnd on GitHub. In our project, we only use the expanded state.

behavior.state = BottomSheetBehavior.STATE_EXPANDED // Expanded state

With that understanding, you can now copy FullscreenBottomSheetDialog.kt source code below and paste it into your project;

Output

Fullscreen bottom sheet

https://www.youtube.com/shorts/e9OfU9sJU9o

Advantages of Bottom Sheets

• Swipeable — bottom sheets allow for an interactive user experience.
• Easily Accessible — bottom sheets are anchored at the bottom of the screen, so interacting with them is easy.

Conclusion

That is a simple way to build a fullscreen modal bottom sheet in Android. I hope you learned something new 😊.

Thank you for reading 🥳. Tap the “Give a tip” button below the article to support me.

See you at the next one.

Peace ☮️✌️