Material 3 Dividers in Jetpack Compose

Get started with Material 3 dividers in Jetpack Compose to create user-friendly interfaces for separating content in lists or containers.

Explore Divider Styles

Learn to implement two Material 3 divider types for separating content.

Horizontal Divider

Separates items in a column.

@Composable
fun HorizontalDividerExample() {
    // Creates a horizontal divider between text items
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp) // Arranges items with spacing
    ) {
        Text("First item in list") // *Required: Defines column content
        HorizontalDivider(thickness = 2.dp) // Sets divider thickness
        Text("Second item in list") // *Required: Defines column content
    }
}
  

Use a Horizontal Divider when you want to separate items in a column.

Examples:

• Separate list items in a to-do app
• Divide sections in a settings menu
• Organize content in a news feed

---

Vertical Divider

Separates items in a row.

@Composable
fun VerticalDividerExample() {
    // Creates a vertical divider between text items
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Min), // *Required: Customizes row layout
        horizontalArrangement = Arrangement.SpaceEvenly // Spaces items evenly
    ) {
        Text("First item in row") // *Required: Defines row content
        VerticalDivider(color = MaterialTheme.colorScheme.secondary) // Sets divider color
        Text("Second item in row") // *Required: Defines row content
    }
}
  

Use a Vertical Divider when you want to separate items in a row.

Examples:

• Separate buttons in a toolbar
• Divide columns in a dashboard
• Organize items in a horizontal menu

---

Divider Properties

Understand the key properties used in the divider examples.

Property	Usage
content*	Required: Defines the content in the parent Column or Row, like Text
thickness	Sets the divider’s thickness (e.g., 2.dp)
color	Sets the divider’s color (e.g., secondary color)
modifier	Customizes the parent layout, like width or height (e.g., fillMaxWidth)