O componente Chip é um elemento de interface compacto e interativo. Ele representa entidades
complexas, como um contato ou uma tag, geralmente com um ícone e um rótulo. Ele pode ser
verificável, dispensável ou clicável.
Os cinco tipos de ícones e onde eles podem ser usados:
- Assistir: orienta o usuário durante uma tarefa. Muitas vezes, aparece como um elemento temporário da interface em resposta à entrada do usuário.
- Filtro: permite que os usuários refinem o conteúdo de um conjunto de opções. Eles podem ser selecionados ou desselecionados e podem incluir um ícone de marca de seleção quando selecionados.
- Entrada: representa informações fornecidas pelo usuário, como seleções em um menu. Eles podem conter um ícone e texto, além de um "X" para remoção.
- Sugestão: oferece recomendações ao usuário com base na atividade ou entrada recente dele. Normalmente, aparecem abaixo de um campo de entrada para solicitar ações do usuário.
- Elevado: tem uma aparência elevada, em vez de plana.
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
Criar um ícone de assistência
O elemento combinável AssistChip oferece uma maneira simples de criar um
chip de assistência que orienta o usuário em uma direção específica. Um recurso
distintivo é o parâmetro leadingIcon, que permite exibir um ícone no lado
esquerdo do ícone, conforme mostrado na Figura 1. O exemplo abaixo demonstra como
implementar:
Criar um ícone de filtro
O elemento combinável FilterChip exige que você rastreie se o ícone
está selecionado ou não. O exemplo a seguir demonstra como mostrar um ícone
marcado apenas quando o usuário selecionou o ícone:
Resultados
Criar um ícone de entrada
É possível usar o elemento combinável InputChip para criar ícones que resultam da
interação do usuário. Por exemplo, em um cliente de e-mail, quando o usuário está escrevendo um
e-mail, um ícone de entrada pode representar uma pessoa cujo endereço o usuário inseriu
no campo "para:".
A implementação a seguir demonstra um ícone de entrada que está em um estado selecionado. O usuário dispensa o ícone quando o pressiona.
Resultados
Criar um ícone de sugestão
O elemento combinável SuggestionChip é o mais básico dos elementos combináveis listados
nesta página, tanto na definição da API quanto nos casos de uso comuns. Os ícones de sugestão
apresentam dicas geradas dinamicamente. Por exemplo, em um app de chat com IA, você
pode usar ícones de sugestão para apresentar possíveis respostas à mensagem
mais recente.
Considere esta implementação de SuggestionChip:
Resultados
Criar um ícone elevado
Todos os exemplos neste documento usam os elementos combináveis básicos que têm uma aparência plana. Se você quiser um ícone com uma aparência elevada, use um dos seguintes elementos combináveis:
Pontos principais
Quatro elementos combináveis correspondem aos quatro tipos de ícones e compartilham os seguintes parâmetros:
label: a string que aparece no chip.icon: o ícone exibido no início do ícone. Alguns elementos combináveis têm um parâmetroleadingIconetrailingIconseparados.onClick: o lambda chamado pelo chip quando o usuário clica nele.
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:
Mostrar componentes interativos
