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: