[ Web Proxy ]
URL:
Viewing: https://developer.android.com/develop/ui/compose/components/divider [Back]  [Original]
Divider  |  Jetpack Compose  |  Android Developers Skip to main content
Android Developers [Android Developers]
Essentials Design & Plan Develop Google Play Blog
Search:
Android Studio
Overview Tutorial Samples Docs Quick Guides
Android Developers [Android Developers]

Divider Stay organized with collections Save and categorize content based on your preferences.

Dividers are thin lines that separate items in lists or other containers. You can implement dividers in your app using the HorizontalDivider and VerticalDivider composables.

API surface

Both components provide parameters for modifying their appearance:

Note: You can use the modifier parameter to control padding.

Horizontal divider example

The following example demonstrates an implementation of the HorizontalDivider component. It uses the thickness parameter to control the height of the line:

@Composable
fun HorizontalDividerExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        Text("First item in list")
        HorizontalDivider(thickness = 2.dp)
        Text("Second item in list")
    }
}

This implementation renders a thin horizontal line between two text components:

An Android app screen displaying two text items, 'First item in list' and 'Second item in list,' separated by a thin horizontal line. [An Android app screen displaying two text items, 'First item in list' and 'Second item in list,' separated by a thin horizontal line.] Figure 1. A horizontal divider separating two text components.

Vertical divider example

The following example demonstrates an implementation of the VerticalDivider component. It uses the color parameter to provide a custom color for the line:

@Composable
fun VerticalDividerExample() {
    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")
    }
}

This implementation renders a thin vertical line between two text components:

An Android app screen displaying two text items, 'First item in row' and 'Second item in row,' separated by a thin vertical line. [An Android app screen displaying two text items, 'First item in row' and 'Second item in row,' separated by a thin vertical line.] Figure 2. A vertical divider separating two text components.

Additional resources

Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.

Last updated 2026-08-14 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2026-08-14 UTC."],[],[]]
Web Proxy Viewer  |  New URL  |  Original Page