AlertDialog in Android using Jetpack Compose

Jetpack Compose had started gaining traction as the modern way to design UI in Android applications. Jetpack Compose simplifies and accelerates UI development on Android with a powerful, fully declarative UI toolkit.

To show an AlertDialog in Jetpack Compose, follow these steps:

1. Setting Up

Make sure you have the necessary dependencies added for Jetpack Compose in your build.gradle file:

implementation 'androidx.compose.ui:ui:1.x.x'       // Replace with the latest version
implementation 'androidx.compose.material:material:1.x.x' // Replace with the latest version
implementation 'androidx.compose.ui:ui-tooling:1.x.x'  // Replace with the latest version

2. Implementing AlertDialog

Here's how you can show a simple AlertDialog in Jetpack Compose:

import androidx.compose.runtime.*
import androidx.compose.ui.platform.LocalContext
import androidx.compose.material.AlertDialog
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.runtime.remember
import androidx.compose.ui.window.DialogProperties

@Composable
fun AlertDialogDemo() {
    val context = LocalContext.current
    var showDialog by remember { mutableStateOf(false) }

    // Button to show the dialog
    Button(onClick = { showDialog = true }) {
        Text(text = "Show Dialog")
    }

    if (showDialog) {
        AlertDialog(
            onDismissRequest = {
                // Dismiss the dialog when back button is pressed or area outside the dialog is clicked
                showDialog = false
            },
            title = {
                Text(text = "Compose AlertDialog")
            },
            text = {
                Text("This is a simple alert dialog in Jetpack Compose.")
            },
            buttons = {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(8.dp),
                    horizontalArrangement = Arrangement.End
                ) {
                    TextButton(onClick = {
                        // Do something when Cancel is clicked
                        showDialog = false
                    }) {
                        Text("Cancel")
                    }

                    TextButton(onClick = {
                        // Do something when Ok is clicked
                        showDialog = false
                        Toast.makeText(context, "Ok clicked!", Toast.LENGTH_SHORT).show()
                    }) {
                        Text("Ok")
                    }
                }
            },
            properties = DialogProperties(dismissOnClickOutside = true, dismissOnBackPress = true)
        )
    }
}

In this example, we have a button that, when clicked, shows an AlertDialog. The dialog has a title, text, and two buttons: "Ok" and "Cancel". The dialog is dismissed either by clicking outside it or pressing the back button.

Include the AlertDialogDemo() Composable inside your main screen or wherever you'd like the dialog to appear.

Creating AlertDialog in Jetpack Compose Android:

Jetpack Compose provides a AlertDialog composable to create alert dialogs. Here's a basic example:

// MainActivity.kt
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.platform.LocalSoftwareKeyboardControllerProvider
import androidx.compose.ui.platform.LocalTextInputService
import androidx.compose.ui.text.input.KeyboardType

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAlertDialog()
        }
    }
}

@Composable
fun MyAlertDialog() {
    var showDialog by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Button(onClick = { showDialog = true }) {
            Text("Show AlertDialog")
        }

        if (showDialog) {
            AlertDialog(
                onDismissRequest = {
                    showDialog = false
                },
                title = {
                    Text("Jetpack Compose AlertDialog")
                },
                text = {
                    Text("This is a simple AlertDialog.")
                },
                confirmButton = {
                    Button(onClick = {
                        showDialog = false
                    }) {
                        Text("OK")
                    }
                }
            )
        }
    }
}

AlertDialog with list items in Jetpack Compose:

You can create an AlertDialog with a list of items using the SingleChoiceAlert composable. For example:

// Inside MyAlertDialog composable
SingleChoiceAlert(
    items = listOf("Option 1", "Option 2", "Option 3"),
    onDismissRequest = { showDialog = false },
    title = { Text("Choose an option") },
    selectedItem = { index -> Text("Selected: ${items[index]}") }
)

Jetpack Compose AlertDialog with input fields example:

You can add custom input fields to the AlertDialog by incorporating TextField or other input components within the composable. For example:

// Inside MyAlertDialog composable
var text by remember { mutableStateOf("") }

AlertDialog(
    onDismissRequest = { showDialog = false },
    title = { Text("Enter text") },
    text = {
        TextField(
            value = text,
            onValueChange = { newText -> text = newText },
            label = { Text("Type something") }
        )
    },
    confirmButton = {
        Button(onClick = {
            // Handle confirmation with the entered text
            showDialog = false
        }) {
            Text("OK")
        }
    }
)