How to create android custom dialog

Here we’re gonna discuss how to create a usable custom dialog for every day android work .

Using dialogs for showing some messages or asking user what to do in some situations is a common and necessary feature in android development , so maybe you are tired of simple and ordinary standard dialogs and want to create a custom dialog with good design and some custom features . so let’s discuss how to do that .

First off let’s create a class and makes it a subclass of Dialog class :

class OverlayDialog : Dialog {


 init {
  }

}

Now what we want to do is to assign it a transparent background so that our dialog is not fit into a white dialog container . we do that into init block of our class :

class OverlayDialog : Dialog {


    /**
     * Setup the dialog to have transparent back and place into the center of screen
     */
    init {
        requestWindowFeature(Window.FEATURE_NO_TITLE)
        val window = window
        if (window != null) {
            window.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
            // window.clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
            window.setDimAmount(.45f)
            val params = window.attributes
            params.gravity = Gravity.CENTER
        }
    }


}

In the init block we request window FEATURE_NO_TITLE to make it a full screen view . then using window attribute of dialog view to set a TRANSPARENT background . the dim attribute decides how dark the containing screen should be .

at the end we set window attribute of gravity to be CENTER.

Let’s add some other stuff to make it better :

 class OverlayDialog : Dialog {


    constructor(context: Context) : super(context) {
    }

    constructor(context: Context, themeResId: Int) : super(context, themeResId) {
    }

    protected constructor(context: Context, cancelable: Boolean, cancelListener: DialogInterface.OnCancelListener) : super(context, cancelable, cancelListener) {
    }

    /**
     * Setup the dialog to have transparent back and place into the center of screen
     */
    init{
        requestWindowFeature(Window.FEATURE_NO_TITLE)
        val window = window
        if (window != null) {
            window.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
            //            window.clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
            window.setDimAmount(.45f)
            val params = window.attributes
            params.gravity = Gravity.CENTER or Gravity.CENTER
        }
    }

    override fun setContentView(view: View) {
        super.setContentView(view)
        setupLayout()
    }

    override fun setContentView(layoutResID: Int) {
        super.setContentView(layoutResID)
        setupLayout()
    }

    override fun setContentView(view: View, params: ViewGroup.LayoutParams?) {
        super.setContentView(view, params)
        setupLayout()
    }

    override fun addContentView(view: View, params: ViewGroup.LayoutParams?) {
        super.addContentView(view, params)
        setupLayout()
    }

    private fun setupLayout() {
        val window = window
        window?.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT)
    }

}

Here I override all setContentView and also addContentView methods to do some layout settings , so that after adding view (Custom View) to dialog we make the layout matching parent in the width and wrapping content on the length.

Ok now we have a good dialog class to use it for creating a desired custom class , so let’s create a helper method to show a custom dialog.

object DialogUtils {
    private val TAG = "DialogUtils"


    fun showDescriptionDialog(context: Context,
                              title : String ,
                              message : String,
                              delegate : dialogDelegate?) {


        val overlayDialog = OverlayDialog(context)
        overlayDialog.setCancelable( true )
        val v = LayoutInflater.from(context).inflate(R.layout.description_dialog, null, false)
        val dialogTitle = v.findViewById<TextView>(R.id.dialogTitle)
        val dialogMessage = v.findViewById<TextView>(R.id.dialogMessage)
        val confirmBtn = v.findViewById<TextView>(R.id.dialogConfirm)

        dialogTitle.text = title
        dialogMessage.text = message


        confirmBtn.setOnClickListener { overlayDialog.dismiss() ; delegate?.onConfirm() }

        overlayDialog.setContentView(v)
        overlayDialog.show()
    }


    interface dialogDelegate {
        fun onConfirm()
    }
}

Here we have created an instance of OverlayDialog , also inflate a custom dedicated layout to the dialog and process the view as desired , then we pass our view as OverlayDialog content view , and Done , now we have a dedicated custom dialog with our desired view and callback behavior .

At the end let me show you an instance of dialog that I used in some of my apps :

Thanks for reading my article , hope you enjoy ! .