androidkotlinandroid-jetpack-composeandroid-jetpack-compose-canvas

How to draw a Ring in Jetpack Compose with Canvas?


I know you can draw a circle in Jetpack Compose and Canvas using simple methods. I tried drawing a colored circle and another smaller white circle to achieve a ring but it doesn't seem right. What if the background is not white or the ring shape should drawn on other things and the inside of it needs to be hollow?

Surface {
        Canvas(
            modifier = Modifier.size(200.dp),
            onDraw = {
                drawCircle(
                    color = Color.Blue,
                    radius = 200f
                )
                drawCircle(
                    color = Color.White,
                    radius = 150f
                )
            }
        )
    }

fake ring


Solution

  • You can set style as Stroke to draw a non-filled shape.

    enter image description here

    @Preview
    @Composable
    private fun RingSample() {
    
        Canvas(
            modifier = Modifier.size(200.dp),
            onDraw = {
    
                val strokeWidth = 50f
                drawCircle(
                    color = Color.Blue,
                    radius = 200f,
                    style = Stroke(
                        width = strokeWidth
                    )
                )
    
            }
        )
    }