Getting Started with Bottom Sheets in Android Using Kotlin Part 2 [Beginner Friendly]
Tags: opensource, android, bottomsheet, kotlin
Published: 2023-02-10 20:11:24

## Introduction
As discussed in [part 1 of the article](https://dev.to/arnoldwafula/getting-started-with-bottom-sheets-in-android-using-kotlin-part-1-beginner-friendly-lel), 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. In case you want to learn how to create a fullscreen standard bottom sheet, refer to this [article](https://iamnaran.medium.com/bottom-sheet-above-bottom-navigation-b10a0c92edd) by [Narayan Panthi](https://iamnaran.medium.com/).

## 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](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetDialogFragment)_ class. If you wish to go straight into the source code, click the GitHub link below;
{% embed https://github.com/arnold-wafula/ModalBottomSheet-Medium.git %}

Since we had already set up the project, we will only make changes to 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](https://developer.android.com/reference/androidx/core/widget/NestedScrollView)_. Find the source code below;
{% gist https://gist.github.com/arnold-wafula/d95bfeabdf9c615f809abf0944258288.js %}

---

I created a toolbar that contains a close button which can be used as an alternative to swiping the bottom sheet down to dismiss it. I also added a [drawable](https://github.com/arnold-wafula/ModalBottomSheet-Medium/blob/master/app/src/main/res/drawable/rabbit1.jpg) for the header image.

## Difference between a modal bottom sheet and a fullscreen modal bottom sheet
So you might ask, 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 to it. According to official Android developer [documentation](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetBehavior),

> Bottom sheet behavior is an interaction behavior plugin for a child view of [CoordinatorLayout](https://developer.android.com/reference/androidx/coordinatorlayout/widget/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** — bottom sheet is visible and its maximum height and it is neither dragging nor settling.
2. **STATE_COLLAPSED** — visible but only its peek 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** — the 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](https://github.com/material-components/material-components-android/issues/2335) by [SilverEnd](https://github.com/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;
{% gist https://gist.github.com/arnold-wafula/4af058fe847bbfe1714ff1378f2feb50.js %}

## Output

![Fullscreen Modal Bottom Sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22azehqmi0b7w4h5mypd.png)
[Fullscreen modal bottom sheet Android YouTube](https://www.youtube.com/shorts/e9OfU9sJU9o)

## Advantages of bottom sheets

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

## Conclusion
So that is a simple way to build a fullscreen modal bottom sheet in android. I hope you learned something new 😊. See you on the next one.

Peace ☮️✌️