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