
<p>This article is about BottomSheet, types of BottomSheet, and how to integrate a basic Bottom Sheet in our Android application.</p> 
 
 
 
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-block-buttons-is-layout-flex"> 
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" style="background-color: #520599;" href="https://github.com/arunk7839/AndroidBottomSheetExp" target="_blank" rel="noreferrer noopener"><strong>DOWNLOAD CODE</strong></a></div> 
</div> 
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="c7xM94ZCaF4" title="Android BottomSheet Example in Kotlin"><a placeholder href="https://youtu.be/c7xM94ZCaF4"><img src="https://i.ytimg.com/vi/c7xM94ZCaF4/hqdefault.jpg" layout="fill" object-fit="cover" alt="Android BottomSheet Example in Kotlin"></a></amp-youtube></p> 
<p> ;</p> 
<h4><span style="color: #000080;"><strong>BottomSheet</strong></span></h4> 
 
 
 
<p class="p1">A <span style="color: #008000;"><b>BottomSheet</b></span> is a component that is used to display some information by sliding the view up from the bottom of the screen and also, you can hide this BottomSheet when the message is conveyed to the users. This is a nice way of conveying some message or performing some task in Android.</p> 
 
 
 
<h4 class="p1 wp-block-heading"><span style="color: #000080;"><b>Types of BottomSheet</b></span></h4> 
 
 
 
<p class="p2">BottomSheets is of two types:</p> 
 
 
 
<p><b><span style="color: #0000ff;">Persistent BottomSheet</span>:</b></p> 
<ul class="ul1 wp-block-list"> 
<li class="li2">The Persistent BottomSheet is visible along with other UI components on the screen.</li> 
<li class="li2">Initially, some content of this Persistent BottomSheet is visible(you can set the peek height i.e. the initial height of BottomSheet to 0 also) and when you slide it up, then the rest of the content will appear along with the BottomSheet.</li> 
</ul> 
<p>The following is an example of Persistent BottomSheet:</p> 
<figure id="attachment_2720" aria-describedby="caption-attachment-2720" style="width: 327px" class="wp-caption alignright"><img class="wp-image-2720" src="https://c1ctech.com/wp-content/uploads/2021/07/persistentbs1-576x1024.png" alt="" width="327" height="581" /><figcaption id="caption-attachment-2720" class="wp-caption-text"><strong><span style="color: #800080;">The bottom sheet contains location information over a map.</span></strong></figcaption></figure> 
<figure id="attachment_2721" aria-describedby="caption-attachment-2721" style="width: 305px" class="wp-caption alignnone"><img class="wp-image-2721" src="https://c1ctech.com/wp-content/uploads/2021/07/pbs2-576x1024.png" alt="" width="305" height="543" /><figcaption id="caption-attachment-2721" class="wp-caption-text"><span style="color: #800080;"><strong>The bottom sheet contains media controls in a music app.</strong></span></figcaption></figure> 
<p class="p2"> </p> 
 
 
 
<p><b><span style="color: #0000ff;">Modal BottomSheet</span>:</b> </p> 
<ul class="wp-block-list"> 
<li>Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen.</li> 
<li>Unlike Persistent BottomSheet, it is totally invisible initially, and on certain actions (maybe a button click), it appears from the bottom of the screen.</li> 
<li>It generally contains some list of items and the items of the list correspond to some action.</li> 
<li><strong>Modal bottom sheets</strong> are an alternative to inline menus or simple dialogs on mobile and provide room for additional items, longer descriptions, and iconography. </li> 
</ul> 
<p>The following is an example of Modal BottomSheet:</p> 
<figure id="attachment_2722" aria-describedby="caption-attachment-2722" style="width: 314px" class="wp-caption alignnone"><img class="wp-image-2722" src="https://c1ctech.com/wp-content/uploads/2021/07/modalBottomsheet1-576x1024.png" alt="" width="314" height="558" /><figcaption id="caption-attachment-2722" class="wp-caption-text"><strong><span style="color: #800080;">Use the bottom sheet to present additional screen actions.</span></strong></figcaption></figure> 
<figure id="attachment_2723" aria-describedby="caption-attachment-2723" style="width: 326px" class="wp-caption alignnone"><img class="wp-image-2723" src="https://c1ctech.com/wp-content/uploads/2021/07/modalbottomsheet2-576x1024.png" alt="" width="326" height="580" /><figcaption id="caption-attachment-2723" class="wp-caption-text"><strong><span style="color: #800080;">bottom sheet to provide deep links to another app.</span></strong></figcaption></figure> 
 
 
 
