Jetpack Compose Divider

Almost every screen with more than one section of content needs a simple way to separate those sections visually, and that is exactly what a Jetpack Compose divider is for. A Jetpack Compose divider is a thin line, drawn either horizontally or vertically, that splits a layout into clearly grouped pieces without adding extra padding or a background color change. When you are building a screen in Jetpack Compose, this divider comes from a small, dedicated divider composable that Material 3 ships out of the box, so you never have to draw a divider line yourself with a Canvas or a Box.

This guide covers every part of the Jetpack Compose divider: the horizontal divider and vertical divider variants, how to change divider color, how to change divider thickness, the smaller divider parameters and defaults, and a realistic use case showing a divider inside a real Jetpack Compose screen layout. Writing idiomatic Jetpack Compose means reaching for this composable any time two blocks of content need a clear visual break.

What Is a Divider in Jetpack Compose

A divider in Jetpack Compose is a single straight line rendered by a composable function, used to break up a list, a settings screen, or any layout where related content needs a visual boundary. A Jetpack Compose divider does not accept child content the way a Row or Column does; the Jetpack Compose divider only draws a line based on the modifier, color, and thickness you give it.

Working with layouts in Jetpack Compose, you will find that Jetpack Compose ships two dedicated divider composables for this purpose: HorizontalDivider and VerticalDivider. Both live in the Material 3 package that Jetpack Compose provides, and both replace the older single Divider composable that Jetpack Compose used before, which only ever drew a horizontal divider line and has since been marked deprecated in favor of the split HorizontalDivider and VerticalDivider pair. Anyone maintaining an older Jetpack Compose codebase will likely run into that deprecation warning first.

Reaching for a Jetpack Compose divider instead of a colored Box has a few real advantages:

A divider automatically has sensible default color and thickness values pulled from the current MaterialTheme, so it matches your Jetpack Compose app's theme without extra configuration
A divider is a single, purpose-built composable, which keeps your Jetpack Compose layout code readable instead of hiding a decorative line inside a generic Box
A divider respects the surrounding Jetpack Compose layout automatically, stretching to fill the available width or height depending on which divider variant you use

Adding a Horizontal Divider in Jetpack Compose

The HorizontalDivider composable is the Jetpack Compose divider variant you reach for most often, since most Jetpack Compose layouts stack content vertically inside a Column or a LazyColumn. Any time you are scrolling through a Jetpack Compose list, chances are a horizontal Jetpack Compose divider is doing the work of separating each row. A horizontal divider draws a line that stretches across the full width of its parent by default, splitting the content above the divider from the content below it.

HorizontalDivider takes three parameters: a modifier, a thickness, and a color. All three have defaults, so calling HorizontalDivider with no arguments at all is a completely valid way to add a Jetpack Compose divider to your layout. The modifier lets you constrain the width instead of letting the Jetpack Compose divider fill the parent, which is useful when you only want the divider line to span part of a row in a Jetpack Compose screen.

kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun HorizontalDividerExample() {
    Column {
        Text("Profile", modifier = Modifier.padding(12.dp))
        HorizontalDivider(modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp))
        Text("Privacy", modifier = Modifier.padding(12.dp))
        HorizontalDivider(modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp))
        Text("Help", modifier = Modifier.padding(12.dp))
    }
}

Running this snippet produces three text rows with a horizontal divider separating each pair, and because the modifier adds horizontal padding, the Jetpack Compose divider line sits slightly inset from the edges of the screen instead of touching them directly. This is a common pattern for a settings-style list built in Jetpack Compose, where a Jetpack Compose divider marks the boundary between each option without a full-bleed line running edge to edge.

Adding a Vertical Divider in Jetpack Compose

The VerticalDivider composable mirrors HorizontalDivider, except this Jetpack Compose divider draws its line top to bottom instead of left to right, making it the right choice inside a Row rather than a Column. A vertical divider is often used to separate icons, buttons, or short labels sitting side by side in a Jetpack Compose toolbar.

