Bottom Sheet Dialog Fragment - Android Studio - Kotlin

How to create and show Bottom Sheet Dialog

In this tutorial, we will learn how to implement a Bottom Sheet Dialog Fragment 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

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:id="@+id/main"
    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.devofandroid

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import com.technifysoft.devofandroid.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        //handle click listener, show bottom sheet dialog fragment
        binding.showBottomSheetBtn.setOnClickListener {

            val bottomSheetDialogFragment = MyBottomSheetDialogFragment.newInstance(
                "Atif Pervaiz",
                "+923084703416"
            )
            bottomSheetDialogFragment.show(supportFragmentManager, "MyBottomSheetDialogFragment")
            
        }
    }
}

fragment_my_bottom_sheet_dialog.xml

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

    <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>

MyBottomSheetDialogFragment.kt

package com.technifysoft.devofandroid

import android.os.Bundle
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
import com.technifysoft.devofandroid.databinding.FragmentMyBottomSheetDialogBinding

/**
 * A simple [MyBottomSheetDialogFragment] subclass.
 * Use the [MyBottomSheetDialogFragment.newInstance] factory method to
 * create an instance of this fragment.
 */
class MyBottomSheetDialogFragment : BottomSheetDialogFragment() {

    private lateinit var binding: FragmentMyBottomSheetDialogBinding

    // Rename and change types of parameters
    private var mParamName: String? = null
    private var mParamPhone: String? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        if (arguments != null) {
            mParamName =  arguments?.getString(ARG_PARAM_NAME)
            mParamPhone = arguments?.getString(ARG_PARAM_PHONE)
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        // Inflate the layout for this fragment
        binding = FragmentMyBottomSheetDialogBinding.inflate(inflater, container, false)
        return binding.getRoot()
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        Log.d(TAG, "onViewCreated: Name: $mParamName")
        Log.d(TAG, "onViewCreated: Phone: $mParamPhone")

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

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

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

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

    companion object {
        private const val TAG = "BSDF_TAG"


        // Rename parameter arguments, choose names that match
        // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
        private const val ARG_PARAM_NAME = "name"
        private const val ARG_PARAM_PHONE = "phone"

        /**
         * Use this factory method to create a new instance of
         * this fragment using the provided parameters.
         * 
         * @param paramName  Name of the person.
         * @param paramPhone Phone number of the person.
         * @return A new instance of fragment MyBottomSheetDialogFragment.
         */
        // Rename and change types and number of parameters
        @JvmStatic
        fun newInstance(paramName: String?, paramPhone: String?): MyBottomSheetDialogFragment {
            val fragment = MyBottomSheetDialogFragment()
            val args = Bundle()
            args.putString(ARG_PARAM_NAME, paramName)
            args.putString(ARG_PARAM_PHONE, paramPhone)
            fragment.setArguments(args)
            return fragment
        }
    }
}

Screenshots