<h4 class="p1 wp-block-heading"><span style="color: #000080;"><b>States of BottomSheet</b></span></h4> 
 
 
 
<p class="p2">Bottom sheets have 5 states and with the help of these states, we can perform various actions according to our needs.</p> 
 
 
 
 
 
<ul class="ul1 wp-block-list"> 
<li class="li2"><b><span style="color: #0000ff;">STATE_COLLAPSED</span>:</b> This state indicates that the BottomSheet is collapsed i.e. the bottom sheet is visible up to its peek height only.</li> 
<li class="li2"><b><span style="color: #0000ff;">STATE_EXPANDED</span>:</b> This state indicates that the BottomSheet is fully expanded to its maximum height and all the content of the BottomSheet is visible.</li> 
<li class="li2"><b><span style="color: #0000ff;">STATE_DRAGGING</span>:</b> This state indicates that the BottomSheet is dragging either in the upward direction or in the downward direction.</li> 
<li class="li2"><b><span style="color: #0000ff;">STATE_SETTLING</span>:</b> This state indicates that the BottomSheet is settling either to the max height or to the peek height. (Sometimes height can be 0 also when behavior_hideable is set to true)</li> 
<li class="li2"><b><span style="color: #0000ff;">STATE_HIDDEN</span>:</b> This state indicates that the BottomSheet is hidden i.e. it is possible only when the value of <strong><span style="color: #008000;">behavior_hideable</span></strong> is set to <strong><span style="color: #008000;">true</span></strong>. Once, the BottomSheet is hidden, you can&#8217;t scroll it to make it visible. To make it visible again, you need to change its state by some action (maybe on some button click).</li> 
</ul> 
<p><span style="color: #0000ff;"><b><i>NOTE:</i></b></span> These states are for Persistent BottomSheet.</p> 
 
 
 
<h4 class="wp-block-heading"><span style="color: #000080;"><strong>Creating new project</strong></span></h4> 
 
 
 
<ol class="wp-block-list"> 
<li>Create a new project by going to <span style="color: #008000;"><b>File </b><span class="s1"><b>⇒</b></span></span><b><span style="color: #008000;"> New Android Project</span>,</b> select<span style="color: #008000;"> <strong>Empty Activity</strong></span>, provide <span style="color: #008000;"><strong>app name</strong></span>, select language to <strong><span style="color: #008000;">kotlin</span> </strong>and then finally click on <span style="color: #0000ff;"><strong>finish</strong></span>.</li> 
<li> 
<p>Open app-level <span style="color: #008000;"><strong>build.gradle</strong></span> file, add the dependency of material design, and sync the project.</p> 
</li> 
</ol> 
 
 
 
<p><span style="color: #0000ff;"><strong>build.gradle</strong></span></p> 
 
 
 
<pre class="wp-block-preformatted">dependencies { 
 <span style="color: #008000;"><strong>//material design</strong></span> 
 implementation 'com.google.android.material:material:1.4.0' 
}</pre> 
 
 
 
<p>Find the latest version of the material design from <a class="markup--anchor" href="https://maven.google.com/web/index.html?q=material#com.google.android.material:material" target="_blank" rel="noopener"><strong><span style="color: #0000ff;">here</span></strong>.</a></p> 
 
 
 
<h4 class="p1"><span style="color: #000080;"><b>Persistent BottomSheet Example</b></span></h4> 
 
 
 
<p>1 . The layout file <span style="color: #008000;"><strong>layout_bottom_sheet.xml</strong></span> represents the UI of the Persistent BottomSheet. It consists of two text views, one for the title and one for the description.</p> 
 
 
 
<p><strong><span style="color: #0000ff;">layout_bottom_sheet.xml</span></strong></p> 
 
 
 