Unlike HorizontalDivider, a vertical divider needs an explicit or inherited height to be visible, because a Row by itself does not force its children to stretch vertically in Jetpack Compose. Wrapping the Row content in something with a fixed height, or applying fillMaxHeight to the Row, gives the vertical divider something to measure against. This quirk trips up a lot of people new to Jetpack Compose the first time they try a vertical divider.

kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun VerticalDividerExample() {
    Row(modifier = Modifier.height(48.dp).padding(8.dp)) {
        Text("Bold", modifier = Modifier.padding(8.dp))
        VerticalDivider()
        Text("Italic", modifier = Modifier.padding(8.dp))
        VerticalDivider()
        Text("Underline", modifier = Modifier.padding(8.dp))
    }
}

When this code executes, the Row gets a fixed height of 48dp, and each vertical divider stretches to match that height, drawing a short upright line between the three text labels. The result looks like a compact formatting toolbar built with Jetpack Compose, where a Jetpack Compose divider cleanly separates each option instead of letting the labels run together with no visual gap.

Customizing Divider Color in Jetpack Compose

By default, a Jetpack Compose divider draws its line using a subtle, low-contrast color pulled from the current MaterialTheme so the Jetpack Compose divider blends into the surrounding surface. Passing your own value to the color parameter overrides that default, which is useful when a divider needs to stand out more, match a brand color, or fade even further into the background of a Jetpack Compose screen.

Both HorizontalDivider and VerticalDivider accept the same color parameter, so changing divider color works identically no matter which orientation the divider is drawn in. A common pattern in Jetpack Compose is pulling the color straight from MaterialTheme.colorScheme so that a custom divider color still adapts correctly between light and dark themes. Theming in Jetpack Compose this way keeps every divider consistent across the whole app instead of hardcoding one-off values.

kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun DividerColorExample() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("Section A")
        HorizontalDivider(color = Color(0xFF6750A4))
        Text("Section B")
        HorizontalDivider(color = MaterialTheme.colorScheme.primary)
        Text("Section C")
    }
}

Running this example draws two horizontal divider lines with different divider color values: the first a fixed purple value, and the second whatever primary color the active MaterialTheme defines. Choosing a stronger divider color like this can help a Jetpack Compose divider act almost like an underline or accent, rather than the quiet, barely-visible separator a Jetpack Compose divider is by default.

Customizing Divider Thickness in Jetpack Compose

The thickness parameter controls how many density-independent pixels wide the divider line is drawn, and divider thickness defaults to a hairline value of 1dp on both HorizontalDivider and VerticalDivider. Increasing divider thickness makes the separating line bolder and easier to notice, which is useful when a Jetpack Compose screen needs a stronger visual break between major sections rather than a subtle one between minor rows.

Divider thickness accepts any Dp value, so you are free to set a divider to something like 2dp for a slightly heavier line, or larger values for a thick section break. A thicker Jetpack Compose divider still respects the color and modifier you pass alongside it, so all three divider parameters combine independently in Jetpack Compose.

kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun DividerThicknessExample() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("Chapter One")
        HorizontalDivider(thickness = 1.dp)
        Text("Chapter Two")
        HorizontalDivider(thickness = 4.dp)
        Text("Chapter Three")
    }
}

When this code runs, the first divider between Chapter One and Chapter Two stays a thin hairline, while the second divider between Chapter Two and Chapter Three renders four times as thick, making it visually obvious that a bigger break is happening at that point. Mixing divider thickness values like this is a simple way for a Jetpack Compose layout to show a reader which Jetpack Compose divider marks a boundary that matters more than the others.

Other Divider Parameters and Defaults

A few smaller pieces round out the Jetpack Compose divider composable, and they are worth knowing even though they come up less often than divider color and divider thickness:

modifier: the standard Jetpack Compose modifier applied to the divider itself, most often used to constrain divider width, height, or add padding around the line
DividerDefaults: an object that exposes the default divider Thickness value and a color function, so you can reuse the same defaults a Jetpack Compose divider applies automatically when you only want to override one property
Divider (deprecated): the original single composable that predates HorizontalDivider and VerticalDivider in Jetpack Compose; this older divider only drew a horizontal line and new Jetpack Compose code should use HorizontalDivider instead
startIndent (legacy): an older parameter from the deprecated Divider composable used to indent the divider line from the left edge, now handled through modifier padding on HorizontalDivider instead in modern Jetpack Compose

