Create Vertical Divider Jetpack Compose

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

Something like:

Row(Modifier
    .height(IntrinsicSize.Min) //intrinsic measurements
    .fillMaxWidth()
    .background(Color.Yellow)
) {
        Text("First Text")

        Divider(
            color = Color.Red,
            modifier = Modifier
                .fillMaxHeight()  //fill the max height
                .width(1.dp)
        )

        Text("Second text")
}

enter image description here

As explained in the doc:

The Row composable’s minIntrinsicHeight will be the maximum minIntrinsicHeight of its children. The Divider element’s minIntrinsicHeight is 0 as it doesn’t occupy space if no constraints are given; the TextField minIntrinsicHeight will be that of the content given a specific width. Therefore, the Row element’s height constraint will be the max minIntrinsicHeight of the TextFields content. The Divider will then expand its height to the height constraint given by the Row.

Leave a Comment