Criar um ícone para representar entidades complexas

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:

Um ícone de assistência simples.
Figura 1. Ícone de assistência.

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

Um ícone de filtro não selecionado, sem marcação e com um plano de fundo.
Figura 2. Ícone de filtro não selecionado.
Chip de filtro selecionado, com uma marca de seleção e um plano de fundo colorido.
Figura 3. Ícone de filtro selecionado.

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

Um ícone de entrada com um avatar e um ícone de final.
Figura 4. Ícone de entrada.

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

Um ícone de assistência simples.
Figura 5. Ícone de assistência.

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âmetro leadingIcon e trailingIcon separados.
  • 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:

Aprenda como as funções combináveis podem permitir que você crie componentes de interface bonitos com base no sistema de design do Material Design.
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