Jetpack Compose - Alert dialog

Dialogs provide important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task.

This example demonstrates how to make a default alert dialog in android jet compose.

Attributes of AlertDialog

• 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. 
• backgroundColor to set a background color of an alert dialog. 
• contentColor to set a color for our content of Alert Dialog. 

package com.compose.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.compose.example.ui.theme.ComposeExampleTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeExampleTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainContent()
                }
            }
        }
    }
}


@Composable
fun MainContent() {
    val openDialog = remember { mutableStateOf(false) }
    Box(
        contentAlignment = Alignment.Center
    ) {
        // * Alert dialog Sample
        Button(
            onClick = {
                openDialog.value=true
            },
            modifier = Modifier.align(Alignment.Center)
        ) {
            Text(text = "Alert Dialog Sample")
        }
    }

    //Alert Dialog Sample
    if (openDialog.value) {
        AlertDialog(
            onDismissRequest = {
                // Dismiss the dialog when the user clicks outside the dialog or on the back
                // button. If you want to disable that functionality, simply use an empty
                // onDismissRequest.
                openDialog.value = false
            },
            title = {
                Text(text = "Title")
            },
            text = {
                Text(text = "Turned on by default")
            },
            confirmButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                    }
                ) {
                    Text("Confirm")
                }
            },
            dismissButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                    }
                ) {
                    Text("Dismiss")
                }
            }
        )
    }
}

..

Get More

• Custom dialog: Read More.
• Custom dialog - Requesting Location Permission: Read More.
• Custom dialog - No Internet Connection Full screen: Read More.
• Custom dialog - No Internet Connection Bottom Dialog: Read More.
• Custom Animating Dialog - Location Permission: Read More.

Usage

• A dialog is a modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

• Dialogs are purposefully interruptive, so they should be used sparingly. A less disruptive alternative is to use a menu, which provides options without interrupting a user’s experience.