Implementing BottomSheet Dialogs in Android with Kotlin/Java

In Android before Material Themes, if we want to pop up a dialog box at the bottom of the page, the general method is to inherit Dialog, and then set the layout, position, height and width to the dialog. If we want to add a bottom-to-top animation, we need to create a new animation file, after introduced Material Design in Android, it is easy way to implement this feature by few of the classes/widgets that officially provided, BottomSheetDialogFragment, BottomSheetDialog and bottomSheetBehavior. By using these classes we can achieve above effects easily with few lines of code.

What is Bottom Sheet Dialog?

Bottom Sheet dialogs are replacement for the regular Android dialogs and menus. The Bottom Sheet is a android UI component that slides up from the bottom of the screen to display some additional ui/content in our application. The base class of the BottomSheet Dialog is android.app.Dialogs

Types of Bottomsheet Dialogs in Android

There are two types of BottomSheet Dialogs in Android

Modal Bottom Sheet Dialog
Persistent BottomSheet Dialog

Modal Bottom Sheet Dialog

This dialog is display as Alert Dialog, it slides up from the bottom of the current screen when user tap on any view/button. This Model sheet contains list of items. Some examples of Model BottomSheet Dialog is Google Drive, Show Image Picker options, GooglePlay Inapp Purchase dialog.

Persistent BottomSheet Dialog

Persistent Bottom Sheet dialogs are provides supplementary content of the current screen. It should be a child of the CoordinatorLayout widget. Some portion of this dialog is visibile to the user on the current screen and it will be include inside the current screen layout. Google Maps Direction is an example of Persistent Bottomsheet dialog. We will discuss about Persistent Bottomsheet Dialog in the coming sections.

In this chapter we are going to create simple Model Bottomsheet dialog with BottomsheetDialog class. We can display bottomsheet with BottomSheetDialogFragment class, we will discuss this in next chapter, Let get started

Initialize Model BottomSheet Dialog

To initilize the dialog we use the different constructors

Kotlin Code

var bottomSheetDialog = BottomSheetDialog(this)

Java Code

BottomSheetDialog bottomSheetDialog=new BottomSheetDialog(MainActivity2.this);

We just created instance of Dialog, to display something inside dialog we need to set the view to the dialog. To set the view we will use setContentView() method by passing the layout id/view to this method.

So let create a simple layout which contians some ui elements to show them at the bottom of the page.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android BottomSheet Dialog"
        android:textSize="28sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.473"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.16" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="show Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Now attache this layout to Bottomsheet dialog

Kotlin Code

var bottomSheetDialog = BottomSheetDialog(this)
bottomSheetDialog.setContentView(R.layout.dialog_layout)

Java Code

BottomSheetDialog bottomSheetDialog=new BottomSheetDialog(MainActivity2.this);
bottomSheetDialog.setContentView(R.layout.dialog_layout);

Now to show this dialog on botton click by "bottomSheetDialog.show()" method

Display BottomSheet Dialog on button onClick method

Kotlin Code

val button=findViewById<Button>(R.id.button)
button.setOnClickListener {
    var bottomSheetDialog = BottomSheetDialog(this)
    bottomSheetDialog.setContentView(R.layout.dialog_layout)
    bottomSheetDialog.show()
}

Java Code

Button button=findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        BottomSheetDialog bottomSheetDialog=new BottomSheetDialog(MainActivity2.this);
        bottomSheetDialog.setContentView(R.layout.dialog_layout);
        bottomSheetDialog.show();
    }
});

After deploy this on device/emulator we can see the below effect

Android BottomSheet dialog example with Kotlin and Java

How to make actions on BottomSheet Dialog

In the above example we have added few views inside Bottomsheet, to make access these views and add click events to them first we need to initialize the view using bottomsheet view and then apply tap events on them

Let write click events for the Bottomsheet items

Kotlin Code

