Android Bottom Sheet is a component that slides up from the bottom to up in an application. For example, when you have a video to share and you click on the Share button, it will open a one slider form bottom, which contains available apps in your device.

Sometimes it can also have a menu option. In a simple word, the Android Bottom sheet is an area (surface) that containing extra useful content at the bottom of the screen. It’s hidden in the bottom or partial show to the user will be shown to the user on the action.

In this tutorial, you will learn following:

What is Android Bottom Sheet and it’s type Example and code of Bottom sheet.

Types of Bottom Sheets

There are two types of bottom sheets, Standard Bottom Sheet and Modal Bottom Sheet.

Standard bottom sheets : Display content that complements the screen’s primary content. Remain visible screen users can interact with the primary content. Like google maps is show in bottom how much time and km etc detail of destination form your point. Here user can interact with both the bottom sheet and the remain of the screen content.

Modal bottom sheets: Can be alternative to inline menus or simple dialogs on mobile, providing room for additional items, longer descriptions, and iconography. They must be dismissed in order to interact with the underlying content. Example share the location in google map.

Bottom Sheet behavior and States :

Bottom sheets have 5 states:

STATE_COLLAPSED : The bottom sheet is visible but only showing its peek height. This state is usually the ‘resting position’ of a Bottom Sheet

STATE_EXPANDED : The bottom sheet is visible and its maximum height and it is neither dragging or settling.

STATE_DRAGGING : The user is actively dragging the bottom sheet up or down.

STATE_SETTLING : The bottom sheet is settling to specific height after a drag/swipe gesture. This will be the peek height, expanded height, or 0, in case the user action caused the bottom sheet to hide.

STATE_HIDDEN : The bottom sheet is no longer visible.

Source : https://material.io/develop/android/components/bottom-sheet-behavior/

Let’s Build a Example of Android Bottom Sheet :

Step 1. Create new project “ Build Your First Android App in Kotlin

Step 2. Add following color code in “color.xml” layout file

<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="colorApp">#049CA2</color> <color name="colorGrey">#f2f2f2</color> <color name="colorWhite">#FFFFFF</color> </resources> 1 2 3 4 5 6 7 8 9 <? xml version = "1.0" encoding = "utf-8" ?> < resources > < color name = "colorPrimary" > #3F51B5</color> < color name = "colorPrimaryDark" > #303F9F</color> < color name = "colorAccent" > #FF4081</color> < color name = "colorApp" > #049CA2</color> < color name = "colorGrey" > #f2f2f2</color> < color name = "colorWhite" > #FFFFFF</color> < / resources >

Step 3. Create “bottom_sheet.xml” and Add code

This will be use for standard bottom sheet.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/bottom_sheet" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorWhite" android:orientation="vertical" android:paddingBottom="10dp" app:behavior_hideable="true" app:behavior_peekHeight="56dp" app:layout_behavior="android.support.design.widget.BottomSheetBehavior"> <TextView android:layout_width="match_parent" android:layout_height="56dp" android:layout_gravity="center" android:background="@color/colorPrimary" android:gravity="center" android:text="About" android:textColor="@android:color/white" android:textSize="22sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:text="About : tutorial.eyehunt.in" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="30dp" android:text="Done" /> </LinearLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns : android = "http://schemas.android.com/apk/res/android" xmlns : app = "http://schemas.android.com/apk/res-auto" xmlns : tools = "http://schemas.android.com/tools" android : id = "@+id/bottom_sheet" android : layout_width = "match_parent" android : layout_height = "wrap_content" android : background = "@color/colorWhite" android : orientation = "vertical" android : paddingBottom = "10dp" app : behavior_hideable = "true" app : behavior_peekHeight = "56dp" app : layout_behavior = "android.support.design.widget.BottomSheetBehavior" > < TextView android : layout_width = "match_parent" android : layout_height = "56dp" android : layout_gravity = "center" android : background = "@color/colorPrimary" android : gravity = "center" android : text = "About" android : textColor = "@android:color/white" android : textSize = "22sp" / > < TextView android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : layout_margin = "16dp" android : text = "About : tutorial.eyehunt.in" / > < Button android : layout_width = "match_parent" android : layout_height = "wrap_content" android : layout_margin = "30dp" android : text = "Done" / > < / LinearLayout >

Step 4. Create “bottom_sheet_dialog.xml” and Add code

