Material Designing magic!
Full Screen Bottom Sheet
Want to make a bottom sheet that can act as a full screen? Here you go!
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
I am using data binding in this tutorial, so make sure you have added the data binding dependency in the
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
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
CoordinatorLayoutto 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.
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?