Material Designing magic!

Full Screen Bottom Sheet

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

Mustufa Ansari
Sep 7, 2019 · 3 min read
Image for post
Image for post

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:

Image for post
Image for post

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.

bottom sheet layout

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().

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.

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.

Image for post
Image for post

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mustufa Ansari

Written by

📱Mobile Application Developer 🎓Keen Learner 🎓Graduate 🎧Love Music 🎓 Tech Enthusiast!

Better Programming

Advice for programmers.

Mustufa Ansari

Written by

📱Mobile Application Developer 🎓Keen Learner 🎓Graduate 🎧Love Music 🎓 Tech Enthusiast!

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store