<pre class="wp-block-preformatted"><;?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:id="@+id/bottomSheet" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:background="@color/colorPrimaryDark" 
 app:behavior_hideable="false" 
 app:behavior_peekHeight="40dp" 
 app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">; 
 
 <;TextView 
 android:id="@+id/tvTitle" 
 android:layout_width="0dp" 
 android:layout_height="40dp" 
 android:layout_marginStart="16dp" 
 android:layout_marginEnd="16dp" 
 android:gravity="center_vertical" 
 android:text="@string/title" 
 android:textColor="@android:color/white" 
 android:textSize="22sp" 
 android:textStyle="bold" 
 app:layout_constraintEnd_toEndOf="parent" 
 app:layout_constraintStart_toStartOf="parent" 
 app:layout_constraintTop_toTopOf="parent" />; 
 
 <;TextView 
 android:id="@+id/tvSubtitle" 
 android:layout_width="0dp" 
 android:layout_height="wrap_content" 
 android:layout_margin="16dp" 
 android:text="@string/description" 
 android:textColor="@android:color/white" 
 android:textSize="16sp" 
 app:layout_constraintBottom_toBottomOf="parent" 
 app:layout_constraintEnd_toEndOf="parent" 
 app:layout_constraintStart_toStartOf="parent" 
 app:layout_constraintTop_toBottomOf="@+id/tvTitle" />; 
 
<;/androidx.constraintlayout.widget.ConstraintLayout>;</pre> 
 
 
 
<ul> 
<li><span style="color: #0000ff;"><strong>com.google.android.material.bottomsheet.BottomSheetBehavior</strong></span> : defines the layout behavior.</li> 
</ul> 
 
 
 
 
 
<ul class="ul1 wp-block-list"> 
<li class="li1"><b><span style="color: #0000ff;">behavior_hideable</span>:</b> used to set if the bottom sheet can be hidden totally when we drag it down or not.</li> 
<li class="li1"><b><span style="color: #0000ff;">behavior_peekHeight</span>:</b> This is the height up to which the bottom sheet will be visible in the collapsed state.</li> 
</ul> 
 
 
 
<p>2. Add <strong><span style="color: #0000ff;">layout_bottom_sheet.xml </span></strong>layout to the <span style="color: #008000;"><strong>activity_main.xml</strong> </span>file. It consists of three buttons, one for Persistent BottomSheet, one for BottomSheetDialog, and one for BottomSheetDialogFragment.</p> 
 
 
 
<p><strong><span style="color: #0000ff;">activity_main.xml</span> </strong></p> 
 
 
 
<pre class="wp-block-preformatted"><;?xml version="1.0" encoding="utf-8"?>; 
<;androidx.coordinatorlayout.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" 
 tools:context=".MainActivity">; 
 
 <;androidx.appcompat.widget.AppCompatButton 
 android:id="@+id/btnBottomSheet" 
 android:layout_width="match_parent" 
 android:layout_height="60dp" 
 android:layout_marginStart="12dp" 
 android:layout_marginEnd="12dp" 
 android:text="Show Bottom Sheet" />; 
 
 <;Button 
 android:id="@+id/btnBottomSheetDialog" 
 android:layout_width="match_parent" 
 android:layout_height="60dp" 
 android:layout_marginStart="12dp" 
 android:layout_marginTop="60dp" 
 android:layout_marginEnd="12dp" 
 android:text="Show Bottom Sheet Dialog" />; 
 
 <;Button 
 android:id="@+id/btnBottomSheetDialogFragment" 
 android:layout_width="match_parent" 
 android:layout_height="60dp" 
 android:layout_marginStart="12dp" 
 android:layout_marginTop="120dp" 
 android:layout_marginEnd="12dp" 
 android:text="Show Bottom Sheet Dialog Fragment" />; 
 
 <span style="color: #008000;"><strong><;include layout="@layout/layout_bottom_sheet" />;</strong></span> 
 
<;/androidx.coordinatorlayout.widget.CoordinatorLayout>;</pre> 
 
 
 
<p class="p1"><strong><span style="color: #0000ff;">Note:</span></strong> BottomSheet is the direct child of the CoordinatorLayout.</p> 
 
 
 
<p class="p1">3 . The MainActivity contains the following code:</p> 
 
 
 
<p><strong><span style="color: #0000ff;">MainActivity.kt</span></strong></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>
 
 
 
 
<pre class="wp-block-preformatted">package com.c1ctech.androidbottomsheetexp 
 
