How do I design an adventure path with curved line in Jetpack Compose?

Question

I want to design an adventure path for educational levels in Jetpack Compose Android, where each level is connected to the next and previous level by a curved line.

Each level is a circular view for example an image that can be clicked.

Answer 1

You can use the Canvas to draw circles and lines.

Something like:

Canvas(modifier = Modifier.fillMaxSize(), onDraw = {

        //draw a circle
        drawCircle(color = Red,
            center = Offset(120f,120f),  
            radius = 100f)     

        //draw a simple line.In your case you can use a Bezier curves          
        val strokePath = Path().apply {   
            moveTo (220f, 120f)
            lineTo (size.width - 220f, 400f)
        }
        drawPath(
            path = strokePath,
            color = Blue,
            style = Stroke(
                width = 3.dp.toPx(),
                cap = StrokeCap.Round
            )
        )

        //draw the 2nd circle
        drawCircle(color = Color.Red,
            center = Offset(size.width - 120f,400f),
            radius = 100f)
    })

To enable clickable areas you can define a list of Rect for each circle and then apply the pointerInput modifier to the Canvas.

Something like:

val circles = ArrayList<Rect>()

Canvas(modifier = Modifier
    .fillMaxSize()
    .pointerInput(Unit) {
        detectTapGestures(
            onTap = { tapOffset ->

                circles.add(Rect(top = 70f, left = 70f, bottom = 170f, right = 170f))
                circles.add(
                    Rect(
                        top = 350f,
                        left = size.width - 170f,
                        bottom = 450f,
                        right = size.width - 70f
                    )
                )

                for (rect in circles) {
                    if (rect.contains(tapOffset)) {
                        //Handle the click here and do something
                        //....
                    }
                }
            }
        )
    },
    onDraw = { /* .... */ })