Android Tutorials : BottomSheet Implementation On Android

Android BottomSheet
A bottom sheet is a sheet of material that slides up from the bottom edge of the screen. Bottom sheets are displayed only as a result of a user-initiated action, and can be swiped up to reveal additional content. A bottom sheet can be a temporary modal surface or a persistent structural element of an app.

There are two major types of bottom sheets:

  • Modal bottom sheets are alternatives to menus or simple dialogs. They can also present deep-linked content from other apps. They are primarily for mobile.They appear above other UI elements and must be dismissed in order to interact with the underlying content. When a modal bottom sheet slides into the screen, the rest of the screen dims, giving focus to the bottom sheet.
  • Persistent bottom sheets present in-app content that supplements the main view. It remains visible even when not actively in use, resting at the same elevation as an app and integrating with its content.

We can easily create a BottomSheet dialog by extending BottomSheetDialog class.

 

Some Obvious Steps :

1. Go to your Android SDK Manager and make sure you have got the updated version of Android Support Library and Local Maven repository for support libraries.

BottomSheet

2. Create a new Android Project using Android Studio. Give it a name and select the Minimum SDK on which your app will run on. I chose API 15 : Android 4.0.3 (IceCreamSandwich).

3. When you are prompted to add an activity to your application choose Blank Activity and click on next button.

4. In the next step click on Finish and in few seconds your application should be loaded in Android Studio.

Now here are the steps for the modifications in build file and XML files of your application.

1. Open build.gradle(Module:App) file of your application and add compile ‘com.android.support:design:23.2.1’ inside dependencies section of build.gradle file.

2. Add the following code to activity_main.xml file of your application. I have used a Collapsing Toolbar layout with a Nested ScrollView and a Floating Action Button. You can modify if you want to have different layout for your application.

3. Create a new layout resource file under the layout directory of your application and name it as bottom_sheet.xml and add the following code in it. I have used a ListView to display the items of BottomSheet. You can use a GridView if your application demands it.

4. Create a new layout resource file under the layout directory of your application and name it as bottom_sheet.xml and add the following code in it. You might have to change the padding accordingly if you use a GridView.

5. Also add all the required icons or images in drawable folder of your application. You can download the project from the link given at the end and copy the files in drawable folder of it and paste it in your drawable folder.

Now here are the modifications in MainActivity.java and other java files of your application.

1. Open MainActivity.java file and make the following changes in it.

2. Create a new Java class under your default package and name it as Item.java. Item.java has the following code in it. In Android Parceble classes are used to pass data(custom objects) between two activities.

4. Now you need an adapter. The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database. Create a new Java class under your default package and name it as ItemAdapter.java. ItemAdapter.java has the following code in it.

5. Now for implementing the BottomSheet you need to create a new Java class under the default package of your application and name it as BottomSheet.java. In this class we decide how each item in the ListView should behave. It has the following code in it.

 

That’s it!. You have created a BottomSheet in your application. If you have followed all the steps you can now Run your application and test how it works. The following image shows the BottomSheet generated in this android application.

BottomSheetGif

Download Project

Here is the Video Demo to show the working of this application.

BottomSheet Implementation on Android

3 thoughts on “BottomSheet Implementation on Android

  • April 16, 2016 at 2:38 pm
    Permalink

    Very nice tutorial. Thank you!

    Reply
    • March 17, 2017 at 6:47 am
      Permalink

      How to collapse the bottom sheet when click on the listview of it.i dismiss the dialogue but it doesnt work for me.then what should i do now

      Reply
  • October 21, 2016 at 11:51 am
    Permalink

    Nice tutorial. But i need help handling scrolling in Landscape mode. The entire bottomsheet scrolls down and not the inner content.

    Reply

Leave a Reply to Ullas Cancel reply

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