Komponen Chip
adalah elemen ringkas interaktif yang
merepresentasikan input, atribut, atau tindakan.
Anatomi
![](https://developer.android.google.cn/static/wear/images/components/chips-anatomy.png?authuser=4&hl=id)
A. Label utama
B. Label sekunder (opsional)
C. Ikon (opsional)
D. Penampung
Rekomendasi desain
![](https://developer.android.google.cn/static/wear/images/components/chips-image.png?authuser=4&hl=id)
Chip gambar berisi tindakan yang berkaitan dengan gambar yang dipilih. Chip gambar berfungsi dengan baik untuk mengomunikasikan tampilan dan nuansa yang lebih spesifik.
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=id)
Gunakan chip avatar untuk tindakan yang terkait dengan avatar yang dipilih. Chip avatar juga dapat memiliki ikon yang digunakan agar avatar lebih mudah dikenali, seperti foto ID kontak. Ikon avatar berukuran 32x32dp.
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)
)
}
)
Komponen terkait
![](https://developer.android.google.cn/static/wear/images/components/chip-compact.png?authuser=4&hl=id)
Komponen terkait, CompactChip adalah varian komponen Chip yang tampak lebih kecil dan didesain untuk kasus penggunaan dengan ruang yang lebih kecil. Chip ringkas memiliki slot untuk ikon dan slot untuk label teks baris tunggal. Chip ringkas memiliki area ketuk dengan tinggi 48dp.
Hierarki
![](https://developer.android.google.cn/static/wear/images/components/chip-hierarchy.png?authuser=4&hl=id)
Gunakan isi warna yang berbeda untuk menunjukkan hierarki chip. Desain setiap layar agar berisi satu chip yang menonjol untuk tindakan utama.
Penekanan tinggiGunakan chip yang menekankan tinggi untuk tindakan utama di halaman. Gunakan warna utama sebagai isi chip penekanan tinggi.
Penekanan sedang
Gunakan chip penekanan sedang untuk tindakan yang kurang penting dibandingkan tindakan
utama. Gunakan warna sekunder untuk isi chip penekanan sedang.
Atau, gunakan komponen OutlinedChip kustom. Chip bergaris tepi memiliki latar belakang transparan, goresan warna varian utama opasitas 60%, dan konten berwarna utama.
Penekanan rendah
Chip penekanan rendah memiliki isi transparan dan hanya label teks. Gunakan chip
penekanan rendah untuk menunjukkan hubungan turunan ke chip utama atau
sekunder.
Ukuran
![](https://developer.android.google.cn/static/wear/images/components/chip-size1.png?authuser=4&hl=id)
Chip default
Ikon: 24dp
Tinggi: 52dp
![](https://developer.android.google.cn/static/wear/images/components/chip-size2.png?authuser=4&hl=id)
Chip Ringkas
Ikon: 20 dp
Tinggi: 32dp
Area ketuk: 48dp
Penggunaan
Lihat contoh penggunaan chip seperti chip standar di Setelan dan chip gambar di aplikasi olahraga.