import android.os.Bundle 
import android.view.View 
import android.widget.RelativeLayout 
import android.widget.Toast 
import androidx.appcompat.app.AppCompatActivity 
import androidx.constraintlayout.widget.ConstraintLayout 
import com.google.android.material.bottomsheet.BottomSheetBehavior 
import com.google.android.material.bottomsheet.BottomSheetDialog 
import kotlinx.android.synthetic.main.activity_main.* 
import kotlinx.android.synthetic.main.layout_bottom_sheet.* 
 
 
class MainActivity : AppCompatActivity() { 
 private lateinit var bottomSheetBehavior: BottomSheetBehavior<;ConstraintLayout>; 
 
 override fun onCreate(savedInstanceState: Bundle?) { 
 super.onCreate(savedInstanceState) 
 setContentView(R.layout.activity_main) 
 bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet) 
 
 bottomSheetBehavior.addBottomSheetCallback(object : 
 BottomSheetBehavior.BottomSheetCallback() { 
 
 override fun onSlide(bottomSheet: View, slideOffset: Float) { 
 <span style="color: #008000;"><strong> // handle onSlide</strong></span> 
 } 
 
 override fun onStateChanged(bottomSheet: View, newState: Int) { 
 when (newState) { 
 BottomSheetBehavior.STATE_COLLAPSED ->; Toast.makeText( 
 this@MainActivity, 
 "STATE_COLLAPSED", 
 Toast.LENGTH_SHORT 
 ).show() 
 BottomSheetBehavior.STATE_EXPANDED ->; Toast.makeText( 
 this@MainActivity, 
 "STATE_EXPANDED", 
 Toast.LENGTH_SHORT 
 ).show() 
 BottomSheetBehavior.STATE_DRAGGING ->; Toast.makeText( 
 this@MainActivity, 
 "STATE_DRAGGING", 
 Toast.LENGTH_SHORT 
 ).show() 
 BottomSheetBehavior.STATE_SETTLING ->; Toast.makeText( 
 this@MainActivity, 
 "STATE_SETTLING", 
 Toast.LENGTH_SHORT 
 ).show() 
 BottomSheetBehavior.STATE_HIDDEN ->; Toast.makeText( 
 this@MainActivity, 
 "STATE_HIDDEN", 
 Toast.LENGTH_SHORT 
 ).show() 
 else ->; Toast.makeText(this@MainActivity, "OTHER_STATE", Toast.LENGTH_SHORT) 
 .show() 
 } 
 } 
 }) 
 
 btnBottomSheet.setOnClickListener { 
 if (bottomSheetBehavior.state == BottomSheetBehavior.STATE_EXPANDED) { 
 bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED 
 
 } else { 
 bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED 
 
 } 
 } 
 } 
} 
</pre> 
 
 
 
<ul> 
<li><strong><span style="color: #0000ff;">onStateChanged()</span></strong>: override to observe various states of the BottomSheet.</li> 
</ul> 
 
 
 
<p class="p1">Here, On click of the button, we are changing its state i.e. when it is expanded then we are collapsing it and vice-versa.</p> 
 
 
 
<p class="p1">4. Run the app, the bottom sheet displayed at the bottom. Observe the various states of the BottomSheet.</p> 
 
 
 
<figure class="wp-block-image"><img class="wp-image-2712" src="https://c1ctech.com/wp-content/uploads/2021/07/Screenshot_1626516461-576x1024.png" alt="" width="313" height="557" data-wp-editing="1" /> <img class="wp-image-2713" src="https://c1ctech.com/wp-content/uploads/2021/07/Screenshot_1626516469-576x1024.png" alt="" width="313" height="557" /></figure> 
 
 
 
 
 
<h4 class="wp-block-heading"> </h4> 
<h4 class="graf--h3"><span style="color: #000080;"><strong>Modal BottomSheet Example using BottomSheetDialog</strong></span></h4> 
 
 
 
<p>1 . The layout file <span style="color: #008000;"><strong>layout_bottom_sheet_dialog.xml</strong></span> represents the UI of the Modal BottomSheet creating using BottomSheetDialog.</p> 
<p><span style="color: #0000ff;"><strong>layout_bottom_sheet_dialog.xml</strong> </span></p> 
 
 
 
