How do I make a dotted/dashed line in Jetpack Compose?

Question

I'd need to replicate android XML view from this answer but in Jetpack Compose with pure kotlin

Answer 1

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

Answer 2

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: