Android – Working with bottomsheet, Create dialog with bottomseet fargment

BottomSheetDialogFragment

BottomSheetDialog is like a standard dialog, but I stays in bottom of screen. This can be usefull when we want to show some quick actions. To create dialog we need to create one class file and one layout file.

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
import kotlinx.android.synthetic.main.dialog_confirmation.*

class ConfirmationDialogBottomSheet : BottomSheetDialogFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.dialog_confirmation, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        tvTitle.text = arguments?.getString("title")
        tvMsg.text = arguments?.getString("message")
        btnOk.text = arguments?.getString("okButton")
        btnCancel.text = arguments?.getString("cancelButton")
    }

    companion object{
        fun newInstance(title: String, message: String, okButton: String, cancelButton: String) = ConfirmationDialogBottomSheet().apply {
            arguments = Bundle().apply {
                putString("title", title)
                putString("message", message)
                putString("okButton", okButton)
                putString("cancelButton", cancelButton)
            }
        }
    }
}

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="@dimen/_10asdp"
        android:layout_marginTop="@dimen/_10asdp"
        android:layout_marginEnd="@dimen/_10asdp"
        android:textSize="@dimen/_11asdp"
        android:text="Title" />

    <TextView
        android:id="@+id/tvMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tvTitle"
        android:layout_marginStart="@dimen/_10asdp"
        android:layout_marginTop="@dimen/_10asdp"
        android:layout_marginEnd="@dimen/_10asdp"
        android:textSize="@dimen/_14asdp"
        android:text="Message" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnOk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OK"
        android:textSize="@dimen/_10asdp"
        android:textColor="@color/white"
        android:paddingStart="@dimen/_8asdp"
        android:paddingEnd="@dimen/_8asdp"
        android:paddingTop="@dimen/_4asdp"
        android:paddingBottom="@dimen/_4asdp"
        android:minHeight="@dimen/_36asdp"
        android:gravity="center"
        android:minWidth="@dimen/_60asdp"
        android:layout_marginEnd="@dimen/_10asdp"
        app:layout_constraintTop_toBottomOf="@id/tvMsg"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnCancel"
        style="@android:style/Widget.Material.Button.Borderless.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/_10asdp"
        android:gravity="center"
        android:minWidth="@dimen/_60asdp"
        android:minHeight="@dimen/_36asdp"
        android:paddingStart="@dimen/_8asdp"
        android:paddingTop="@dimen/_4asdp"
        android:paddingEnd="@dimen/_8asdp"
        android:paddingBottom="@dimen/_4asdp"
        android:text="OK"
        android:textColor="@color/white"
        android:textSize="@dimen/_10asdp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/btnOk"
        app:layout_constraintTop_toBottomOf="@id/tvMsg" />
</androidx.constraintlayout.widget.ConstraintLayout>

This will create a bottomsheet dialog, but it is not enough. We also need some other information like what user selected yes or no. For that we will create one interface which tell us what user have selected. But first, we need to know how we can show this dialog. It is as simple as simple dialog fragment.

            val dialog = ConfirmationDialogBottomSheet.newInstance("title", "message", "OK", "Cancel")
            dialog.show(childFragmentManager, "")

We need to create one interface which will help us to get information back from dialog

Interface to intercommunicate

interface ConfirmationListener {
    fun confirmed()
    fun notConfirmed()
}


//Now create listener variable in dialog
private var listener: ConfirmationListener? = null

//Create function which assign listener to our variable
    fun setListener(listener: ConfirmationListener){
        this.listener = listener
    }

Set this listener from activity or fragment before showing dialog

           dialog.setListener(object : ConfirmationListener{
                override fun confirmed() {
                    
                }

                override fun notConfirmed() {
                    
                }

            })

We also need to call listener from our dialog

        btnOk.setOnClickListener {
            listener?.confirmed()
            dismissAllowingStateLoss()
        }
        
        btnCancel.setOnClickListener {
            listener?.notConfirmed()
            dismissAllowingStateLoss()
        }