El componente Chip
es un elemento compacto interactivo que representa una entrada, un atributo o una acción.
Anatomía
![](https://developer.android.google.cn/static/wear/images/components/chips-anatomy.png?authuser=4&hl=es-419)
A. Etiqueta principal
B. Etiqueta secundaria (opcional)
C. Ícono (opcional)
D. Contenedor
Recomendaciones de diseño
![](https://developer.android.google.cn/static/wear/images/components/chips-image.png?authuser=4&hl=es-419)
Los chips de imágenes contienen acciones relacionadas con una imagen elegida. Los chips de imágenes funcionan bien para comunicar una apariencia más 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=4&hl=es-419)
Usa chips de avatar para acciones relacionadas con un avatar elegido. Los chips de avatar también pueden tener íconos que hagan que el avatar sea más fácil de reconocer, como una foto de ID de contacto. Los íconos de avatar son de 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=4&hl=es-419)
El componente relacionado, CompactChip, es una variante del componente Chip que aparece más pequeño y está diseñado para casos de uso en los que hay menos espacio. Los chips compactos tienen un espacio para un ícono y otro para una sola etiqueta de texto de línea. Los chips compactos tienen un área táctil con una altura de 48 dp.
Jerarquía
![](https://developer.android.google.cn/static/wear/images/components/chip-hierarchy.png?authuser=4&hl=es-419)
Usa diferentes rellenos de colores para denotar la jerarquía del chip. Diseña cada pantalla para que contenga un solo chip importante para la acción principal.
Énfasis altoUsa chips de énfasis alto para las acciones principales de la página. Usa colores primarios como relleno de un chip de énfasis alto.
Énfasis medio
Usa chips de énfasis medio para las acciones menos importantes que las principales. Usa colores secundarios para rellenar un chip de énfasis medio.
Otra opción es usar el componente personalizado OutlinedChip. El chip descrito tiene un fondo transparente, un trazo de color de la variante principal del 60% de opacidad y contenido de color primario.
Énfasis bajo
Los chips de énfasis bajo tienen un relleno transparente y solo una etiqueta de texto. Usa chips de énfasis bajo para indicar una relación secundaria con un chip principal o secundario.
Tamaños
![](https://developer.android.google.cn/static/wear/images/components/chip-size1.png?authuser=4&hl=es-419)
Chip predeterminado
Ícono: 24 dp
Altura: 52 dp
![](https://developer.android.google.cn/static/wear/images/components/chip-size2.png?authuser=4&hl=es-419)
Chip compacto
Ícono: 20 dp
Altura: 32 dp
Área que se puede presionar: 48 dp
Uso
Consulta ejemplos del uso de chips, como los chips estándar en Configuración y los chips de imágenes en una app de ejercicio.