Android Bottom Sheet Example


Android Bottom Sheet - Featured

When in 2014, Google introduced Material Design, they introduced many new design components, like Floating Action button, Tabs, Cards, and Bottom Sheets for Android. Although most of the new components were not available for Android at that moment. But over time they released a support library by the name of Design Support Library. Which thankfully helped the developers to utilize the power of material design on Android. Recently a new design component was introduced in this support library called the Bottom Sheet. Here in this Android Bottom Sheet example, we would make a short example using the new component to understand its working. But first lets understand what is an Android Bottom Sheet.

According to material design, Bottom Sheets can be of two types: Persistent and Modal. Here in this example we would make samples for both types of Android Bottom sheets. As per documentation persistent bottom sheets are supposed to be in-app content. Hence they are included right inside the main layout. In a way they are supposed to be integrated with the app or screen. On the other hand Modal Bottom sheets are a little different; they are supposed to be used as the layer on top of your app. Mostly they are inferred as an external entity, like a menu. Also since they are like menus, therefore if they are visible to the user, they do not allow the user to interact with main screen in background. First they need to dismiss the Android Bottom Sheet, only then the user would be allowed to interact with main activity. Lets learn more about them in the next sections, also full source code is available for this example at the bottom of this write-up. But first, lets please include these dependencies in our build.gradle file:

 

Android Bottom Sheet : Persistent

To make some content beautifully slide in and out of a screen, we can use the persistent Bottom Sheets on Android. To make a view as persistent Bottom Sheet in your screen all you need to do is have CoordinatorLayout at the top level of your layout. Next a behavior should be specified in the layout you need to make a Bottom Sheet. To understand better lets define the layout:

This would result in a screen with Android Bottom sheet like this:

This slideshow requires JavaScript.

 

One of the great parts about persistent Bottom Sheets is that, they can be dragged to go full screen, even if they don’t have the content for a full page. On the other hand Modal Bottom Sheets does not allow this.

Also if you closely observe the Android bottom sheet shown above, you may see that it stays below the Action bar. If you wish to make it go over the action bar. Please change the activity theme to Theme.AppCompat.Light.NoActionBar and add the elevation of 4dp in Bottom Sheet. It would start sliding right over the Toolbar (if added). Next lets have a look at the java file for this screen.

In the above piece of code, you may see that I have added a BottomSheetBehavior callback interface, to listen to the changes in Bottom Sheet states. Although in the above code its not serving any purpose, but its added for reference. Full source code is available here:

Source Code

 

Android Bottom Sheet : Modal

Second type of Bottom Sheet is the modal sheet. According to the documentation this component should act as a menu or a sheet which does not allow the users to interact with main screen until it is dismissed. Surprisingly when speaking of Android, this design pattern is similar to a dialog box. Hence a new class BottomSheetDialogFragment was introduced; extending the AppCompatDialogFragment. Which resulted in a perfect modal type Android Bottom Sheet.

Now technically speaking; when we talk of modal type Android bottom sheets, we have to create an XML outside of the activity separately to inflate in the BottomSheetDialogFragment. To start off lets have a look at the XMLs first:

Also have a look at the XML for MainActivity:

Now that we have XMLs in place. Lets have a look at some code for the MainActivity:

Over here you may see that, to actually show a Bottom Sheet we are using an instance of the BottomSheetDialogFragment. Therefore lets have a look at the class for bottom sheet.

As you can see, the working of above class is just like any DialogFragment in Android. Hence we inflated the layout in onCreateView() method, which made the Bottom Sheet to look like:

This slideshow requires JavaScript.

 

Another interesting thing about the modal type android bottom sheets is that, they render themselves on top of the view hierarchy making the background a little dull. Also this type of Bottom sheet automatically covers the action bar or toolbar, as its on top of the view hierarchy. Another thing that distinguishes between the modal and persistent Bottom sheets is that; modal sheets expand until the content is visible, once whole content is visible they don’t expand any further. Unlike the persistent type Android bottom sheet which cover the screen regardless of content. To view the full source code, please refer to the link below:

Source Code

Many apps are starting to use this component; as it has the inbuilt sliding feature, which adds on to a good user experience. In a way the new bottom sheet design component could turn out to be very useful in an Android app. As it gives a new hidden space within the screen, which the user can relate to and slide out at any time. Also since now it has been fully integrated in to the Android platform, I recommend all of the apps should use this component to make apps more interactive and more connected to the user. Hope this helps, connect with us on Twitter, Facebook and Google+ for more updates.

About Mohit Gupt

An android enthusiast, and an iPhone user with a keen interest in development of innovative applications.


Leave a comment

Your email address will not be published. Required fields are marked *

One thought on “Android Bottom Sheet Example