AlertDialog JetPack Compose

source : https://ourpastimes.com

Let’s compose AlertDialog using/in Jetpack compose.

If you are not aware of Jetpack compose and what it is? then just for the sake of making this tutorial understandable lets first begin with Jetpack compose itself.

What is Jetpack Compose?

According to Compose it is “Android’s modern toolkit for building native UI”, which in turn is created to help developers dive in Declarative UI Pattern(you can click on it, and watch an introductory video on this UI pattern), if you familiar with flutter, swiftUI, or React Native then it’s quiet easy for you grasp and come along.

The idea behind the whole compose thing is to make the UI a first class member, instead of making it dependent on other files such as xml(android),xib(iOS, basically it is also XML) which is imperative style of designing, in which we create the full-functioned UI entity and then hook those components to our business logic via outlets(in iOS), or by using findViewById<>() (in Android) and then mutate them using property getters and setters.

let’s begin with what we intend to learn today.

In order to begin with, lets clear the requirements first

1. Android Studio 4.0 canary 1/2(Preview Version)

Now, lets create a new project and choose “Empty Compose Activity”, it will just basically automate the boilerplate of adding the gradle libraries such as

implementation 'androidx.ui:ui-layout:0.1.0-dev02'
implementation 'androidx.ui:ui-material:0.1.0-dev02'
implementation 'androidx.ui:ui-tooling:0.1.0-dev02'

so that you don’t have to manually figure those out.

and then enter your project details and target platform(minimum will be 21) and let the project creation wizard create the project and sync the project with gradle, and now you see a MainActivity file with the code like below

MainActivity.kt

in here, you see something different setContentView() is no more here and instead we have setContent{} which in turn have the MaterialTheme and a child Composable method which renders the Text()

What is composable method?

Composable( written with @Composable annotation), method is just a sugar method which just help you to organise the code in better fashion and reduce the vertical hight of the renderer setContent{} method

And from the code itself:

Composable functions are the fundamental building blocks of an application built with Compose.
Composable can be applied to a function or lambda to indicate that the function/lambda can be used as part of a composition to describe a transformation from application data into a tree or hierarchy.

and when you run this app, you see something like this:

screenshot

now, let’s add a way to show a dialog, for that we will need a button, let clear the code from the setContent{} and add our own code for button

Button("Show Alert",
        onClick = {
            
        }
)

we just have to add in this code in order to show a button on the UI but as this is not aware of the constraints about it’s height or width it will just fill in the complete view, so we will put it into Column widget

Column {
    Button("Show Alert",
            onClick = {

            }
    )
}

now you might be wondering why column? Then by the official documentation

Column is a composable that places its children in a vertical sequence and is able to assign them heights

now we have to add in the alert dialog as well by using the AlertDialog()

AlertDialog(
    // This is responsible for handling the close requests, this acts as setCancelable(true/false)
    // here you can mutate the state if you want to dissmiss the dialog
    // or do nothing if you don't want it to be dismissed if user clicks
    // outside the alert dialog
    onCloseRequest = {
        showDialog.value = false
    },
    title = {
        Text(text = "Alert Dialog")
    },
    text = {
        Text("JetPack Compose Alert Dialog!")
    },
    confirmButton = {
        Button("Confirm", onClick = {
        })
    }
)

and the code after adding in both composable the code looks like this:

and if you run the app now, you will see both, button and the alert dialog.

button and alert dialog

so in the code, we created in the two composable methods one for adding in the button and one for alert dialog, now in order to mutate the states of the composables or the widgets we need to make them state dependent.

Let’s do it.

val showDialog  = +state{
    false
}
// Here I have created a variable of type State<Boolean> showDialog with default value false

and will use this state variable to show/hide the dialog

now run the app and now you only can see the button only, and on pressing the button the button you can see the alert dialog, now lets hook in the logic to dismiss that dialog button, on pressing the “confirm” button.

This is how the final result looks like.

final destiny

and the final code for the same is

final destiny code

Learn more about Jetpack Compose at

Jetpack Compose | Android Developers