Exemplo de Alert Dialog

As caixas de diálogo são pequenas janelas que levam o usuário a tomar uma decisão ou inserir informações adicionais. Elas não ocupam toda a tela e são normalmente usadas para eventos modais que exijam que usuários realizem uma ação antes de continuar.

package br.com.gilbercs.exdialog

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Dialog
import br.com.gilbercs.exdialog.ui.theme.ExDialogTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ExDialogTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val openDialog = remember {
                        mutableStateOf(false)
                    }
                    OutlinedButton(onClick = {
                        openDialog.value = true
                    }) {
                        Text(text = "Abrir Alert")
                    }
                    if(openDialog.value == true) {
                        DeleteDialog(openDialog = openDialog, title = "OK")
                    }
                }
            }
        }
    }
}

@Composable
fun DeleteDialog(
    openDialog: MutableState<Boolean>,
    title: String){
    val context = LocalContext.current
    Dialog(onDismissRequest = { openDialog.value}) {
        Surface(
            modifier = Modifier.fillMaxWidth(0.92f),
            color = Color.Transparent) {
            Box(modifier = Modifier.fillMaxWidth()) {
                //Text an Buttons
                Column(
                    modifier = Modifier
                        .padding(top = 30.dp)
                        .fillMaxWidth()
                        .background(
                            color = Color.White,
                            shape = RoundedCornerShape(percent = 10)
                        ),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Spacer(modifier = Modifier.height(height = 50.dp))
                    Text(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(all = 12.dp),
                        text = "Alert Dialog", fontSize = 24.sp, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center)
                    Spacer(modifier = Modifier.height(height = 18.dp))
                    //Buttons
                    Row(modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceAround) {
                        OutlinedButton(
                            onClick = { openDialog.value = false},
                            colors = ButtonDefaults.buttonColors(
                                backgroundColor = Color.Red,
                            )
                        ) {
                            Text(text = "Cancelar", fontWeight = FontWeight.Bold, color = Color.White, fontSize = 18.sp)
                        }
                        OutlinedButton(
                            onClick = { openDialog.value = false},
                            colors = ButtonDefaults.buttonColors(
                                backgroundColor = MaterialTheme.colors.primaryVariant,
                            )) {
                            Text(text = "Confirmar", fontWeight = FontWeight.Bold, color = Color.White, fontSize = 18.sp)
                        }

                    }
                    Spacer(modifier = Modifier.height(height = 18.dp * 2))
                }
                //delete icon
                Icon(
                    modifier = Modifier
                        .size(70.dp)
                        .background(color = Color.White, shape = CircleShape)
                        .border(width = 2.dp, shape = CircleShape, color = Color.Red)
                        .padding(all = 16.dp)
                        .align(Alignment.TopCenter),
                    imageVector = Icons.Default.Delete,
                    contentDescription = "",
                    tint = Color.Red)
            }
        }
    }
}