val lnr_edit=bottomSheetDialog.findViewById<View>(R.id.lnr_edit)
val lnr_pay=bottomSheetDialog.findViewById<View>(R.id.lnr_pay)
val lnr_cancel=bottomSheetDialog.findViewById<View>(R.id.lnr_cancel)
lnr_edit!!.setOnClickListener {
   Toast.makeText(applicationContext,"Clicked on Edit",Toast.LENGTH_SHORT).show()
}
lnr_pay!!.setOnClickListener {
    Toast.makeText(applicationContext,"Clicked on Pay",Toast.LENGTH_SHORT).show()
}
lnr_cancel!!.setOnClickListener {
    Toast.makeText(applicationContext,"Clicked on Cancel",Toast.LENGTH_SHORT).show()
}

Java Code:

View lnr_edit=bottomSheetDialog.findViewById(R.id.lnr_edit);
        View lnr_pay=bottomSheetDialog.findViewById(R.id.lnr_pay);
        View lnr_cancel=bottomSheetDialog.findViewById(R.id.lnr_cancel);
lnr_edit.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(getApplicationContext(),"Clicked on Edit",Toast.LENGTH_SHORT).show();
    }
});

lnr_pay.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(getApplicationContext(),"Clicked on Pay",Toast.LENGTH_SHORT).show();
    }
});
lnr_cancel.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(getApplicationContext(),"Clicked on Cancel",Toast.LENGTH_SHORT).show();
    }
});

How do I dismiss Model BottomSheet Dialog

To dismiss the BottomsheetDialog we use dismiss() method

bottomSheetDialog.dismiss()

Complete code for Android Model BottomSheet Dialog

Kotlin code

package rrtutors.com

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

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button=findViewById<Button>(R.id.button)
        var bottomSheetDialog = BottomSheetDialog(this)
        bottomSheetDialog.setContentView(R.layout.dialog_layout)
        val lnr_edit=bottomSheetDialog.findViewById<View>(R.id.lnr_edit)
        val lnr_pay=bottomSheetDialog.findViewById<View>(R.id.lnr_pay)
        val lnr_cancel=bottomSheetDialog.findViewById<View>(R.id.lnr_cancel)
        lnr_edit!!.setOnClickListener {
           Toast.makeText(applicationContext,"Clicked on Edit",Toast.LENGTH_SHORT).show()
        }
        lnr_pay!!.setOnClickListener {
            bottomSheetDialog.dismiss()
            Toast.makeText(applicationContext,"Clicked on Pay",Toast.LENGTH_SHORT).show()
        }
        lnr_cancel!!.setOnClickListener {
            Toast.makeText(applicationContext,"Clicked on Cancel",Toast.LENGTH_SHORT).show()
        }
        button.setOnClickListener {

            bottomSheetDialog.show()
        }
    }
}

Java Code

package rrtutors.com;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.google.android.material.bottomsheet.BottomSheetDialog;

public class MainActivity2 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button=findViewById(R.id.button);
        BottomSheetDialog bottomSheetDialog=new BottomSheetDialog(MainActivity2.this);
        bottomSheetDialog.setContentView(R.layout.dialog_layout);


        View lnr_edit=bottomSheetDialog.findViewById(R.id.lnr_edit);
                View lnr_pay=bottomSheetDialog.findViewById(R.id.lnr_pay);
                View lnr_cancel=bottomSheetDialog.findViewById(R.id.lnr_cancel);
        lnr_edit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(),"Clicked on Edit",Toast.LENGTH_SHORT).show();
            }
        });

        lnr_pay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(),"Clicked on Pay",Toast.LENGTH_SHORT).show();
            }
        });
        lnr_cancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(),"Clicked on Cancel",Toast.LENGTH_SHORT).show();
            }
        });

        
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               
                bottomSheetDialog.show();
            }
        });

    }
}

Keywords:

BottomSheet Dialog, Android BottomSheet DialogFragment

Projects By category