You must add image in mipmap folder.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="16dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="true" android:foreground="?attr/selectableItemBackground" android:orientation="horizontal" android:padding="8dp"> <ImageView android:layout_width="24dp" android:layout_height="24dp" android:layout_marginRight="32dp" android:src="@mipmap/baseline_share_black_24dp" android:tint="#737373" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="Share File" android:textColor="#737373" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="true" android:foreground="?attr/selectableItemBackground" android:orientation="horizontal" android:padding="8dp"> <ImageView android:layout_width="24dp" android:layout_height="24dp" android:layout_marginRight="32dp" android:src="@mipmap/baseline_cloud_upload_black_24dp" android:tint="#737373" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="Upload" android:textColor="#737373" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="true" android:foreground="?attr/selectableItemBackground" android:orientation="horizontal" android:padding="8dp"> <ImageView android:layout_width="24dp" android:layout_height="24dp" android:layout_marginRight="32dp" android:src="@mipmap/baseline_cloud_download_black_24dp" android:tint="#737373" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="Download" android:textColor="#737373" android:textSize="16sp" /> </LinearLayout> </LinearLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 <? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns : android = "http://schemas.android.com/apk/res/android" xmlns : app = "http://schemas.android.com/apk/res-auto" android : layout_width = "match_parent" android : layout_height = "match_parent" android : orientation = "vertical" android : padding = "16dp" > < LinearLayout android : layout_width = "match_parent" android : layout_height = "wrap_content" android : clickable = "true" android : foreground = "?attr/selectableItemBackground" android : orientation = "horizontal" android : padding = "8dp" > < ImageView android : layout_width = "24dp" android : layout_height = "24dp" android : layout_marginRight = "32dp" android : src = "@mipmap/baseline_share_black_24dp" android : tint = "#737373" / > < TextView android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : layout_gravity = "center_vertical" android : text = "Share File" android : textColor = "#737373" android : textSize = "16sp" / > < / LinearLayout > < LinearLayout android : layout_width = "match_parent" android : layout_height = "wrap_content" android : clickable = "true" android : foreground = "?attr/selectableItemBackground" android : orientation = "horizontal" android : padding = "8dp" > < ImageView android : layout_width = "24dp" android : layout_height = "24dp" android : layout_marginRight = "32dp" android : src = "@mipmap/baseline_cloud_upload_black_24dp" android : tint = "#737373" / > < TextView android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : layout_gravity = "center_vertical" android : text = "Upload" android : textColor = "#737373" android : textSize = "16sp" / > < / LinearLayout > < LinearLayout android : layout_width = "match_parent" android : layout_height = "wrap_content" android : clickable = "true" android : foreground = "?attr/selectableItemBackground" android : orientation = "horizontal" android : padding = "8dp" > < ImageView android : layout_width = "24dp" android : layout_height = "24dp" android : layout_marginRight = "32dp" android : src = "@mipmap/baseline_cloud_download_black_24dp" android : tint = "#737373" / > < TextView android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : layout_gravity = "center_vertical" android : text = "Download" android : textColor = "#737373" android : textSize = "16sp" / > < / LinearLayout > < / LinearLayout >

Step 5. Create “main_content.xml” and Add code

Its your app main content with 2 Button to perform a show and hide Android Bottom Sheet.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorGrey" tools:context=".MainActivity" tools:showIn="@layout/activity_main"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="30dp" android:orientation="vertical" android:padding="10dp" android:paddingBottom="20dp"> <Button android:id="@+id/btBottomSheet" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Bottom Sheet" /> <Button android:id="@+id/btBottomSheetDialog" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:text="Bottom Sheet Dialog" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" android:paddingBottom="30dp" android:text="Android Bottom Sheet Example" android:textSize="18dp" /> </LinearLayout> </LinearLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns : android = "http://schemas.android.com/apk/res/android" xmlns : tools = "http://schemas.android.com/tools" android : layout_width = "match_parent" android : layout_height = "match_parent" android : background = "@color/colorGrey" tools : context = ".MainActivity" tools : showIn = "@layout/activity_main" > < LinearLayout android : layout_width = "match_parent" android : layout_height = "wrap_content" android : layout_marginTop = "30dp" android : orientation = "vertical" android : padding = "10dp" android : paddingBottom = "20dp" > < Button android : id = "@+id/btBottomSheet" android : layout_width = "match_parent" android : layout_height = "wrap_content" android : text = "Bottom Sheet" / > < Button android : id = "@+id/btBottomSheetDialog" android : layout_width = "match_parent" android : layout_height = "wrap_content" android : layout_marginTop = "5dp" android : text = "Bottom Sheet Dialog" / > < TextView android : layout_width = "match_parent" android : layout_height = "wrap_content" android : layout_margin = "8dp" android : paddingBottom = "30dp" android : text = "Android Bottom Sheet Example" android : textSize = "18dp" / > < / LinearLayout > < / LinearLayout >

Step 6. Add following code in “activity_main.xml“

A holding all xml file (main_content.xml & bottom_sheet.xml) in one place, using <include>...</include> . its a good practice to use if your screen have common or long code.

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".MainActivity"> <include layout="@layout/main_content" /> <!-- Adding bottom sheet after main content --> <include layout="@layout/bottom_sheet" /> </android.support.design.widget.CoordinatorLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <? xml version = "1.0" encoding = "utf-8" ?> < android . support . design . widget . CoordinatorLayout xmlns : android = "http://schemas.android.com/apk/res/android" xmlns : tools = "http://schemas.android.com/tools" android : layout_width = "match_parent" android : layout_height = "match_parent" android : fitsSystemWindows = "true" tools : context = ".MainActivity" > < include layout = "@layout/main_content" / > < ! -- Adding bottom sheet after main content -- > < include layout = "@layout/bottom_sheet" / > < / android . support . design . widget . CoordinatorLayout >

Step 7. Open the “MainActivity.kt” and add following code

