Mostrar ou ocultar a senha com base em uma opção do usuário

É possível criar um ícone para ocultar ou mostrar uma senha com base em uma chave de usuário para melhorar a segurança e a experiência do usuário.

Compatibilidade de versões

Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou mais recente.

Dependências

Mostrar ou ocultar uma senha com base no botão de alternância do usuário

Para mostrar ou ocultar uma senha com base em uma alternância do usuário, crie um campo de entrada para inserir informações e use um ícone clicável para a alternância:

@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

Pontos principais sobre o código

  • Mantém o estado de visibilidade da senha em showPassword.
  • Usa um elemento combinável BasicSecureTextField para a entrada de senha.
  • Tem um ícone de cauda clicável, que alterna o valor de showPassword.
  • Define o atributo textObfuscationMode e o estado visível/invisível do ícone de cauda pelo estado de showPassword.

Resultados

Figura 1. Alternar o ícone de exibição e ocultação da senha.

Coleções que contêm este guia

Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:

Texto de exibição

O texto é uma peça central de qualquer interface. Descubra maneiras diferentes de apresentar texto no app para oferecer uma experiência agradável ao usuário.
Coletânea de guias rápidos
Aprenda a implementar maneiras de os usuários interagirem com seu app inserindo texto e usando outras formas de entrada.
Coletânea de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback