Oculta o muestra la contraseña según un botón de activación del usuario

Puedes crear un ícono para ocultar o mostrar una contraseña según un botón de activación del usuario para mejorar la seguridad y la experiencia del usuario.

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Oculta o muestra una contraseña según el botón de activación del usuario

Para ocultar o mostrar una contraseña según un botón de activación del usuario, crea un campo de entrada para ingresar información y usa un ícono en el que se pueda hacer clic para el botón de activación:

@Composable
fun PasswordTextField() {
    val state = remember { TextFieldState() }
    var showPassword by remember { mutableStateOf(false) }
    BasicSecureTextField(
        state = state,
        textObfuscationMode =
        if (showPassword) {
            TextObfuscationMode.Visible
        } else {
            TextObfuscationMode.RevealLastTyped
        },
        modifier = Modifier
            .fillMaxWidth()
            .padding(6.dp)
            .border(1.dp, Color.LightGray, RoundedCornerShape(6.dp))
            .padding(6.dp),
        decorator = { innerTextField ->
            Box(modifier = Modifier.fillMaxWidth()) {
                Box(
                    modifier = Modifier
                        .align(Alignment.CenterStart)
                        .padding(start = 16.dp, end = 48.dp)
                ) {
                    innerTextField()
                }
                Icon(
                    if (showPassword) {
                        Icons.Filled.Visibility
                    } else {
                        Icons.Filled.VisibilityOff
                    },
                    contentDescription = "Toggle password visibility",
                    modifier = Modifier
                        .align(Alignment.CenterEnd)
                        .requiredSize(48.dp).padding(16.dp)
                        .clickable { showPassword = !showPassword }
                )
            }
        }
    )
}

Puntos clave sobre el código

  • Mantiene el estado de visibilidad de la contraseña enshowPassword.
  • Usa un elemento componible BasicSecureTextField para ingresar la contraseña.
  • Tiene un ícono final en el que se puede hacer clic, que activa o desactiva el valor de showPassword.
  • Define el atributo textObfuscationMode y el estado visible o no visible del ícono final según el estado de showPassword.

Resultados

Figura 1: Activar o desactivar el ícono para mostrar y ocultar la contraseña

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:

El texto es una pieza central de cualquier IU. Descubre las diferentes formas en que puedes presentar texto en tu app para proporcionar una experiencia del usuario encantadora.
Aprende a implementar formas en que los usuarios puedan interactuar con tu app ingresando texto y usando otros medios de entrada.

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.