Android Development: Using Alert Dialog with Button in Jetpack Compose

 

Introduction:

In Android application development, buttons could be programmed to perform some actions (such as navigating to another screen, showing toast message, closing the app, among others) when the user taps or clicks on them.

In this article, we will learn how to make a button to perform the action of displaying an alert message to the user. This would be achieved using a composable function called AlertDialog. Note that we will be demonstrating this with the 'Click Here to Proceed' button located inside the ‘DemoScreen’ composable function in our 'Demo One' Android project from my previous article.

Demonstration:

First, we will open the 'Demo One' project.

‘Demo One’ project is now opened as shown in Figure 1.

Figure 1

Next, above the button composable in our ‘DemoScreen’ composable function, we will define a mutable state variable, set its value to ‘false’, and store it with the name 'showAlertMessage' (as shown in Figure 2). Note that we will be using the 'remember' keyword to remember the current value of 'false' (assigned to the variable) across recompositions. (Press ‘alt+enter’ on the remember function to import it).

Figure 2

Next, we will define the contents for our Alert Dialog. So, we will use 'if statement', pass in 'showAlertMessage' with the value which we already remembered as 'false' (as in Figure 3).

Figure 3

Next, we will define the AlertDialog function and specify the following:

§  'onDismissRequest' parameter which will hide the dialog when the user presses the back button of the device or any part of the screen outside the dialog.

§  'title' which will display the title of our alert message (for example 'CONFIRM').

§  'text' which will display our main alert message. To make the text scrollable (in case you have long statements as your alert message), we will apply 'verticalScroll' modifier with 'rememberScrollState() function. Our alert message will be “Hello User! To navigate to the next page, tap on NEXT button. Thank you.”

§  'confirmButton' which will hide the dialog (by simply setting the value of 'showAlertMessage' to false), and perform the specified action in it when tapped. We will make the background color of the button to be black, and set the text color to white, and make the font weight to be bold.

Figure 4 shows the AlertDialog composable function that we have defined.

Figure 4

Next, inside the onClick parameter of the 'Click Here to Proceed' button, we will update the value of 'showAlertMessage' to true (as in Figure 5), thereby making the Alert Dialog to be displayed.

Figure 5

That's it.

Conclusion:

When the button is clicked, the alert dialog message will now show (as shown in Figure 6). Note that when the user taps on the NEXT button, the alert dialog will close. No further action will be performed because we have not specified more actions within the onClick parameter of the NEXT button.

Figure 6

The lines of code in the MainActivity.kt of our 'Demo One' project are displayed in Figure 7 to 10 as follows:

Figure 7

Figure 8

Figure 9

Figure 10

Thank you for reading.

Happy coding!