Skip to main content

Android Development: Using Alert Dialog with Button in Jetpack Compose

Image
by

 


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!



















Tags

Comments

Post a Comment

Popular Posts

How to add background image to your Android project with Jetpack Compose

by
  Introduction: There could be instances when we might decide to use an image as the background instead of the default background color for some specific screens in the Android app we are developing. With the combination of Jetpack Compose and Kotlin programming language in Android Studio, this can be easily achieved. One of the ways to achieve this is to make use of Box layout composable and add the background image as the first element in the Box layout. Box layout makes elements or items placed in it to be stacked on each other; so, every other element will be placed on the first element (which will be a background image in our own case). After adding the Image composable, we can add another layout such as Column or Row or even another Box that will contain the other items (such as Text composable, Button composable, and so on) that should be on the background of the app screen. Demonstration: In this demo, we will be adding a JPEG image named “demo_bg” as our background. Th
Read more

Literature Review: An Important Exercise for Students and Researchers

by
  Introduction Review of literature is a very important exercise which researchers as well as students at both undergraduate and postgraduate levels cannot shy away from, as it identifies and summarizes research and theories that are relevant to their area of interest, and as well sets good foundation for research or theses writing. In this article, we will consider some aspects of literature review such as its meaning, its significance, what it entails, steps to take in writing a good literature review, and some of the things that we need to avoid while reviewing literature. Meaning of literature review Let us first break down the key concepts and see what the dictionary has for us as per the meaning of ‘Literature’ and ‘Review’. In Oxford Advanced Learner’s Dictionary (8 th Edition), literature means “pieces of writing or printed information on a particular subject”. Also, Longman Dictionary of Contemporary English defines literature as "all the books, articles, etc.
Post a Comment
Read more