Alert Dialog in Android

dialog.gif

You would have noticed that when our phone’s battery is less than 19%, a dialog pops up that alerts us about the remaining battery and suggests to save on the battery saver. That small window that prompts the user to make a decision or enter additional information is known as a Dialog.

dialog.jpg

Alert Dialog:

A dialog that can show a title, up to three buttons, a list of selectable items, or a custom layout.

Android Alert Dialog is built with the use of three fields:

• Title
• Message area
• Action Buttons

Some important methods:

• setTitle() : used displaying the Alert Dialog box title
• setMessage() : used for displaying the Alert Dialog box message
• setIcon() : used to set the icon on Alert dialog box
• setNeutralButton() : set a listener to be invoked when the Neutral button of the dialog is pressed.
• setNegativeButton() : set a listener to be invoked when the Negative button of the dialog is pressed
• setPositiveButton() : set a listener to be invoked when the Positive button of the dialog is pressed

Creating Alert Dialog

First let’s create a button in our layout file, which will trigger the alert:

activity_main.xml

Let’s break down the process of creating Dialog into 4 steps:

1. Create AlertDialog.Builder class object

val builder = MaterialAlertDialogBuilder(this)

2. Set the title and message that you want to show

builder
.setTitle("Conversation with RELATIVES")
.setMessage("Shashi, are you thinking of following your passion?")

3. Set Buttons onClicks

builder
.setNeutralButton("Later") { dialogInterface, buttonId ->
 showMessage("Job ke sath UPSC ka preparation karlo.")
}
.setNegativeButton("No") { dialogInterface, buttonId ->
 showMessage("Very good. Waise shadi ka kya soche?")
}
.setPositiveButton("Yes") { dialogInterface, buttonId ->
 showMessage("Galat dost bana liye ho lagta hai!")
}

4. Create and show the dialog

val dialog = builder.create()
dialog.show()

Fullscreen Alert Dialog

To make the dialog full screen, create the AlertDialog.Builder class and add theme Theme_Material_Light_NoActionBar_Fullscreen (rest of the steps remain same)

val builder = AlertDialog.Builder( this,
 android.R.style.Theme_Material_Light_NoActionBar_Fullscreen
)

Creating a custom dialog

Let’s break down the process of creating Dialog into 5steps:

1. Create custom layout file

In our case, we would create a layout file with:

1 TextView for Title, 1 TextView for message, 3 buttons ( for Neutral, Negative and Positive response )

Custom layout file code:

alert_custom_dialog.xml

2. Create AlertDialog.Builder object

val builder = AlertDialog.Builder(this)

3. Inflate the view and set builder object’s view as your custom layout file -> builder.setView(view)

val view: View =
layoutInflater.inflate(R.layout.custom_alert_layout, null)
builder.setView(view)

4. Set Title Message and Icon ( Optional, skip if you already have a TextView with the title in custom layout ) and create and show the dialog

val dialog = builder.create()
dialog.show()

5. Initialize views present in the custom layout and set onClicks

val btnLater: Button = view.findViewById(R.id.btnLater)
btnLater.setOnClickListener {
 showMessage("Job ke sath UPSC ka preparation karlo.")
 dialog.dismiss()
}
val btnNo: Button = view.findViewById(R.id.btnNo)
btnNo.setOnClickListener {
 showMessage("Very good. Waise shadi ka kya soche?") 
 dialog.dismiss()
}
val btnYes: Button = view.findViewById(R.id.btnYes)
btnYes.setOnClickListener { 
 showMessage("Galat dost bana liye ho lagta hai!")
 dialog.dismiss()
}

Documentation : [Click here]

Project link : [Click here]

For more updates, follow: @shashi-kant10

Article by : Shashi Kant