AlertDialog and CustomDialog in Android With Kotlin.

In this blog, we are going to learn how to build AlertDialog and Custom dialog in android with kotlin language. you should have basic knowledge of kotlin, Activity, and Fragment.

What is a Dialog?

A dialog is a small window that prompts the user to make a decision or enter additional information. A dialog is normally used for modal events that require users to take an action before they can proceed. for example, to confirm a user logout we can use AlertDialog, to pick a date we can use DatePickerDialog, to pick a time we can use TimePickerDialog, for downloading information we can use ProgressDialog or we can use custom dialog to contain more information by using DialogFragment class.

There are two main classes for dialogs in android.
android.app.Dialog and androidx.fragment.app.DialogFragment. Dialog Class contains AlertDialog(Confirmation Dialog), DatePickerDialog, TimePickerDialog, ProgressDialog and DialogFragment class contains custom dialog.

Best Practice to use Dialog

1. Avoid Scrollable Dialog.
2. Avoid Multiple dialogs on a single screen.
3. Do not open Dialog automatically.
4. Do not create confusion user action.

Let's see what is AlertDialog

AlertDialog

The AlertDialog class allows us to build a variety of dialog designs. As shown in the figure, there are three regions of an alert dialog as title, content area, and action buttons. these are fixed by the android. And this window is resizeable with the content.

1. Title: This is optional and should be used only when the content area is occupied by a detailed message, a list, or a custom layout.
2. Content area: This can display a message, a list, or another custom layout.
3. Action buttons: There should be no more than three action buttons in a dialog. we can use one, two, or three buttons together.

Positive Button: We should use this to accept and continue with the action (the “OK” action).

Negative Button: We should use this to cancel the action.

Neutral Button: We should use this when the user may not want to proceed with the action, but doesn’t necessarily want to cancel. It appears between the positive and negative buttons. For example, the action might be “Remind me later.” or “can’t say”.

let's see the code

In above builder variable, we can set lots of things as builder.setIcon, builder.setTheme, builder.setItems, builder.setAdapter etc.

Custom Dialog

Now Suppose what if we have more than three buttons or we have lots of design instead of the content area, title, and buttons. what if we want to design the dialog as shown in the figure.

to build these types of dialogs we need to create custom dialog by using DialogFragment class.

DialogFragment is sub-class of a Fragment class and communicates similar to other fragments to the activity. DialogFragment has its own LifeCycle similar to Fragment.

DialogFragment needs to ensure that what is happening with the Fragment and Dialog states remains consistent. To do this, it watches to dismiss events from the dialog and takes care of removing its own state when they happen. This means you should use show(android.app.FragmentManager, java.lang.String) or show(android.app.FragmentTransaction, java.lang.String) to add an instance of DialogFragment to your UI, as these keep track of how DialogFragment should remove itself when the dialog is dismissed.

Now I am going to build the custom dialog as shown in the below figure. let's see the three simple steps.

1. Create your dialog layout

Our first step is to create a design as mentioned in this image. or you can design your own as you want to display in your dialog. you can refer to my XML code for this design.

2. Attach the layout to Dialog(kotlin class).

Create a simple kotlin class. this class should extend a Dialogfragment class. this class will give you LifeCycle methods of Fragment class.

Now you have to inflate the above custom_dialog_fragment.xml file in the onCreateView method. let's see the code.

I made two variable width and height in the onStart() method. these variables are used to resize the dialog size. here the width of 0.85 means, 85% of the window (width) size will be displayed and height of 0.40 means, 40% of the window(height) will be displayed. but here I am not using height. height will be wrap content as mentioned in the code.

3. Final Step (show the dialog)

In the final step, Create your Activity class and attach the above kotlin class(MyCustomDialog.kt) in your activity. let's see the code.

Round Corner your dialog

To round your corner of the dialog, you have to create a .xml file in the drawable folder. I am attaching my file you can refer to this.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
android:color="#FFFFFF"/>
    <corners
        android:radius="30dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

Now attach this file in the onCreateView method in MyCustomDialog.kt class like this.

getDialog()!!.getWindow()?.setBackgroundDrawableResource(R.drawable.round_corner);

For any query, you can directly ask me on Instagram.