AlertDialog in Android using Jetpack Compose

Last Updated : 03 Mar, 2025

AlertDialog shows the Alert message and gives the answer in the form of yes or no. Alert Dialog displays the message to warn you and then according to your response, the next step is processed. Android Alert Dialog is built with the use of three fields: Title, Message area, and Action Button.

We have seen AlertDialog in many of the apps, this is used to display a kind of message to our users. In this article, we will see the implementation of Alert Dialog in Android using Jetpack Compose.

Important Attributes of AlertDialog

Attributes	Description
onDismissRequest	to check if the alert dialog is open or not.
title	to add title in our alert dialog.
text	to add a text description to our Alert Dialog.
confirmButton	to set a button for confirmation in Alert Dialog.
dismissButton	to set a dismiss dialog button in Alert Dialog.
containerColor	used to add a background color of an Alert Dialog.
titleContentColor	used to add title color to our Alert Dialog.
textContentColor	used to add text color to our Alert Dialog.
iconContentColor	used to add icon color to our Alert Dialog.
icon	A composable function that defines the icon for the Alert Dialog.
modifier	Used to add padding around the Alert Dialog.
shape	used to define the shape of the Alert Dialog.
tonalElevation	used to define the elevation of the Alert Dialog.
properties	used to define the properties of the Alert Dialog.

Step by Step Implementation

Step 1 : Create a New Project

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Note: Select Kotlin as the programming language.

Step 2 : Working with the MainActivity.kt file

Navigate to app > java > {package-name} > MainActivity.kt. Inside that file add the below code to it. Comments are added inside the code to understand the code in more detail.

MainActivity.kt:

Kotlin

package com.geeksforgeeks.demo

import android.os.Bundle
import androidx.activity.*
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Warning
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.DialogProperties
import com.geeksforgeeks.demo.ui.theme.DemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DemoTheme (dynamicColor = false, darkTheme = false) {
                Surface(color = Color.White) {
                    AlertDialogComponent()
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun AlertDialogComponent() {
    // set state of dialog box
    var showDialog by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.fillMaxWidth().fillMaxHeight().padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // below line is used to add button which open our alert dialog
        Button(onClick = { showDialog = true }) {
            Text("Show Alert Dialog")
        }

        // To check if the dialog is in show
        if (showDialog) {
            // Alert Dialog Box
            AlertDialog(
                // set dismiss request
                onDismissRequest = { showDialog = false },
                // configure confirm button
                confirmButton = {
                    Button(onClick = { showDialog = false }) {
                        // set button text
                        Text("Confirm")
                    }
                },
                // configure dismiss button
                dismissButton = {
                    TextButton(onClick = { showDialog = false }) {
                        // set button text
                        Text("Dismiss")
                    }
                },
                // set icon
                icon = {
                    Icon(imageVector = Icons.Default.Warning, contentDescription = "Warning Icon" )
                },
                // set title text
                title = {
                    Text(text = "Alert Dialog Title", color = Color.Black)
                },
                // set description text
                text = {
                    Text(text = "This is the content of the alert dialog.", color = Color.DarkGray)
                },
                // set padding for contents inside the box
                modifier = Modifier.padding(16.dp),
                // define box shape
                shape = RoundedCornerShape(16.dp),
                // set box background color
                containerColor = Color.White,
                // set icon color
                iconContentColor = Color.Red,
                // set title text color
                titleContentColor = Color.Black,
                // set text color
                textContentColor = Color.DarkGray,
                // set elevation
                tonalElevation = 8.dp,
                // set properties
                properties = DialogProperties(dismissOnBackPress = true, dismissOnClickOutside = false)
            )
        }
    }
}

Output:

Web Developer or Android Developer - Which One is Better Career Choice?

chaitanyamunje

Improve

Article Tags :

AlertDialog in Android using Jetpack Compose

Important Attributes of AlertDialog

Step by Step Implementation

Step 1 : Create a New Project

Step 2 : Working with the MainActivity.kt file

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?