Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Pembagi adalah garis tipis yang memisahkan item dalam daftar atau penampung
lainnya. Anda dapat menerapkan pemisah di aplikasi menggunakan composable HorizontalDivider
dan VerticalDivider.
Kedua komponen menyediakan parameter untuk mengubah penampilannya:
thickness: Gunakan parameter ini untuk menentukan ketebalan garis pemisah.
color: Gunakan parameter ini untuk menentukan warna garis pemisah.
Contoh pemisah horizontal
Contoh berikut menunjukkan penerapan komponen
HorizontalDivider. Parameter thickness digunakan untuk mengontrol
tinggi garis:
@ComposablefunHorizontalDividerExample(){Column(verticalArrangement=Arrangement.spacedBy(8.dp),){Text("First item in list")HorizontalDivider(thickness=2.dp)Text("Second item in list")}}
Implementasi ini merender garis horizontal tipis di antara dua komponen teks:
Gambar 1. Pemisah horizontal yang memisahkan dua komponen teks.
Contoh pemisah vertikal
Contoh berikut menunjukkan penerapan komponen
VerticalDivider. Menggunakan parameter color untuk memberikan warna
kustom untuk garis:
@ComposablefunVerticalDividerExample(){Row(modifier=Modifier.fillMaxWidth().height(IntrinsicSize.Min),horizontalArrangement=Arrangement.SpaceEvenly){Text("First item in row")VerticalDivider(color=MaterialTheme.colorScheme.secondary)Text("Second item in row")}}
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-08-28 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-08-28 UTC."],[],[],null,["[Dividers](https://m3.material.io/components/divider/overview) are thin lines that separate items in lists or other\ncontainers. You can implement dividers in your app using the `HorizontalDivider`\nand `VerticalDivider` composables.\n\n- [`HorizontalDivider`](/reference/kotlin/androidx/compose/material3/package-summary#HorizontalDivider(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color)): Separate items in a column.\n- [`VerticalDivider`](/reference/kotlin/androidx/compose/material3/package-summary#VerticalDivider(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color)): Separate items in a row.\n\nAPI surface\n\nBoth components provide parameters for modifying their appearance:\n\n- `thickness`: Use this parameter to specify the thickness of the divider line.\n- `color`: Use this parameter to specify the color of the divider line.\n\n| **Note:** You can use the `modifier` parameter to control padding.\n\nHorizontal divider example\n\nThe following example demonstrates an implementation of the\n`HorizontalDivider` component. It uses the `thickness` parameter to control the\nheight of the line:\n\n\n```kotlin\n@Composable\nfun HorizontalDividerExample() {\n Column(\n verticalArrangement = Arrangement.spacedBy(8.dp),\n ) {\n Text(\"First item in list\")\n HorizontalDivider(thickness = 2.dp)\n Text(\"Second item in list\")\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/Divider.kt#L57-L66\n```\n\n\u003cbr /\u003e\n\nThis implementation renders a thin horizontal line between two text components:\n**Figure 1.** A horizontal divider separating two text components.\n\nVertical divider example\n\nThe following example demonstrates an implementation of the\n`VerticalDivider` component. It uses the `color` parameter to provide a custom\ncolor for the line:\n\n\n```kotlin\n@Composable\nfun VerticalDividerExample() {\n Row(\n modifier = Modifier\n .fillMaxWidth()\n .height(IntrinsicSize.Min),\n horizontalArrangement = Arrangement.SpaceEvenly\n ) {\n Text(\"First item in row\")\n VerticalDivider(color = MaterialTheme.colorScheme.secondary)\n Text(\"Second item in row\")\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/Divider.kt#L71-L83\n```\n\n\u003cbr /\u003e\n\nThis implementation renders a thin vertical line between two text components:\n**Figure 2.** A vertical divider separating two text components.\n\nAdditional resources\n\n- [`HorizontalDivider`](/reference/kotlin/androidx/compose/material3/package-summary#HorizontalDivider(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color))\n- [`VerticalDivider`](/reference/kotlin/androidx/compose/material3/package-summary#VerticalDivider(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color))\n- [Material Design - Dividers](https://m3.material.io/components/divider)"]]