Bottom Sheet Dialog - Android Studio - Kotlin

How to create and show Bottom Sheet Dialog

In this tutorial, we will learn how to implement a Bottom Sheet Dialog in Android Studio using Kotlin. Bottom Sheet Dialogs are a modern UI component from Material Design that slide up from the bottom of the screen to display additional content or actions without leaving the current screen.

Example Use Cases:

• Share options
• Quick action menus
• Simple forms or confirmations

>> Check For Java
>> Check For Kotlin
>> Check For Compose

Code:

layout_bottom_sheet.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"
    android:orientation="vertical"
    android:padding="20dp">

    <TextView
        style="@style/TextAppearance.Material3.TitleMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Choose Option"
        android:textAlignment="center" />

    <TextView
        android:id="@+id/callTv"
        style="@style/TextAppearance.Material3.LabelLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Call" />

    <TextView
        android:id="@+id/messageTv"
        style="@style/TextAppearance.Material3.LabelLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Send Message" />

    <TextView
        android:id="@+id/blockTv"
        style="@style/TextAppearance.Material3.LabelLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Block" />

    <TextView
        android:id="@+id/cancelTv"
        style="@style/TextAppearance.Material3.LabelLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Cancel" />

</LinearLayout>

activity.main.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp"
        android:text="Bottom Sheet Dialog"
        android:textColor="#000"
        android:textSize="20sp" />

    <Button
        android:id="@+id/showBottomSheetBtn"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="100dp"
        android:text="Show Bottom Sheet" />

</LinearLayout>

MainActivity.kt

package com.technifysoft.myapplication

import android.os.Bundle
import android.view.LayoutInflater
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.bottomsheet.BottomSheetDialog

class MainActivityKt : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //init UI Views
        val showBottomSheetBtn = findViewById<Button?>(R.id.showBottomSheetBtn)

        //handle click listener, hide progress dialog
        showBottomSheetBtn.setOnClickListener {
            showBottomSheetDialog()
        }

    }

    private fun showBottomSheetDialog() {
        val view = LayoutInflater.from(this).inflate(R.layout.layout_bottom_sheet, null)

        val dialog = BottomSheetDialog(this)
        dialog.setContentView(view)

        dialog.show()

        val callTv = view.findViewById<TextView?>(R.id.callTv)
        val messageTv = view.findViewById<TextView?>(R.id.messageTv)
        val blockTv = view.findViewById<TextView?>(R.id.blockTv)
        val cancelTv = view.findViewById<TextView?>(R.id.cancelTv)


        callTv.setOnClickListener {
            dialog.dismiss()
            Toast.makeText(this, "Call clicked...!", Toast.LENGTH_SHORT).show()
        }

        messageTv.setOnClickListener {
            dialog.dismiss()
            Toast.makeText(this, "Message clicked...!", Toast.LENGTH_SHORT).show()
        }

        blockTv.setOnClickListener {
            dialog.dismiss()
            Toast.makeText(this, "Block clicked...!", Toast.LENGTH_SHORT).show()
        }

        cancelTv.setOnClickListener {
            dialog.dismiss()
            Toast.makeText(this, "Cancel clicked...!", Toast.LENGTH_SHORT).show()
        }

    }

}

Screenshots: