I'd need to replicate android XML view from this answer but in Jetpack Compose with pure kotlin
I'd need to replicate android XML view from this answer but in Jetpack Compose with pure kotlin
You can simply use a Canvas with the method drawLine applying as pathEffect a PathEffect.dashPathEffect:
val pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
Canvas(Modifier.fillMaxWidth().height(1.dp)) {
drawLine(
color = Color.Red,
start = Offset(0f, 0f),
end = Offset(size.width, 0f),
pathEffect = pathEffect
)
}
You can also apply the same pathEffect to other method as:
val stroke = Stroke(width = 2f,
pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
)
Canvas(Modifier.fillMaxWidth().height(70.dp)){
drawRoundRect(color = Color.Red,style = stroke)
}
You can create a shape in Jetpack Compose like this:
private data class DottedShape(
val step: Dp,
) : Shape {
override fun createOutline(
size: Size,
layoutDirection: LayoutDirection,
density: Density
) = Outline.Generic(Path().apply {
val stepPx = with(density) { step.toPx() }
val stepsCount = (size.width / stepPx).roundToInt()
val actualStep = size.width / stepsCount
val dotSize = Size(width = actualStep / 2, height = size.height)
for (i in 0 until stepsCount) {
addRect(
Rect(
offset = Offset(x = i * actualStep, y = 0f),
size = dotSize
)
)
}
close()
})
}
Usage:
Box(
Modifier
.height(1.dp)
.fillMaxWidth()
.background(Color.Gray, shape = DottedShape(step = 10.dp))
)
Result: