0
560
ViewsCreate Vertical Divider Jetpack Compose
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?
·
Hanz Gallego
2 answers
Answer question0
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
·
Hanz Gallego
Report
0
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")
}
·
Hanz Gallego
Report
Answer question