<pre class="wp-block-preformatted"><;?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="match_parent" 
 android:padding="10dp">; 
 
 <;RelativeLayout 
 android:id="@+id/rl_edit" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:padding="8dp" 
 app:layout_constraintEnd_toEndOf="parent" 
 app:layout_constraintStart_toStartOf="parent" 
 app:layout_constraintTop_toTopOf="parent">; 
 
 <;ImageButton 
 android:id="@+id/imgEdit" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_alignParentStart="true" 
 android:layout_centerVertical="true" 
 android:layout_marginStart="6dp" 
 android:background="@android:color/transparent" 
 android:src="@drawable/ic_edit" />; 
 
 <;TextView 
 android:id="@+id/tv_edit" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_centerVertical="true" 
 android:layout_marginStart="6dp" 
 android:layout_toRightOf="@+id/imgEdit" 
 android:text="Edit" />; 
 
 <;/RelativeLayout>; 
 
 <;RelativeLayout 
 android:id="@+id/rl_delete" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:layout_marginTop="10dp" 
 android:padding="8dp" 
 app:layout_constraintEnd_toEndOf="@+id/rl_edit" 
 app:layout_constraintStart_toStartOf="@+id/rl_edit" 
 app:layout_constraintTop_toBottomOf="@+id/rl_edit">; 
 
 
 <;ImageButton 
 android:id="@+id/imgDelete" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_alignParentStart="true" 
 android:layout_centerVertical="true" 
 android:layout_marginStart="6dp" 
 android:background="@android:color/transparent" 
 android:src="@drawable/ic_delete" />; 
 
 <;TextView 
 android:id="@+id/tv_delete" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_centerVertical="true" 
 android:layout_marginStart="6dp" 
 android:layout_toRightOf="@+id/imgDelete" 
 android:text="Delete" />; 
 
 <;/RelativeLayout>; 
 
 <;RelativeLayout 
 android:id="@+id/rl_add" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:layout_marginTop="10dp" 
 android:padding="8dp" 
 app:layout_constraintEnd_toEndOf="@+id/rl_delete" 
 app:layout_constraintStart_toStartOf="@+id/rl_delete" 
 app:layout_constraintTop_toBottomOf="@+id/rl_delete">; 
 
 <;ImageButton 
 android:id="@+id/imgAdd" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_alignParentStart="true" 
 android:layout_centerVertical="true" 
 android:layout_marginStart="6dp" 
 android:background="@android:color/transparent" 
 android:src="@drawable/ic_add" />; 
 
 <;TextView 
 android:id="@+id/tv_add" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_centerVertical="true" 
 android:layout_marginStart="6dp" 
 android:layout_toRightOf="@+id/imgAdd" 
 android:text="Add" />; 
 
 <;/RelativeLayout>; 
 
<;/androidx.constraintlayout.widget.ConstraintLayout>;</pre> 
 
 
 
<p>2 . In MainActivity, add the below function which is invoked on <span style="color: #008000;"><strong>BottomSheetDialog</strong></span> button click.</p> 
 
 
 
<pre class="wp-block-preformatted"><strong><span style="color: #008000;">//setting clicklistener</span></strong><br /> btnBottomSheetDialog.setOnClickListener { 
 showBottomSheetDialog() 
 } 
 
private fun showBottomSheetDialog() { 
 
 val dialog = BottomSheetDialog(this) 
 
 dialog.setContentView(R.layout.layout_bottom_sheet_dialog) 
 
 val RLEdit = dialog.findViewById<;RelativeLayout>;(R.id.rl_edit) 
 val RLDelete = dialog.findViewById<;RelativeLayout>;(R.id.rl_delete) 
 val RLAdd = dialog.findViewById<;RelativeLayout>;(R.id.rl_add) 
 
 RLEdit?.setOnClickListener { //handle click event 
 Toast.makeText(this, "Perform edit operation", Toast.LENGTH_SHORT).show() 
 } 
 RLDelete?.setOnClickListener { //handle click event 
 Toast.makeText(this, "Perform delete operation", Toast.LENGTH_SHORT).show() 
 } 
 RLAdd?.setOnClickListener { //handle click event 
 Toast.makeText(this, "Perform add operation", Toast.LENGTH_SHORT).show() 
 } 
 dialog.show() 
}</pre> 
 
 
 
