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?

you just forgot to specify `.height(1.dp)` – Gabor Jan 17 '22 at 17:18 — Gabor, Jan 17 '22 at 17:18

Gabriele Mariotti · Accepted Answer · 2023-02-25T11:38:13.653

94

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")
}

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.

edited Feb 25 '23 at 11:38

answered Jun 10 '21 at 10:19

Gabriele Mariotti

320,139
94
887
841

1

Can you explain why the intrinsic is needed? i read the Layouts in Compose docs but still dont get it – wiryadev Jun 10 '21 at 10:39
3

@wiryadev It is not needed, for example if you have a fixed height. But if you want to obtain a layout such as reported in the answer without fixing the height you have to use it. – Gabriele Mariotti Jun 10 '21 at 10:45
how to add elevation for this divider – Tippu Fisal Sheriff Oct 19 '22 at 10:42
1

thanks a lot I wasted 2 hours for this – Sanjeev Madhav Dec 02 '22 at 10:31
@GabrieleMariotti It's working when i added .height(IntrinsicSize.Min) modifier in RowScope – Chirag Thummar Feb 25 '23 at 11:05
@GabrieleMariotti Perfect example with great explanations for this. – Kotlin Learner Feb 26 '23 at 16:11

score 12 · Answer 2 · answered Nov 18 '21 at 13:01

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

This seems the best handful custom divider vertical divider snippet. Thanks — Lucas Sousa, May 09 '23 at 02:55

score 3 · Answer 3 · edited Jul 28 '22 at 13:18

You can use BOX ,SPACER or DIVIDER to create a vertical divider

Row(modifier = Modifier.height(20.dp)) {
    Text("TEXT 1")
    Box(
        modifier = Modifier
            .fillMaxHeight()
            .width(2.dp)
            .background(Color.Red)
    )

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

    Divider(color = Color.Blue, modifier = Modifier
        .fillMaxHeight()
        .width(2.dp))
    Text("TEXT 2")
}

Code result:

Create Vertical Divider Jetpack Compose

3 Answers3

Linked