Setting a listener in button and handling behaviour or bottom sheet.

package `in`.eyehunt.androidbottomsheet import android.support.v7.app.AppCompatActivity import android.os.Bundle import android.support.design.widget.BottomSheetBehavior import android.support.design.widget.BottomSheetDialog import android.view.View import android.widget.LinearLayout import kotlinx.android.synthetic.main.bottom_sheet.* import kotlinx.android.synthetic.main.main_content.* class MainActivity : AppCompatActivity() { private lateinit var sheetBehavior: BottomSheetBehavior<LinearLayout> override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) sheetBehavior = BottomSheetBehavior.from<LinearLayout>(bottom_sheet) /** * bottom sheet state change listener * we are changing button text when sheet changed state * */ sheetBehavior.setBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() { override fun onStateChanged(bottomSheet: View, newState: Int) { when (newState) { BottomSheetBehavior.STATE_HIDDEN -> { } BottomSheetBehavior.STATE_EXPANDED -> btBottomSheet.text = "Close Bottom Sheet" BottomSheetBehavior.STATE_COLLAPSED -> btBottomSheet.text = "Expand Bottom Sheet" BottomSheetBehavior.STATE_DRAGGING -> { } BottomSheetBehavior.STATE_SETTLING -> { } } } override fun onSlide(bottomSheet: View, slideOffset: Float) { } }) btBottomSheet.setOnClickListener(View.OnClickListener { expandCloseSheet() }) btBottomSheetDialog.setOnClickListener(View.OnClickListener { val view = layoutInflater.inflate(R.layout.bottom_sheet_dialog, null) val dialog = BottomSheetDialog(this) dialog.setContentView(view) dialog.show() }) } private fun expandCloseSheet() { if (sheetBehavior!!.state != BottomSheetBehavior.STATE_EXPANDED) { sheetBehavior!!.state = BottomSheetBehavior.STATE_EXPANDED btBottomSheet.text = "Close Bottom Sheet" } else { sheetBehavior!!.state = BottomSheetBehavior.STATE_COLLAPSED btBottomSheet.text = "Expand Bottom Sheet" } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 package ` in ` . eyehunt . androidbottomsheet import android . support . v7 . app . AppCompatActivity import android . os . Bundle import android . support . design . widget . BottomSheetBehavior import android . support . design . widget . BottomSheetDialog import android . view . View import android . widget . LinearLayout import kotlinx . android . synthetic . main . bottom_sheet . * import kotlinx . android . synthetic . main . main_content . * class MainActivity : AppCompatActivity ( ) { private lateinit var sheetBehavior : BottomSheetBehavior < LinearLayout > override fun onCreate ( savedInstanceState : Bundle ? ) { super . onCreate ( savedInstanceState ) setContentView ( R . layout . activity_main ) sheetBehavior = BottomSheetBehavior . from < LinearLayout > ( bottom_sheet ) /** * bottom sheet state change listener * we are changing button text when sheet changed state * */ sheetBehavior . setBottomSheetCallback ( object : BottomSheetBehavior . BottomSheetCallback ( ) { override fun onStateChanged ( bottomSheet : View , newState : Int ) { when ( newState ) { BottomSheetBehavior . STATE_HIDDEN -> { } BottomSheetBehavior . STATE_EXPANDED -> btBottomSheet . text = "Close Bottom Sheet" BottomSheetBehavior . STATE_COLLAPSED -> btBottomSheet . text = "Expand Bottom Sheet" BottomSheetBehavior . STATE_DRAGGING -> { } BottomSheetBehavior . STATE_SETTLING -> { } } } override fun onSlide ( bottomSheet : View , slideOffset : Float ) { } } ) btBottomSheet . setOnClickListener ( View . OnClickListener { expandCloseSheet ( ) } ) btBottomSheetDialog . setOnClickListener ( View . OnClickListener { val view = layoutInflater . inflate ( R . layout . bottom_sheet_dialog , null ) val dialog = BottomSheetDialog ( this ) dialog . setContentView ( view ) dialog . show ( ) } ) } private fun expandCloseSheet ( ) { if ( sheetBehavior ! ! . state != BottomSheetBehavior . STATE_EXPANDED ) { sheetBehavior ! ! . state = BottomSheetBehavior . STATE_EXPANDED btBottomSheet . text = "Close Bottom Sheet" } else { sheetBehavior ! ! . state = BottomSheetBehavior . STATE_COLLAPSED btBottomSheet . text = "Expand Bottom Sheet" } } }

Step 8. Now Run the application, in emulator

Output screenshot Android Bottom Sheet example :

Video Output

Download source code Android BottomSheet in kotlin

Do comment if you have any doubt and suggestion on this tutorial.

Note : This example (Project) is developed in Android Studio 3.1.3 . Tested on Android 9 ( Android-P), compile SDK version API 27: Android 8.0 (Oreo) MinSdkVersion=”15″ TargetSdkVersion=”27″ Coding in Kotlin

Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.

Share this: Facebook

WhatsApp

LinkedIn

More

Twitter

Print



Reddit

Tumblr



Pinterest

Pocket



Telegram

Skype



Email

