Jetpack Compose Divider

1. Overview

In this article, we will learn to add a divider between components in Jetpack compose. This Divider is a material design component that helps to build Jetpack Compose UIs and is available in the androidx.compose.material package.

Material design recommends using Spacer for dividing layout elements, meaning you should use Divider only when elements cannot be separated using white space. See our article on Spacer if you like to go ahead with white space.

2. Jetpack Compose Divider

A divider is a thin line that groups content in lists and layouts and its primary purpose is to separate content into clear groups.

The syntax of the Jetpack material component Divider is:

@Composable
fun Divider(
    modifier: Modifier? = Modifier,
    color: Color? = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
    thickness: Dp? = 1.dp,
    startIndent: Dp? = 0.dp
): Unit

It accepts the following parameters:

1. Modifier to customize the Divider
2. Color of the divider line
3. Thickness or height of the divider line, 1 dp is used by default. Using Dp.Hairline will produce a single pixel divider regardless of screen density.
4. Start offset or padding of this divider line, no offset by default (equivalent to Modifier.padding(start = startIndent)).

3. Divider examples

Now, let’s see a few examples of the Divider material component.

3.1. Jetpack vertical divider

You can add a vertical divider inside the Row scope.

For example, the following Greeting composable function contains a Row with two texts separated by a vertical divider. The divider is of Red color and of 1 dp width.

@Preview(showBackground = true)
@Composable
fun Greeting(name: String? = "") {
    Row(
        modifier = Modifier.fillMaxWidth()
            .height(IntrinsicSize.Min)) {
        Text(modifier = Modifier.weight(2f, true), text = "Lorem ipsum text for left")
        Divider(
            color = Color.Red,
            modifier = Modifier
                .fillMaxHeight()
                .width(1.dp)
        )
        Text(modifier = Modifier.weight(2f, true), text = "It is so refreshing today")
    }
}

3.2. Jetpack horizontal Divider

Similarly, you can add a horizontal divider in your Column scope to divide the children.

For example, the following ColumnGreeting composable adds a horizontal divider of thickness 1 dp between two texts.

@Preview(showBackground = true)
@Composable
fun ColumnGreeting(name: String? = "") {
    Column(
        modifier = Modifier.fillMaxWidth()
            .width(IntrinsicSize.Min)) {
        Text(text = "Lorem ipsum text for left")
        Divider(
            color = Color.Red,
            modifier = Modifier
                .fillMaxWidth(),
            thickness = 1.dp
        )
        Text(text = "It is so refreshing today")
    }

If you add the parameter startIndent to the Divider component, it would add a start padding as shown in the image b).

Divider(
            color = Color.Red,
            modifier = Modifier
                .fillMaxWidth(),
            thickness = 1.dp,
            startIndent = 10.dp
        )

4. Conclusion

To sum up, we have learned to use the divider material component of Jetpack compose.