Material Designing magic!

Want to make a bottom sheet that can act as a full screen? Here you go!

Mustufa Ansari

Follow

Sep 7, 2019 · 3 min read

A bottom sheet is a good way of representing any kind of user-related info or to place options to get rapid actions from the user, like opening the camera, share, and gallery, etc.

But today we’ll learn how to make a beautiful bottom sheet that can be opened like a full screen by tapping a button. Excited?

Let’s get started!

What we are going to build is:

Let’s make a new project and add the following dependencies in your gradle.build.

I am using data binding in this tutorial, so make sure you have added the data binding dependency in the build.gradle.

dataBinding{
    enabled true
}

To make this bottom sheet, we first need to have a layout that will pop up with the bottom sheet.

Create a layout resource file in the layout directory and paste the following code:

Now you have a layout, it’s time to make a bottom sheet adapter.

BottomSheet.java extends from BottomSheetDialogFragment, so it has some override function, like onCreateDialog().

• onCreateDialog(Bundle savedInstanceState): Override to build your own custom dialog container.

We need to add bottom sheet behavior so we can hide and show the app bar according to the behavior of bottom sheet. We have a BottomSheetBehavior class for this.

According to the documentation, a bottom sheet may be defined as:

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

Bottom sheets have some constants.

• PEEK_HEIGHT_AUTO: Peek at the 16:9 ratio keyline of its parent.
• STATE_COLLAPSED: This indicates the bottom sheet is collapsed.
• STATE_EXPANDED: This indicates the bottom sheet is expanded.

BottomSheetBehavior has a nested class, BottomSheetCallback, which will help us achieve our required result, i.e., hiding or showing the app bar according to the bottom sheet’s state.

In this nested class, there are two abstract methods.

• onSlide(View bottomSheet, float slideOffset), called when the bottom sheet is being dragged.
• onStateChanged(View bottomSheet, int newState), called when the bottom sheet’s state changed.

So these are somehow relative methods that will help us to achieve our goal.

Now, our bottom sheet is ready to pop up on a button click. Let’s go back to our MainActivity.java. Add the following lines of code in your Java class.

Your activity_main.xml should look like this:

Now, let’s run the app and see the magic.

Found this Article useful? Follow me Mustufa Ansari on medium. Check out my most read articles below.

• How to implement copy/paste functionality in android using textView?
• How to make expandable recyclerView without any library?
• Want to make Animated Floating Action Button with More Option?
• Make RecyclerView With beautiful Animations!
• What is AndroidX?

Like my Facebook Page