Bottom Sheet Android Tutorial - Working with BottomSheet

Have you seen the Bottom Sheet Android Component? It slides up from the Bottom to display some more options to the user. I am pretty sure that you have already seen Bottom Sheet in Google Maps application.

You can also use the Bottom Sheet in your application. And if you want to use it in your app, in this post, I will guide you about integrating the android Bottom sheet in your project.

You can also go through the official guide about the Bottom Sheet.

Table of Contents

1 Types of Bottom Sheet
- 1.1 #1 Persistent Bottom Sheet
- 1.2 #2 Modal Bottom Sheets
2 Persistent Bottom Sheet
3 Modal Bottom Sheet
- 3.1 Designing Bottom Sheet
- 3.2 BottomSheetDialogFragment
4 Bottom Sheet Android Source Code

Types of Bottom Sheet

#1 Persistent Bottom Sheet

As clear from the name, it is persistent at the bottom of the screen. A user can view the full Bottom Sheet by dragging the sheet up vertically. The Bottom Sheet is slightly elevated, and it can display more options or app content to the user. For example, the picture that we saw above is an example of a persistent bottom sheet.

#2 Modal Bottom Sheets

Again as the name suggests, these sheets behave like Modals or dialogues. It shadows the activity or fragment when activated. And if we tap outside the Bottom Sheet, it is dismissed just like a modal. A user can also slide up and slide down to activate and deactivate the Bottom Sheet, respectively.

I hope you got that what exactly is the android bottom sheet and when we can use it in our application. Now let’s learn how we can implement it in an Android Studio Project.

Persistent Bottom Sheet

Creating a new Project

As always we need to create a new android studio project. And for this sample I have created a new android project with an Empty Activity.
Now we will add the material design dependency in our project. To do this, open app level build.gradle file and inside the dependencies block add the following line.

//add material design to your project

implementation 'com.google.android.material:material:1.3.0-alpha01'

Once you have added the above line a gradle sync is needed.

Designing Bottom Sheet

Now let’s design our Bottom Sheet. Here I won’t do some very complex or very beautiful design, but if you want to design your excellent layout, you can. As it is an example, I am creating a straightforward design.

Inside your layout folder, create a file named bottom_sheet_persistent.xml and copy the following code.

100

101

102

103

104

105

106

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"

android:background="#ffffff"

android:paddingBottom="32dp">

<ImageView

android:id="@+id/imageView"

android:layout_width="35dp"

android:layout_height="35dp"

android:layout_marginStart="16dp"

android:layout_marginTop="16dp"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:srcCompat="@drawable/ic_user" />

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="8dp"

android:text="Sophia Connors"

android:textColor="#292929"

android:textSize="16sp"

app:layout_constraintBottom_toBottomOf="@+id/imageView"

app:layout_constraintStart_toEndOf="@+id/imageView"

app:layout_constraintTop_toTopOf="@+id/imageView" />

<ImageView

android:id="@+id/imageView2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="16dp"

android:layout_marginTop="32dp"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/imageView"

app:srcCompat="@drawable/ic_call" />

<TextView

android:id="@+id/textView2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="8dp"

android:text="(650) 555-1122"

android:textColor="#292929"

android:textSize="14sp"

app:layout_constraintBottom_toBottomOf="@+id/imageView2"

app:layout_constraintStart_toEndOf="@+id/imageView"

app:layout_constraintTop_toTopOf="@+id/imageView2" />

<TextView

android:id="@+id/textView3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="4dp"

android:text="Mobile"

android:textSize="12sp"

app:layout_constraintStart_toStartOf="@+id/textView2"

app:layout_constraintTop_toBottomOf="@+id/textView2" />

<View

android:id="@+id/view"

android:layout_width="wrap_content"

android:layout_height="1dp"

android:layout_marginTop="12dp"

android:background="#A3A3A3"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.0"

app:layout_constraintStart_toStartOf="@+id/textView3"

app:layout_constraintTop_toBottomOf="@+id/textView3" />

<ImageView

android:id="@+id/imageView3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="16dp"

android:layout_marginTop="16dp"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/view"

app:srcCompat="@drawable/ic_email" />

<TextView

android:id="@+id/textView4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="sophiacon@gmail.com"

android:textColor="#292929"

android:textSize="16sp"

app:layout_constraintBottom_toBottomOf="@+id/imageView3"

app:layout_constraintStart_toStartOf="@+id/view"

app:layout_constraintTop_toTopOf="@+id/imageView3" />

<TextView

android:id="@+id/textView5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Personal"

android:textSize="12sp"

app:layout_constraintStart_toStartOf="@+id/textView4"

app:layout_constraintTop_toBottomOf="@+id/textView4" />

</androidx.constraintlayout.widget.ConstraintLayout>

The above layout will look something like this.

bottom sheet android design — Bottom Sheet Design

But the above layout is just a simple XML layout and not a Bottom Sheet. And that is why to make the above layout a Bottom Sheet, we need to add some properties to the root layout.
Add these new properties to the root layout of the design, as you can see below.

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"

android:background="#ffffff"

android:paddingBottom="32dp"

android:id="@+id/bottomSheet"

app:behavior_hideable="true"

app:behavior_peekHeight="16dp"

app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

As you can see 3 more properties are added here.
- behavior_hideable: It is true, that means we can completely hide the bottom sheet by sliding it down.
- behavior_peekHeight: It is the height of the sheet that will be visible.
- layout_behavior: It is most important property, as it defines the layout as a Bottom Sheet.
I also added in ID, it is required to access the sheet in our code.

