Alert Dialogs are the UI elements that pop up when the user performs some crucial actions with the application. These window-like elements may contain multiple or single items to select from the list or have the error message and some action buttons. In this article, it’s been discussed how to implement the Alert Dialogs with the single item selection. Look at the following image to differentiate the alert dialogs with action buttons and single item selection. We will implement this project using both Java and Kotlin Programming Languages for Android.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.
Step 2: Working with the XML Files
Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
<? xml version = "1.0" encoding = "utf-8" ?>
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
< Button
android:id = "@+id/openAlertDialogButton"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center_horizontal"
android:layout_marginTop = "64dp"
android:text = "OPEN ALERT DIALOG"
android:textSize = "18sp" />
< TextView
android:id = "@+id/selectedItemPreview"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center_horizontal"
android:layout_marginTop = "16dp"
android:text = "Selected Item is: "
android:textSize = "18sp" />
</ LinearLayout >
|
Output UI:
Step 3: Working with the MainActivity File
Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. There is a need to understand the parts of the AlertDialog with single item selection. Have a look at the following image:
The function used for implementing the single item selection is setSingleChoiceItems which is discussed below:
Syntax:
setSingleChoiceItems (listItems, checkedItem[0], DialogInterface.OnClickListener listener){}
Parameters:
listItems: are the items to be displayed on the alert dialog.
checkedItems: the boolean array maintains the selected values as true and unselected values as false.
DialogInterface.OnMultiChoiceClickListener(): This is a callback when a change in the selection of items takes place.
Invoke the following code. Comments are added inside the code for better understanding.
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
// Button and TextView instances
Button bOpenAlertDialog;
TextView tvSelectedItemPreview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// register both UI elements with their appropriate IDs.
bOpenAlertDialog = findViewById(R.id.openAlertDialogButton);
tvSelectedItemPreview = findViewById(R.id.selectedItemPreview);
// single item array instance to store which element is selected by user initially
// it should be set to zero meaning none of the element is selected by default
final int [] checkedItem = {- 1 };
// handle the button to open the alert dialog with the single item selection when clicked
bOpenAlertDialog.setOnClickListener(v -> {
// AlertDialog builder instance to build the alert dialog
AlertDialog.Builder alertDialog = new AlertDialog.Builder(MainActivity. this );
// set the custom icon to the alert dialog
alertDialog.setIcon(R.drawable.image_logo);
// title of the alert dialog
alertDialog.setTitle( "Choose an Item" );
// list of the items to be displayed to the user in the
// form of list so that user can select the item from
final String[] listItems = new String[]{ "Android Development" , "Web Development" , "Machine Learning" };
// the function setSingleChoiceItems is the function which
// builds the alert dialog with the single item selection
alertDialog.setSingleChoiceItems(listItems, checkedItem[ 0 ], (dialog, which) -> {
// update the selected item which is selected by the user so that it should be selected
// when user opens the dialog next time and pass the instance to setSingleChoiceItems method
checkedItem[ 0 ] = which;
// now also update the TextView which previews the selected item
tvSelectedItemPreview.setText( "Selected Item is : " + listItems[which]);
// when selected an item the dialog should be closed with the dismiss method
dialog.dismiss();
});
// set the negative button if the user is not interested to select or change already selected item
alertDialog.setNegativeButton( "Cancel" , (dialog, which) -> {
});
// create and build the AlertDialog instance with the AlertDialog builder instance
AlertDialog customAlertDialog = alertDialog.create();
// show the alert dialog when the button is clicked
customAlertDialog.show();
});
}
} |
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
// Button and TextView instances
lateinit var bOpenAlertDialog: Button
lateinit var tvSelectedItemPreview: TextView
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// register both UI elements with their appropriate IDs.
bOpenAlertDialog = findViewById(R.id.openAlertDialogButton)
tvSelectedItemPreview = findViewById(R.id.selectedItemPreview)
// single item array instance to store which element is selected by user initially
// it should be set to zero meaning none of the element is selected by default
val checkedItem = intArrayOf(- 1 )
// handle the button to open the alert dialog with the single item selection when clicked
bOpenAlertDialog.setOnClickListener {
// AlertDialog builder instance to build the alert dialog
val alertDialog = AlertDialog.Builder( this )
// set the custom icon to the alert dialog
alertDialog.setIcon(R.drawable.image_logo)
// title of the alert dialog
alertDialog.setTitle( "Choose an Item" )
// list of the items to be displayed to the user in the
// form of list so that user can select the item from
val listItems = arrayOf( "Android Development" , "Web Development" , "Machine Learning" )
// the function setSingleChoiceItems is the function which
// builds the alert dialog with the single item selection
alertDialog.setSingleChoiceItems(listItems, checkedItem[ 0 ]) { dialog, which ->
// update the selected item which is selected by the user so that it should be selected
// when user opens the dialog next time and pass the instance to setSingleChoiceItems method
checkedItem[ 0 ] = which
// now also update the TextView which previews the selected item
tvSelectedItemPreview.setText( "Selected Item is : " + listItems[which])
// when selected an item the dialog should be closed with the dismiss method
dialog.dismiss()
}
// set the negative button if the user is not interested to select or change already selected item
alertDialog.setNegativeButton( "Cancel" ) { dialog, which -> }
// create and build the AlertDialog instance with the AlertDialog builder instance
val customAlertDialog = alertDialog.create()
// show the alert dialog when the button is clicked
customAlertDialog.show()
}
}
} |