O componente Chip
é um elemento compacto interativo que
representa uma entrada, um atributo ou uma ação.
Anatomia
![](https://developer.android.google.cn/static/wear/images/components/chips-anatomy.png?authuser=3&hl=pt-br)
A. Rótulo principal
B. Rótulo secundário (opcional)
C. Figura (opcional)
D. Contêiner
Recomendações de design
![](https://developer.android.google.cn/static/wear/images/components/chips-image.png?authuser=3&hl=pt-br)
Os ícones de imagem contêm ações relacionadas à imagem escolhida. Os ícones de imagem funcionam bem para comunicar uma aparência mais específica.
Chip(
...
label = {
Text(
text = "Summer Mix",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
colors = ChipDefaults.imageBackgroundChipColors(
backgroundImagePainter = painterResource(id = R.drawable.clouds)
)
)
![](https://developer.android.google.cn/static/wear/images/components/chip-avatar.png?authuser=3&hl=pt-br)
Use esses ícones para ações relacionadas ao avatar selecionado. Os ícones de avatar também podem incluir figuras para facilitar o reconhecimento, como a foto de um contato. Os ícones de avatar têm 32 x 32 dp.
Chip(
...
label = {
Text(text = "Mark Castle")
},
icon = {
Icon(
painter = painterResource(id = R.drawable.avatar),
contentDescription = null,
modifier = Modifier.size(ChipDefaults.LargeIconSize)
.wrapContentSize(align = Alignment.Center)
)
}
)
Componentes relacionados
![](https://developer.android.google.cn/static/wear/images/components/chip-compact.png?authuser=3&hl=pt-br)
O componente relacionado CompactChip é uma variante menor do componente de ícone, projetado para casos de uso em que há menos espaço. Os ícones compactos têm um slot para uma figura e outro para um rótulo com uma linha. Os ícones compactos incluem uma área tocável com altura de 48 dp.
Hierarquia
![](https://developer.android.google.cn/static/wear/images/components/chip-hierarchy.png?authuser=3&hl=pt-br)
Use preenchimentos de cores diferentes para indicar a hierarquia de ícones. Projete cada tela para conter um único ícone em destaque para a ação principal.
Prioridade altaUse ícones de prioridade alta para ações principais na página. Use cores primárias para o preenchimento desse tipo de ícone.
Prioridade média
Use ícones de prioridade média para ações menos importantes do que as
principais. Use cores secundárias para o preenchimento desse tipo de ícone.
Se preferir, use o componente personalizado OutlinedChip. Esse componente tem um plano de fundo transparente, um traço colorido da variante de 60% de opacidade e conteúdo com a cor principal.
Prioridade baixa
Os ícones de prioridade baixa têm um preenchimento transparente e apenas um rótulo de texto. Use ícones de
prioridade baixa para indicar uma relação filha com um ícone principal ou
secundário.
Tamanhos
![](https://developer.android.google.cn/static/wear/images/components/chip-size1.png?authuser=3&hl=pt-br)
Ícone padrão
Figura: 24 dp
Altura: 52 dp
![](https://developer.android.google.cn/static/wear/images/components/chip-size2.png?authuser=3&hl=pt-br)
Ícone compacto
Figura: 20 dp
Altura: 32 dp
Área tocável: 48 dp
Uso
Veja a seguir alguns exemplos de uso de ícones, como ícones padrão nas configurações e de imagem em um app de exercício.