Android Bottom Sheet — How to use it in practice

Where and how to use the bottom sheet according to Material Design guidelines

Just as its name implies, a bottom sheet is anchored to the bottom of your screen and can be displayed either as modal dialog or directly be integrated into a layout.

In this article, we will take a look at this helpful component. We will see in what type of situations you can use it and how to implement each of its variations.

At the end of this article, you should have a deep understanding of how the Android Bottom Sheet component works and how to make use of it.

Usage

The component takes part in the Material Design Guidelines. For a non-modal bottom sheet, the guidelines propose to include it in situations where you want to present additional content to the main UI.

For the modal variation, you can use it to present additional functionalities instead of a menu or provide deep links for interaction with other apps.

Standard Bottom Sheet

The standard bottom sheet is contained directly within the layout and takes place at the very bottom. It can have multiple states. You can either change its visibility programmatically and or changes its state via drag or click events.

The component can have one of the following states:

• STATE_COLLAPSED: The bottom sheet is collapsed but the peek height is visible.
• STATE_EXPANDED: The bottom sheet is expanded and therefore fully visible
• STATE_DRAGGING: The bottom sheet is dragged by the user
• STATE_SETTLING
• STATE_HIDDEN: The bottom sheet is completely hidden, the peek height is ignored

Besides the states, the component also has three behavior flags:

• app:behavior_hideable: Determines if the component can be hidden by dragging it down to the bottom.
• app:behavior_peekHeight: If the component is in the collapsed state, the peek height defines how much of its layout is visible to the user so he knows that there is more content to reveal. Mainly useful when you also enable the drag functionality, so the user knows that he can drag the additional content up.
• app:behavior_skipCollapsed: If the hideablebehavior flag is set to true and also the skipCollapsedflag does not have a collapsed state.

States and behavior flags can be used to control the bottom sheet. Next, we proceed with a look at the standard bottom sheet.

Standard Bottom Sheet in practice

In the following, we will implement a rudimentary Google Maps app that just shows us a map with markers. When you click on a marker, a standard bottom sheet will expand from the bottom of the screen.

You will be able to collapse the bottom sheet either by clicking somewhere on the map or by dragging it down.

In the end, our result will look like the result from the screenshot below.

1 Create the project

We build upon the standard template for creating a new project with the Google Maps Activity template in Android Studio.

Therefore, start by creating a new project with the mentioned template. Go to your app-level buil.gradle file and make sure the following dependencies are included:

2 Add the layouts

Adapt the layout of the activity so it looks like the following:

As you can see, we include our bottom sheet in our main layout. The bottom_sheet.xml layout itself should look like the following:

When you look at the XML file you probably notice that there is no own view component for the bottom sheet. We just set the app:layout_behavior of our ConstraintLayout to com.google.android.material.bottomsheet.BottomSheetBehavior.

The ConstraintLayout has the peek_height set to 0dp, so it’s fully hidden when we set the state to STATE_COLLAPSED.

3 Set up the activity

When you set up your layouts, add the following code to your activity:

When you take a look at the code snippet from above, you will recognize that we created a variable with an BottomSheetBehavior. This class enables us to control the state of our bottom sheet.

Because in our case the bottom sheet is a ConstraintLayout we declare the bottomSheetBehavior variable with the type ConstraintLayout in its diamond operator.

Initially, we want the bottom sheet to be hidden, so we set it to be hidden with our little helper function setBottomSheetVisibility(..). This function just converts the visibility state to the respective BottomSheetBehavior and sets it to the behavior variable. The bottom sheet will then react to its new state.

In the onMapReady() function you can see that we assign a click listener for clicks on our marker. On click of our marker, the bottom sheet is set to be visible and the pieces of information of the marker (title, latitude, and longitude) get assigned to the view of our bottom sheet.

When the user clicks somewhere else on the map, the function we set for the map click listener will trigger and the state of the bottom sheet will be changed to be hidden again.

If you followed the previous steps, you now have a typical app with a Google Maps integration and an example for practical usage of the standard bottom sheet. Next, we take a look at the modal bottom sheet.

Modal Bottom Sheet

Like we already saw, while the standard bottom sheet is directly integrated into your UI, the modal bottom sheet floats above your screen. You can compare it directly with the behavior of a typical AlertDialog.

Unlike the standard bottom sheet, the modal bottom sheet has to be implemented as an own component. It is handled just as you’d implement a DialogFragment.

To get an insight into how the modal bottom sheet can be used in practice, we will implement a typical option picker in the next section.

Modal Bottom in practice

As a practical example, we will implement the UI part of a dialog that will provide options for either taking an image or selecting one via gallery.

Just like we did before, we start by creating our layout.

By copying the code from above you will receive a layout that contains two simulated button containers where you theoretically could assign your click listeners on.

Next, we implement the Bottom Sheet itself:

As you can see we need to extend the BottomSheetDialogFragment. In the code from above, you can also see how to use the bottom sheet in combination with ViewBinding.

To implement the respective click listeners you could just access the View components from the layouts we previously defined.

So now we have our layout and also the code for the BottomSheetDialogFragment implementation. But how to actually show it?

For that purpose, you need to initialize and show it just like any other DialogFragment:

We use the canonical name of the ModalBottomSheetDialogFragment as a tag to make it safe for obfuscation.

By following the previous steps you now should have achieved the following:

Bonus: Change the background image

If you just use the standard background you will have a hard-edged rectangle in which your layout will be contained. If you want to use another background you have to create an extra style and assign it in the initialization of the dialog.

As an example, I will show you how to achieve a background with rounded top corners. First, create a drawable shape with rounded top corners.

To proceed with the next step, we first need to create a custom bottom sheet style and afterward assign it to a BottomSheetDialog style.

Afterward, we go back to our ModalBottomSheetDialogFragment and assign the style in the onCreate()function:

The final result will look like the following:

Conclusion

In this article, we saw how you should use the bottom sheet component by Material Design guidelines. We also took a look at some practical examples for each of the variations.

After following the provided steps you should have an understanding of how to use the bottom sheet component in your Android application.

I hope you had some takeaways, clap if you liked my article, and follow for more!