AlertDialog en Android usando Jetpack Compose

, campos Título, Área de mensaje, Botón de acción.

Hemos visto AlertDialog en muchas de las aplicaciones, esto se usa para mostrar una especie de mensaje a nuestros usuarios. En este artículo veremos la implementación de Alert Dialog en Android usando Jetpack Compose

Atributos de AlertDialog

Atributos

Descripción

onDismissRequest para comprobar si el cuadro de diálogo de alerta está abierto o no. 
título para agregar un título en nuestro cuadro de diálogo de alerta. 
texto para agregar una descripción de texto a nuestro diálogo de alerta. 
botón confirmar para establecer un botón de confirmación en el cuadro de diálogo de alerta. 
DescartarBotón para establecer un botón de diálogo para descartar en el diálogo de alerta. 
color de fondo para establecer un color de fondo de un cuadro de diálogo de alerta. 
contenidoColor para establecer un color para nuestro contenido de Alert Dialog. 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en la versión Canary de Android Studio, consulte Cómo crear un nuevo proyecto en la versión Canary de Android Studio con Jetpack Compose.

Paso 2: trabajar con el archivo MainActivity.kt

Vaya a la aplicación > java > el nombre del paquete de su aplicación y abra el archivo MainActivity.kt . Dentro de ese archivo, agregue el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.

Kotlin

import android.graphics.drawable.shapes.Shape
import android.media.Image
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.*
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Info
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Phone
import androidx.compose.runtime.*
import androidx.compose.runtime.savedinstancestate.savedInstanceState
import androidx.compose.ui.Alignment
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.gfgapp.ui.GFGAppTheme
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.platform.ContextAmbient
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.input.*
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ScrollableColumn {
                // A surface container using the 
                  // 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    // at below line we are calling our 
                      // function for alert dialog.
                    AlertDialogComponent();
                }
            }
        }
    }
}
  
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    GFGAppTheme {
        AlertDialogComponent();
    }
}
  
@Composable
fun AlertDialogComponent() {
    // below line is use to get
    // the context for our app.
    val context = ContextAmbient.current
  
    // below line is use to set our state
    // of dialog box to open as true.
    val openDialog = remember { mutableStateOf(true) }
  
    // below line is to check if the
    // dialog box is open or not.
    if (openDialog.value) {
        // below line is use to
        // display a alert dialog.
        AlertDialog(
            // on dialog dismiss we are setting
            // our dialog value to false.
            onDismissRequest = { openDialog.value = false },
  
            // below line is use to display title of our dialog
            // box and we are setting text color to white.
            title = { Text(text = "Geeks for Geeks", color = Color.White) },
  
            // below line is use to display
            // description to our alert dialog.
            text = { Text("Hello! This is our Alert Dialog..", color = Color.White) },
  
            // in below line we are displaying
            // our confirm button.
            confirmButton = {
                // below line we are adding on click 
                // listener for our confirm button.
                TextButton(
                    onClick = {
                        openDialog.value = false
                        Toast.makeText(context, "Confirm Button Click", Toast.LENGTH_LONG).show()
                    }
                ) {
                    // in this line we are adding 
                    // text for our confirm button.
                    Text("Confirm", color = Color.White)
                }
            },
            // in below line we are displaying
            // our dismiss button.
            dismissButton = {
                // in below line we are displaying
                // our text button
                TextButton(
                    // adding on click listener for this button
                    onClick = {
                        openDialog.value = false
                        Toast.makeText(context, "Dismiss Button Click", Toast.LENGTH_LONG).show()
                    }
                ) {
                    // adding text to our button.
                    Text("Dismiss", color = Color.White)
                }
            },
            // below line is use to add background color to our alert dialog
            backgroundColor = colorResource(id = R.color.teal_200),
              
            // below line is use to add content color for our alert dialog.
            contentColor = Color.White
        )
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación: 

Producción:

Publicación traducida automáticamente

Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *