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

Android Development: Addition of Bottom Navigation Bar with Kotlin and Jetpack Compose

by
  Introduction In this article, we will add bottom navigation bar to the second screen of the “Demo One” App that I have been using for demonstrations in my previous Android development articles. The bottom navigation bar will have three navigation items, which are, “Home”, “Info” and “Settings”.  The navigation items would be programmed to render their contents on the screen accordingly when clicked or tapped. Note that the “Demo One” Android project already had a TopAppBar, as added in my previous article. The user interface of the second screen of the Demo One App is as shown in Figure 1. Figure 1 Addition of Needed Dependency The dependency that we will need for the addition of bottom navigation bar to our Android project is called “navigation”. Let us now open the module-level build.gradle file in our Android project and add the version 2.6.0 of the navigation dependency. After the addition of the dependency, we will connect to the internet and then click on “Sync Now” as
Post a Comment
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