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.

Resultados

Figura 1: Cómo activar y desactivar el ícono de mostrar y ocultar contraseña.

Compatibilidad de versiones

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

Dependencias

Mostrar u ocultar una contraseña según el botón de activación del usuario

Para mostrar u ocultar 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 en showPassword.
  • 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.

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones seleccionadas de Guías rápidas 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 agradable.
Colección de guías rápidas
Aprende a implementar formas para que los usuarios interactúen 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 y obtén información sobre las guías rápidas, o bien comunícate con nosotros y cuéntanos tu opinión.
Ir a las Preguntas frecuentes Cómo enviar comentarios