A modern programming language that makes developers happier.

kotlinlang

image.png

Hi everyone,
I’m working on creating a circular ProgressBar that displays as a half-circle. While it functions correctly, I’ve noticed that the view appears twice as large as intended due to the half-circle’s size. Is there a way to clip the bottom part, or is there an alternative approach to achieve the desired effect? Any suggestions would be greatly appreciated!
:thread: _*Code in thread*_

```@Composable
fun CircularProgressBar(
    modifier: Modifier = Modifier,
    percentage: Float,
    backgroundColor: Color,
    ellipseColor: Color,
    brush: Brush,
    strokeWidth: Dp
) {
    val startAngle = 180f
    Canvas(
        modifier = modifier
            .size(width = 216.dp, height = 216.dp)
            .padding(10.dp)

    ) {
        drawArc(
            color = backgroundColor,
            startAngle,
            180f,
            false,
            style = Stroke(strokeWidth.toPx(), cap = StrokeCap.Round),
            size = Size(size.width, size.height)
        )

        drawArc(
            brush = brush,
            startAngle,
            180f,
            false,
            style = Stroke(strokeWidth.toPx(), cap = StrokeCap.Round),
            size = Size(size.width, size.height)
        )

        val values = listOf(0, 55, 125, 180)

        for (i in values) {
            val angleInDegrees = (startAngle / 2) + i.toDouble()
            val radius = (size.height / 2)
            val x = -(radius * sin(Math.toRadians(angleInDegrees))).toFloat() + (size.width / 2)
            val y = (radius * cos(Math.toRadians(angleInDegrees))).toFloat() + (size.height / 2)

            drawCircle(
                color = ellipseColor,
                radius = 5f,
                center = Offset(x, y)
            )
        }
    }
}```

I solved it :sweat_smile:
```@Composable
fun CircularProgressBar(
    modifier: Modifier = Modifier,
    percentage: Float,
    backgroundColor: Color,
    ellipseColor: Color,
    brush: Brush,
    strokeWidth: Dp
) {
    val startAngle = 180f
    Box(
        Modifier
            .fillMaxSize()
            .drawBehind {
                drawArc(
                    color = backgroundColor,
                    startAngle,
                    180f,
                    false,
                    style = Stroke(strokeWidth.toPx(), cap = StrokeCap.Round),
                    size = Size(size.width, size.height * 2),
                )

                drawArc(
                    brush = brush,
                    startAngle,
                    180f,
                    false,
                    style = Stroke(strokeWidth.toPx(), cap = StrokeCap.Round),
                    size = Size(size.width, size.height * 2),
                )

                val values = listOf(0, 55, 125, 180)

                for (i in values) {
                    val angleInDegrees = (startAngle / 2) + i.toDouble()
                    val radius = (size.height)
                    val x =
                        (radius * sin(Math.toRadians(angleInDegrees))).toFloat() + (size.width / 2)
                    val y =
                        (radius * cos(Math.toRadians(angleInDegrees))).toFloat() + (size.height)

                    drawCircle(
                        color = ellipseColor,
                        radius = 5f,
                        center = Offset(x, y)
                    )
                }
            }
    )
}```


You were setting square size on your canvas