Preenchimento automático no Compose

Alguns apps, como gerenciadores de senhas, podem preencher os componentes em outros apps com dados fornecidos pelo usuário. Apps que preenchem componentes de outros apps são chamados de serviços de preenchimento automático. A estrutura de preenchimento automático gerencia a comunicação entre um app e um serviço de preenchimento automático.

Preencher credenciais e formulários é uma tarefa demorada e propensa a erros. O preenchimento automático permite que os usuários economizem tempo ao preencher campos e minimiza erros de entrada.

Com apenas algumas linhas de código, é possível implementar o preenchimento automático no Compose. Esse recurso oferece os seguintes benefícios aos usuários:

Preencher credenciais

O preenchimento automático permite que os usuários preencham as credenciais das seguintes maneiras:

  • O sistema mostra sugestões de preenchimento automático para o usuário quando ele toca em um campo em que a semântica de preenchimento automático está definida.
  • O sistema mostra sugestões de preenchimento automático para o usuário e as filtra com base no que ele digita.

Salvar credenciais

Os usuários podem salvar credenciais usando o preenchimento automático das seguintes maneiras:

  • O sistema aciona uma caixa de diálogo de salvamento, que solicita que o usuário salve as informações quando ele insere informações novas ou atualizadas em um campo com o preenchimento automático ativado. É possível salvar de duas maneiras:
    • Explicitamente, ao confirmar informações (por exemplo, clicando em um botão)
    • Implicitamente, quando um usuário sai da página.
  • Dependendo do provedor de credenciais, o sistema pode sugerir uma senha forte ao usuário quando um campo tem ContentType.NewPassword definido.

É possível usar o preenchimento automático no app para simplificar a recuperação de dados salvos para os usuários. O preenchimento automático oferece suporte a componentes de texto usando BasicTextField e todos os campos de texto do Material Design que se baseiam nesse componente.

Conf. preench. aut.

Antes de usar as APIs de preenchimento automático no dispositivo ou emulador, ative o preenchimento automático nas Configurações. Nela, é possível especificar um provedor de credenciais para que o preenchimento automático armazene suas credenciais.

Uma página de configurações que mostra como especificar um provedor de credenciais.
Figura 1. Uma página de configurações que mostra como especificar um provedor de credenciais.

Adicionar o preenchimento automático ao campo de texto usando o tipo de conteúdo

Para indicar que um TextField está ativado para preenchimento automático, defina a semântica ContentType com os tipos que o campo pode aceitar. Isso indica aos serviços de preenchimento automático que tipo de dados do usuário pode ser relevante para esse campo específico. Use ContentType.Username para definir um TextField que os usuários possam preencher com o nome de usuário.

Ao definir a semântica ContentType, os usuários podem acessar as informações de preenchimento automático já salvas no provedor de credenciais do dispositivo. Por exemplo, se um usuário já tiver feito login no seu app pelo navegador Chrome no laptop e salvo a senha em um provedor de credenciais, as credenciais serão fornecidas pelo preenchimento automático.

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics { contentType = ContentType.Username }
)

Adicionar campos de preenchimento automático com vários tipos

Em alguns casos, talvez você queira que o TextField assuma mais de um ContentType. Por exemplo, um campo de login pode aceitar um endereço de e-mail ou um nome de usuário. É possível adicionar vários tipos de conteúdo ao TextField com o operador +.

Para conferir todos os tipos de dados disponíveis para salvar com o preenchimento automático, consulte a referência de ContentType.

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)

Preencher dados com o Preenchimento Automático

Ao adicionar um ContentType em um TextField, não é preciso fazer mais nada para que os usuários possam preencher as credenciais.

Quando um usuário clica em um campo com o preenchimento automático ativado, se houver dados relevantes armazenados, ele verá um ícone na barra de ferramentas acima do teclado que solicita o preenchimento das credenciais.

Ícones na barra de ferramentas de texto mostrando as credenciais salvas.
Figura 2. Ícones na barra de ferramentas de texto mostrando as credenciais salvas.

Salvar dados com o preenchimento automático pela navegação

O Compose tenta determinar automaticamente quando um usuário sai de uma página e confirma as credenciais inseridas. Depois que um campo é ativado para preenchimento automático, ele salva automaticamente as informações de credenciais quando um usuário sai da página, sem exigir nenhum código adicional.

Salvar dados explicitamente com o preenchimento automático

Para salvar explicitamente novas credenciais em campos de texto com o preenchimento automático, o contexto de preenchimento automático precisa ser confirmado (ou cancelado) pelo gerenciador de preenchimento automático. O gerenciador de preenchimento automático local se comunica com a estrutura de preenchimento automático sempre que necessário. Se você quiser remover as credenciais inseridas pelo usuário, chame AutofillManager.cancel para excluir todos os dados pendentes sem salvá-los.

Os snippets a seguir mostram como salvar dados com o preenchimento automático usando explicitamente um botão:

  1. Crie uma variável local para armazenar o gerenciador de preenchimento automático, que pode ser recuperado da seguinte maneira: 

    val autofillManager = LocalAutofillManager.current

  2. No TextField(s), adicione o tipo de conteúdo escolhido usando Modifier.semantics:

    val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewUsername }
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewPassword }
    )
}

  3. Confirme o contexto de preenchimento automático conforme necessário clicando em um botão:

    val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewUsername },
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewPassword },
    )

    // Submit button
    Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
}

Commit é chamado sempre que um usuário sai da tela. Se um botão Submit estiver vinculado à navegação, não será necessário chamar Commit. Se você ainda quiser que o clique em Enviar acione a caixa de diálogo de salvamento, adicione Confirmar aqui.

Quando o usuário clicar no botão, vai aparecer esta página inferior solicitando que ele salve as credenciais no provedor selecionado:

Página inferior que pede para os usuários salvarem a senha.
Figura 3. Página inferior solicitando que os usuários salvem a senha.

Salvar dados com o preenchimento automático usando a sugestão de senha forte

Dependendo do seu provedor de credenciais, ao usar os tipos de conteúdo NewUsername e NewPassword, os usuários podem ver um botão no teclado para Sugerir senha forte. Ao clicar nele, uma página inferior aparece, permitindo que eles salvem as credenciais. Não é necessário implementar mais nada para que os usuários tenham essa experiência.

O ícone de sugestão de senha forte na barra de ferramentas do teclado.
Figura 4. O ícone de sugestão de senha forte na barra de ferramentas do teclado.
Página inferior solicitando que os usuários usem uma senha forte.
Figura 5. Página inferior solicitando que os usuários usem uma senha forte.

Solução de problemas

Ao invocar a jornada do usuário de "salvamento", se você clicar em "Agora não" mais de uma vez, o provedor de credenciais pode não mostrar mais a página inferior. Para reativar e fazer com que ela apareça novamente, remova os apps específicos que bloquearam a opção "Lembrar esta senha?".

Página inferior que pede para os usuários salvarem a senha.
Figura 6. Página inferior solicitando que os usuários salvem a senha.

Personalizar ainda mais o preenchimento automático

Em uma jornada típica do usuário do preenchimento automático, quando um componente com o preenchimento automático ativado é preenchido com credenciais, ele muda de cor e fica destacado para sinalizar ao usuário que o preenchimento automático foi concluído.

Para personalizar essa cor de destaque, use CompositionLocal e forneça a cor que quiser. A cor de destaque padrão do preenchimento automático é definida como Color(0x4dffeb3b).

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}