Create Vertical Divider Jetpack Compose

Question

How to create vertical dividers with Jetpack Compose? I try to use Spacer and Box to do it, but it doesn't show up at all. Here is what i tried:

Box(
    modifier = Modifier
        .fillMaxHeight()
        .width(2.dp)
        .background(color = Color.Black)
)

But that doesn't work at all. So how to do vertical divider in Jetpack Compose?

Answer 1

You can use the Divider function with the width(xx.dp) modifier applying an intrinsic measurements to its parent container.

Something like:

Row(Modifier
    .height(IntrinsicSize.Min)
    .fillMaxWidth()
    .background(Color.Yellow)) {

        Text("First Text")

        Divider(
            color = Color.Red,
            modifier = Modifier
                .fillMaxHeight()
                .width(1.dp)
        )

        Text("Second text")
}

Answer 2

Here is a VerticalDivider Composable, which you can use the same way as the built-in Divider horizontal one.

@Composable
fun VerticalDivider(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
    thickness: Dp = 1.dp
) {
    Box(
        modifier
            .fillMaxHeight()
            .width(thickness)
            .background(color = color)
    )
}

private const val DividerAlpha = 0.12f