Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dashed divider in Jetpack Compose
@Preview
@Composable
private fun DashedDividerPreview() {
DashedDivider(
color = Color.Black,
thickness = 1.dp,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
)
}
@Composable
fun DashedDivider(
thickness: Dp,
color: Color = MaterialTheme.colorScheme.onSurfaceVariant,
phase: Float = 10f,
intervals: FloatArray = floatArrayOf(10f, 10f),
modifier: Modifier
) {
Canvas(
modifier = modifier
) {
val dividerHeight = thickness.toPx()
drawRoundRect(
color = color,
style = Stroke(
width = dividerHeight,
pathEffect = PathEffect.dashPathEffect(
intervals = intervals,
phase = phase
)
)
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment