A simple example of using BottomSheetDialog in Android development using Kotlin
2 min readJun 25, 2020
In this tutorial, you will learn how to implement bottomsheetdialog in your android application in a simple way.
Firstly, let’s get to understand what is a BottomSheetDialog and its implementation
What is BottomSheetDialog?
A BottomSheetDialog is a small styled window that pops from the bottom of an android app.
Why BottomSheetDialog?
- It’s very easy to implement
- It can be customised and styled
- It can be used for so many operations
How to Implement BottomSheetDialog
Follow the simple guide to create a BottomSheetDialog
Step 1
Create a layout with your preferred design
bottom_sheet.xml
<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:focusable="false"
android:focusableInTouchMode="true">
<TextView
android:id="@+id/login_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:text="Create a Post"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@id/emaillayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" /> <com.google.android.material.textfield.TextInputLayout
android:id="@+id/emaillayout"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:hint="Whats on your mind?"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"> <com.google.android.material.textfield.TextInputEditText
android:id="@+id/email"
android:layout_width="match_parent"
android:layout_height="70dp"
android:inputType="textMultiLine"
android:paddingBottom="30dp"
android:text="@{xmlpost.post}" />
</com.google.android.material.textfield.TextInputLayout>
<HorizontalScrollView
android:id="@+id/horinz"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/emaillayout"> <androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"> <Button
android:id="@+id/black"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint="#000060"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" /> <Button
android:id="@+id/blue"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint="#00FFFF"
app:layout_constraintStart_toEndOf="@id/black"
app:layout_constraintTop_toTopOf="parent" /> <Button
android:id="@+id/red"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint="#FF0000"
app:layout_constraintStart_toEndOf="@id/blue"
app:layout_constraintTop_toTopOf="parent" /> <Button
android:id="@+id/orange"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint="#FFA500"
app:layout_constraintStart_toEndOf="@id/red"
app:layout_constraintTop_toTopOf="parent" /> <Button
android:id="@+id/lilac"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint="#c8a2c8"
app:layout_constraintStart_toEndOf="@id/orange"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/pink"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint="#F7347A"
app:layout_constraintStart_toEndOf="@id/lilac"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/purple"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint="#800080"
app:layout_constraintStart_toEndOf="@id/pink"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/seagreen"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint="#5ac18e"
app:layout_constraintStart_toEndOf="@id/purple"
app:layout_constraintTop_toTopOf="parent" /> <Button
android:id="@+id/yellow"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint="#ffd700"
app:layout_constraintStart_toEndOf="@id/seagreen"
app:layout_constraintTop_toTopOf="parent" /> <Button
android:id="@+id/green"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint="#065535"
app:layout_constraintStart_toEndOf="@id/yellow"
app:layout_constraintTop_toTopOf="parent" /> <Button
android:id="@+id/ash"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint="#808080"
app:layout_constraintStart_toEndOf="@id/green"
app:layout_constraintTop_toTopOf="parent" /> <Button
android:id="@+id/brown"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="5dp"
android:backgroundTint=" #794044"
app:layout_constraintStart_toEndOf="@id/green"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout> </HorizontalScrollView> <com.google.android.material.button.MaterialButton
android:id="@+id/loginbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="50dp"
android:text="post"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/horinz" /> <com.google.android.material.button.MaterialButton
android:id="@+id/snapbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="Snap post"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@id/loginbtn"
app:layout_constraintStart_toEndOf="@id/loginbtn"
app:layout_constraintTop_toBottomOf="@id/loginbtn" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 2
you write the code to show the BottomSheetDialog
Fragment
val btnsheet = layoutInflater.inflate(R.layout.bottom_sheet_layout, null)
val dialog = BottomSheetDialog(this.requireContext())
dialog.setContentView(btnsheet)
btnsheet.setOnClickListener {
dialog.dismiss()
} dialog.show()
Activity
val btnsheet = layoutInflater.inflate(R.layout.bottom_sheet_layout, null)
val dialog = BottomSheetDialog(this)
dialog.setContentView(btnsheet)
btnsheet.setOnClickListener {
dialog.dismiss()
} dialog.show()
That's how simple it is to add it to your android project.