Jetpack Compose keeps every one of these pieces optional except the divider itself, so you can adopt as many or as few of the smaller parameters as a given screen needs.

kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun DividerDefaultsExample() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("Using explicit defaults")
        HorizontalDivider(
            thickness = DividerDefaults.Thickness,
            color = DividerDefaults.color
        )
        Text("Next section")
    }
}

This snippet calls HorizontalDivider with DividerDefaults.Thickness and DividerDefaults.color explicitly, producing the exact same visual result as calling HorizontalDivider with no arguments, but a Jetpack Compose divider written this way is a handy pattern when you want to override just one property, such as thickness, while still pulling the divider color from the shared defaults object.

Practical Use Case: Divider Inside a Settings List

A very common place to reach for a Jetpack Compose divider is a settings screen, where several unrelated options are stacked in a single scrollable list and need a light visual break between them. Without a Jetpack Compose divider, rows of text can blur together in a Jetpack Compose list, especially once icons and secondary labels are added to each row.

Picture a settings screen with three rows: account, notifications, and appearance. Adding a horizontal divider after each row keeps the Jetpack Compose list scannable, while a vertical divider inside the top toolbar separates a back icon from a title. This is the kind of everyday Jetpack Compose screen where a divider earns its place immediately.

kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun SettingsListWithDividers() {
    Column {
        Row(modifier = Modifier.height(56.dp).padding(12.dp)) {
            Icon(Icons.Filled.ArrowBack, contentDescription = "Back")
            VerticalDivider(modifier = Modifier.padding(horizontal = 12.dp))
            Text("Settings")
        }
        HorizontalDivider(thickness = 2.dp)

        Text("Account", modifier = Modifier.padding(12.dp))
        HorizontalDivider(modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp))

        Text("Notifications", modifier = Modifier.padding(12.dp))
        HorizontalDivider(modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp))

        Text("Appearance", modifier = Modifier.padding(12.dp))
    }
}

Running this composable produces a small toolbar with a vertical divider separating the back icon from the "Settings" title, a slightly thicker horizontal divider marking the end of the toolbar, and three settings rows each closed off by a thin horizontal divider line. This mirrors how a real Jetpack Compose divider setup looks in production Jetpack Compose apps, where divider thickness and divider placement vary depending on how strong a break each section needs.

You can find the full official parameter reference for the divider composables in the Jetpack Compose Material 3 documentation, which covers every Jetpack Compose release these composables have shipped in.

Complete Jetpack Compose Divider Example

The final example below combines a horizontal divider, a vertical divider, custom divider color, and custom divider thickness into one self-contained Jetpack Compose screen so you can see every piece of a Jetpack Compose divider working together.

kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CompleteDividerScreen() {
    Surface {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Library")
            HorizontalDivider(
                modifier = Modifier.fillMaxWidth(),
                thickness = 2.dp,
                color = MaterialTheme.colorScheme.primary
            )

            Row(modifier = Modifier.height(40.dp).padding(vertical = 8.dp)) {
                Text("Books")
                VerticalDivider(modifier = Modifier.padding(horizontal = 12.dp))
                Text("Movies")
                VerticalDivider(modifier = Modifier.padding(horizontal = 12.dp))
                Text("Music")
            }

            HorizontalDivider(modifier = Modifier.fillMaxWidth().padding(top = 8.dp))
            Text("Recently added items appear below this divider line")
        }
    }
}

This screen opens with a bold, colored horizontal divider under the "Library" title, followed by a row of three category labels separated by two vertical divider lines, and closes with a plain horizontal divider marking the start of the next section. Running it shows a Jetpack Compose divider being used in three different ways at once: as a section header underline, as a compact separator between inline labels, and as a quiet boundary before a new block of content, all built entirely with Jetpack Compose.