<p>Here, after creating BottomSheetDialog instance:</p> 
 
 
 
<ul class="wp-block-list"> 
<li>set dialog layout using <strong><span style="color: #008000;">setContentView()</span></strong>.</li> 
<li>get dialog views by its id and set click listeners on it.</li> 
</ul> 
 
 
 
<p>3 . Run the app, the bottom sheet is displayed at the bottom of the screen.<img class="wp-image-2714" src="https://c1ctech.com/wp-content/uploads/2021/07/Screenshot_1626516492-576x1024.png" alt="" width="355" height="631" /> <img class="alignnone wp-image-2718" src="https://c1ctech.com/wp-content/uploads/2021/07/Screenshot_1626541813-576x1024.png" alt="" width="350" height="622" /></p> 
 
 
 
 
 
<h4 class="wp-block-heading"> </h4> 
<h4 class="graf--h3"><span style="color: #000080;"><strong>Modal BottomSheet Example using BottomSheetDialogFragment</strong></span></h4> 
 
 
 
<p>1 . Create a subclass of <strong><span style="color: #008000;">BottomSheetDialogFragment</span></strong> under the root directory, <span style="color: #008000;"><strong>right-click >; New >; Kotlin File/Class, </strong></span>and name it as <strong><span style="color: #008000;">BottomSheetFragment</span></strong>.</p> 
<p><span style="color: #0000ff;"><strong>BottomSheetFragment.kt</strong></span></p> 
 
 
 
<pre class="wp-block-preformatted">package com.c1ctech.androidbottomsheetexp 
 
import android.os.Bundle 
import android.view.LayoutInflater 
import android.view.View 
import android.view.ViewGroup 
import android.widget.Toast 
import com.google.android.material.bottomsheet.BottomSheetDialogFragment 
import kotlinx.android.synthetic.main.layout_bottom_sheet_dialog.* 
 
class BottomSheetFragment : BottomSheetDialogFragment() { 
 
 companion object { 
 
 const val TAG = "CustomBottomSheetDialogFragment" 
 
 } 
 
 override fun onCreateView( 
 inflater: LayoutInflater, 
 container: ViewGroup?, 
 savedInstanceState: Bundle? 
 ): View? { 
 return inflater.inflate(R.layout.layout_bottom_sheet_dialog, container, false) 
 } 
 
 override fun onViewCreated(view: View, savedInstanceState: Bundle?) { 
 super.onViewCreated(view, savedInstanceState) 
 
 rl_edit.setOnClickListener { 
<span style="color: #008000;"><strong> //handle click event 
</strong></span> Toast.makeText(context, "Perform edit operation", Toast.LENGTH_SHORT).show() 
 } 
 rl_delete.setOnClickListener { 
<strong><span style="color: #008000;"> //handle click event 
</span></strong> Toast.makeText(context, "Perform delete operation", Toast.LENGTH_SHORT).show() 
 } 
 rl_add.setOnClickListener { 
<strong><span style="color: #008000;"> //handle click event 
</span></strong> Toast.makeText(context, "Perform add operation", Toast.LENGTH_SHORT).show() 
 } 
 } 
}</pre> 
 
 
 
<p class="p1">Here, we will inflate the layout and handle the button clicks of the inflated layout elements.</p> 
 
 
 
<p>2 . In MainActivity, On click of Button (btnBottomSheetDialogFragment ), we will call the DialogFragment <strong><span style="color: #0000ff;">show()</span></strong> method which will add the fragment to the fragmentManager and display the dialog.</p> 
 
 
 
<pre class="wp-block-preformatted">class MainActivity : AppCompatActivity() { 
 
 override fun onCreate(savedInstanceState: Bundle?) { 
 super.onCreate(savedInstanceState) 
 setContentView(R.layout.activity_main) 
 
<strong><span style="color: #008000;"> //handle click listener 
</span></strong> btnBottomSheetDialogFragment.setOnClickListener { 
 showBottomSheetDialogFragment() 
 } 
 } 
 
<span style="color: #008000;"><strong> //Display the dialog,adding the fragment to the fragmentManager 
</strong></span> private fun showBottomSheetDialogFragment() { 
 BottomSheetFragment().show(getSupportFragmentManager(), BottomSheetFragment.TAG); 
 } 
 }</pre>