Chip
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Komponen Chip adalah elemen interaktif yang merepresentasikan input, atribut, atau tindakan.
Rekomendasi Baris
Minimum
Teks Utama > 1 Baris
Label Sekunder > 1 Baris
Maksimum
Teks Utama > 2 Baris
Label Sekunder > 3 Baris
Anatomi
Chip dapat berisi hingga dua label teks dan ikon opsional. Setidaknya satu label teks atau ikon harus diberikan. Chip dapat memotong teks jika label teks terlalu panjang. Label utama adalah satu baris teks jika label sekunder ada. Label utama dapat berisi dua baris teks jika label sekunder tidak ada.
Jika hanya ada satu label, label tersebut harus berada di tengah. Jika ada label atau ikon sekunder, label harus rata kiri.
A. Label utama
B. Label sekunder (opsional)
C. Ikon (opsional)
D. Penampung
Gradien Chip
Chip Standar
Atas/Kiri = 50% Utama
Bawah/Kanan = 0% Permukaan
(Overlay Gradien di latar belakang warna Permukaan)
Chip Gambar
Atas/Kiri = 30% Utama
0, 0, 45° (Di Bawah Bawah/Kanan) = 20% Pada Varian Permukaan
Jenis Chip alternatif
Chip dengan gambar latar
Chip gambar berisi tindakan yang berkaitan dengan gambar yang dipilih. Chip gambar berfungsi dengan baik untuk mengomunikasikan tampilan dan nuansa yang lebih spesifik.
Sebaiknya Chip ini memiliki tinggi tetap 52 dp.
Chip Avatar
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 32x32 dp.
Chip Ringkas
Komponen terkait, CompactChip adalah varian komponen Chip yang tampak lebih kecil dan dirancang 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 yang dapat diketuk dengan tinggi 48 dp.
Hierarki
Gunakan isi warna yang berbeda untuk menunjukkan hierarki chip. Desain setiap layar agar berisi satu chip yang terlihat jelas untuk tindakan utama.
Penekanan tinggi
Gunakan chip dengan penekanan tinggi untuk tindakan yang utama di halaman. Gunakan warna primer sebagai pengisi 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 dengan garis batas memiliki latar belakang transparan, goresan warna varian utama opasitas 60%, dan konten berwarna utama.
Penekanan rendah
Chip penekanan rendah memiliki isian transparan dan hanya label teks. Gunakan chip penekanan rendah untuk menunjukkan hubungan turunan ke chip utama atau sekunder.
Ukuran
Chip Default
Ikon: 24 dp
Tinggi: 52 dp
Chip Ringkas
Ikon: 20 dp
Tinggi: 32 dp
Area yang Dapat Diketuk: 48 dp
Penggunaan
Lihat contoh penggunaan chip seperti chip standar di Setelan dan chip gambar di aplikasi latihan.
Tata letak adaptif
Perilaku responsif
Chip direntangkan untuk mengisi lebar yang tersedia di layar yang lebih besar.
Ikon (24 x 24 dp)
Penampung (52 x XX dp)
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Chips\n\nThe [Chip](/reference/kotlin/androidx/wear/compose/material/package-summary#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.wear.compose.material.ChipBorder,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component is an interactive element that represents an input, attribute, or action.\n\nLine Recommendations\n--------------------\n\n**Minimum**\n\nPrimary Text \\\u003e 1 Lines \n\nSecondary Label \\\u003e 1 Lines \n\n**Maximum**\n\nPrimary Text \\\u003e 2 Lines \n\nSecondary Label \\\u003e 3 Lines\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\nChips can contain up to two text labels and an optional icon. At least one text label or an icon must be provided. Chips may truncate text if the text label is too long. The primary label is one line of text if the secondary label is present. The primary label can contain two lines of text if the secondary label is not present. \n\nIf there's only one label, it should be centered. If a secondary label or icon is present, the labels should be left-aligned. \n\n**A. Primary label\nB. Secondary label (optional)\nC. Icon (optional)\nD. Container**\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Chips Gradient**\n------------------\n\n**Standard Chip**\n\nTop/Left = 50% Primary \n\nBottom/Right = 0% Surface \n\n(Gradient overlays on a background of Surface color)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Chip**\n\nTop/Left = 30% Primary \n\n0, 0, 45° (Below Bottom/Right) = 20% On Surface Variant\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAlternative Chip types\n----------------------\n\n**Chip with background image**\n\nImage chips contain actions which relate to a chosen image. Image chips work well to communicate a more specific look and feel.\n\nIt is recommended that these Chips should have a fixed height of 52 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Avatar Chip**\n\nUse avatar chips for actions that are related to a chosen avatar. Avatar chips can also have icons used to make the avatar more easily recognizable, such as a contact ID photo. Avatar icons are 32x32 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\n**Compact Chip**\n\nThe related component, CompactChip is a variant of the Chip component that appears smaller and is designed for use cases where there is less space. \n\n\nCompact chips have a slot for an icon and a slot for a single line text label. Compact chips have a tappable area with a height of 48 dp.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\nUse different color fills to denote chip hierarchy. Design each screen to contain a single prominent chip for the primary action. \n\n**High emphasis** \n\n\nUse high-emphasis chips for actions that are primary to the page. Use primary colors as the fill of a high emphasis chip. \n\n**Medium emphasis** \n\n\nUse medium emphasis chips for actions that are less important than the primary actions. Use secondary colors for the fill of a medium emphasis chip. \n\n\nAlternatively, use the custom OutlinedChip component. The outlined chip has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content. \n\n**Low emphasis** \n\n\nLow emphasis chips have a transparent fill and only a text label. Use low emphasis chips to indicate a child relationship to a primary or secondary chip.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Sizes**\n\n**Default Chip**\n\nIcon: 24 dp \nHeight: 52 dp \n**Compact Chip**\n\nIcon: 20 dp \nHeight: 32 dp \nTappable Area: 48 dp\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Usage**\n\nSee examples of chip usage such as standard chips in Settings and image chips in an exercise app.\n\n### **Adaptive layouts**\n\n**Responsive behavior**\n\nChips stretch to fill the available width on larger displays. \n\n\nIcon (24 x 24 dp) \n\nContainer (52 x XX dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
