CanvasUpdate

Update.kt

       val canvasWidth = size.width.toDp()
        // calculate the progress for each color
        val progressGreen = 40
        val greenSize = (canvasWidth * progressGreen) / 100
        val progressYellow = 20
        val yellowSize = (canvasWidth * progressYellow) / 100
        val progressRed = 15
        val redSize = (canvasWidth * progressRed) / 100
        val progressGray = 5
        val graySize = (canvasWidth * progressGray) / 100
        val remainingProgress = 100 - (progressGreen + progressYellow + progressRed + progressGray)
        val remainingSize = (canvasWidth * remainingProgress) / 100
        val cornerRadius = CornerRadius(2.dp.toPx(), 2.dp.toPx())
        // draw green progress
        val path = Path().apply {
            addRoundRect(
                RoundRect(
                    rect = Rect(
                        offset = Offset(0f, 0f),
                        size = Size(greenSize.toPx() * greenAnimate.value, 8.dp.toPx()),
                    ),
                    topLeft = cornerRadius,
                    bottomLeft = cornerRadius,
                )
            )
        }
        drawPath(
            path = path,
            color = Color(0xFF69BA6E)
        )
        //draw yellow progress with offset =  green progress offset
        drawRect(
            color = Color(0xFFFEC93E),
            topLeft = Offset(greenSize.toPx(), 0f),
            size = Size(yellowSize.toPx() * yellowAnimate.value, 8.dp.toPx())
        )
        //draw red progress with offset =  yellow progress + green progress
        drawRect(
            color = Color(0xFFED5554),
            topLeft = Offset(greenSize.toPx() + yellowSize.toPx() , 0f),
            size = Size(redSize.toPx()  * redAnimate.value , 8.dp.toPx())
        )
        //draw grey progress with offset =  red progress + yellow progress + green progress
        drawRect(
            color = Color(0xFFBDBDBD),
            topLeft = Offset(greenSize.toPx() + yellowSize.toPx() + redSize.toPx() ,
                0f),
            size = Size(graySize.toPx()* greyAnimate.value , 8.dp.toPx())
        )
        // draw remaining
        val progressPath = Path().apply {
            addRoundRect(
                RoundRect(
                    rect = Rect(
                        offset = Offset(graySize.toPx() + greenSize.toPx() + yellowSize.toPx() + redSize.toPx(),
                            0f),
                        size = Size(remainingSize.toPx()  * remainingAnimate.value, 8.dp.toPx()),
                    ),
                    topRight = cornerRadius,
                    bottomRight = cornerRadius
                )
            )
        }
        drawPath(
            path = progressPath,
            color = Color(0xFFE0E0E0),
        )