Alert Dialog (Predefined) in jetpack

In Jetpack Compose, creating an AlertDialog is straightforward using the built-in AlertDialog composable. It allows you to display dialog boxes with customizable content, buttons, and layout.

Basic Example: Simple AlertDialog

import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

@Composable
fun SimpleAlertDialog() {
    val openDialog = remember { mutableStateOf(false) }

    Button(onClick = { openDialog.value = true }) {
        Text("Show Dialog")
    }

    if (openDialog.value) {
        AlertDialog(
            onDismissRequest = { openDialog.value = false },
            title = { Text(text = "Dialog Title") },
            text = { Text("This is a simple AlertDialog example.") },
            confirmButton = {
                Button(onClick = { openDialog.value = false }) {
                    Text("OK")
                }
            },
            dismissButton = {
                Button(onClick = { openDialog.value = false }) {
                    Text("Cancel")
                }
            }
        )
    }
}

Explanation

1. onDismissRequest:

• Handles dialog dismissal when the user taps outside the dialog or the back button.

1. title:

• Sets the title of the dialog.

1. text:

• Defines the dialog content.

1. Buttons:

• Use confirmButton and dismissButton to define actions.

Advanced Example: Custom Layout in AlertDialog

@Composable
fun CustomAlertDialog() {
    val openDialog = remember { mutableStateOf(false) }

    Button(onClick = { openDialog.value = true }) {
        Text("Show Custom Dialog")
    }

    if (openDialog.value) {
        AlertDialog(
            onDismissRequest = { openDialog.value = false },
            title = { Text("Custom Dialog Title") },
            text = {
                Column {
                    Text("This is a custom layout example.")
                    Text("You can add more content here.")
                }
            },
            confirmButton = {
                Button(onClick = { openDialog.value = false }) {
                    Text("Confirm")
                }
            },
            dismissButton = {
                Button(onClick = { openDialog.value = false }) {
                    Text("Dismiss")
                }
            }
        )
    }
}

Customization Options

• Styling:
  Use Modifier with elements inside the dialog (like text or buttons) to customize padding, color, or alignment.
• Full-Screen Dialog:
  Use Dialog for full-screen or more complex dialogs.

import androidx.compose.ui.window.Dialog

@Composable
fun FullScreenDialogExample() {
    val openDialog = remember { mutableStateOf(false) }

    Button(onClick = { openDialog.value = true }) {
        Text("Show Full-Screen Dialog")
    }

    if (openDialog.value) {
        Dialog(onDismissRequest = { openDialog.value = false }) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.White),
                contentAlignment = Alignment.Center
            ) {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Text("This is a full-screen dialog")
                    Spacer(modifier = Modifier.height(16.dp))
                    Button(onClick = { openDialog.value = false }) {
                        Text("Close")
                    }
                }
            }
        }
    }
}

Key Points

1. Use AlertDialog for Simple Dialogs:

• Suitable for confirmation dialogs, input prompts, etc.

1. Use Dialog for Full-Screen or Custom Dialogs:

• Ideal for more complex or fullscreen content.

1. State Management:

• Control dialog visibility using remember or external state.

Jetpack Compose provides a modern and flexible way to create dialogs, making it easy to adapt to different use cases.