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 }
                )
            }
        }
    )
}
TextSnippets.kt

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:

Texto visible

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.
Colección de guías rápidas
Aprende a implementar formas en que los usuarios puedan interactuar con tu app ingresando texto y usando otros medios de entrada.
Colección de guías rápidas

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.
Ir a las Preguntas frecuentes Enviar comentarios