Adding Bottom Sheet to Activity

Our sheet is ready and now we can use it in our Activity or Fragment. We already have a default activity in our existing project that is the MainActivity and here we will add the Bottom Sheet.

Open activity_main.xml and write the following xml code.

<?xml version="1.0" encoding="utf-8"?>

<androidx.coordinatorlayout.widget.CoordinatorLayout 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:layout_width="match_parent"

android:background="#E7E7E7"

android:layout_height="match_parent"

tools:context=".MainActivity">

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Remember for Bottom Sheet, we need CoordinatorLayout. And here we are including the Bottom Sheet that we designed. The above xml code will generate the following view.

We can see the Bottom Sheet in our Activity, and we can also slide it up or slide it down.

Now, let’s see how we can access the BottomSheet in the code to make changes.

Expanding and Collapsing Bottom Sheet

First we will add a button in our activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>

<androidx.coordinatorlayout.widget.CoordinatorLayout 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:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#E7E7E7"

tools:context=".MainActivity">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<Button

android:id="@+id/buttonBottomSheetPersistent"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_margin="16dp"

android:text="Open Persistent Bottom Sheet" />

</LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Then write the following code in MainActivity.kt.

class MainActivity : AppCompatActivity() {

//#1 Defining a BottomSheetBehavior instance

private lateinit var bottomSheetBehavior: BottomSheetBehavior<ConstraintLayout>

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

//#2 Initializing the BottomSheetBehavior

bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet)

//#3 Listening to State Changes of BottomSheet

bottomSheetBehavior.addBottomSheetCallback(object :

BottomSheetBehavior.BottomSheetCallback() {

override fun onSlide(bottomSheet: View, slideOffset: Float) {

}

override fun onStateChanged(bottomSheet: View, newState: Int) {

buttonBottomSheetPersistent.text = when (newState) {

BottomSheetBehavior.STATE_EXPANDED -> "Close Persistent Bottom Sheet"

BottomSheetBehavior.STATE_COLLAPSED -> "Open Persistent Bottom Sheet"

else -> "Persistent Bottom Sheet"

}

})

//#4 Changing the BottomSheet State on ButtonClick

buttonBottomSheetPersistent.setOnClickListener {

val state =

if (bottomSheetBehavior.state == BottomSheetBehavior.STATE_EXPANDED)

BottomSheetBehavior.STATE_COLLAPSED

else

BottomSheetBehavior.STATE_EXPANDED

bottomSheetBehavior.state = state

}

The code is very simple and self explanatory. In case you have any question, please leave your comments below.

This is the Persistent Bottom Sheet, now let’s learn about Modal Bottom Sheet.

Modal Bottom Sheet

Designing Bottom Sheet

For this, we will create a new xml layout file named bottom_sheet_modal.xml.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<ListView

android:id="@+id/listViewOptions"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</LinearLayout>

We often use Modal Bottom Sheets to give user more options. And that is why I have a list here, and we will add options to this list in the code.

BottomSheetDialogFragment

We will create our Modal Bottom Sheet using BottomSheetDialogFragment. It is almost same as creating a DialogFragment. And it is also the subclass of DialogFragment.

Create a new class named MyBottomSheetDialogFragment and write the following code.

class MyBottomSheetDialogFragment : BottomSheetDialogFragment() {

override fun onCreateView(

inflater: LayoutInflater,

container: ViewGroup?,

savedInstanceState: Bundle?

): View? {

return inflater.inflate(R.layout.bottom_sheet_modal, container, false)

}

override fun onActivityCreated(savedInstanceState: Bundle?) {

super.onActivityCreated(savedInstanceState)

val options = listOf<String>(

"Share with Friends",

"Bookmark",

"Add to Favourites",

"More Information"

)

listViewOptions.adapter = ArrayAdapter<String>(

requireContext(),

android.R.layout.simple_list_item_1,

options

)

}

We will fire this Bottom Sheet on a Button Click.
So first add one more button in activity_main.xml.

<Button

android:id="@+id/buttonBottomSheetModal"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_margin="16dp"

android:text="Open Modal Bottom Sheet" />

And inside MainActivity.kt we will add the following piece of code.

buttonBottomSheetModal.setOnClickListener {

MyBottomSheetDialogFragment().apply {

show(supportFragmentManager, tag)

}

And that’s it, you can see your Bottom Sheet by clicking the newly created button.

Now, that’s it for this tutorial friends. In case you have any problem, feel free to comment it below.

Bottom Sheet Android Source Code

In case you need my source code, you can get it from here.

Bottom Sheet Android Source Code

Finally, if you found this post useful, then don’t forget to share it with your friends. Thank You 🙂

Bottom Sheet Android Tutorial – Working with BottomSheet

Types of Bottom Sheet

#1 Persistent Bottom Sheet

#2 Modal Bottom Sheets

Persistent Bottom Sheet

Creating a new Project

Designing Bottom Sheet

Adding Bottom Sheet to Activity

Expanding and Collapsing Bottom Sheet

Modal Bottom Sheet

Designing Bottom Sheet

BottomSheetDialogFragment

Bottom Sheet Android Source Code

Expand Your Knowledge: Next Tutorial Picks

Kotlin Concurrency: coroutineScope vs supervisorScope Explained

Android Interview Questions Blueprint: Your Ultimate Reference

Kotlin Ktor Android Client – Simplifying Android Networking

Android Proto DataStore Mastery with Kotlin

Kotlin Coroutines Tutorial for Android – Start using Coroutines in Your App

Complete React Js environment setup in under 15 minutes