1

I'm drawing a custom progress bar, the idea is to have a vertical "line" of circles with space between them like this:

enter image description here

As you progress, the circles change color and size, and the text ("60" in the image I shared)is displayed alongside the top level circle. With the current text size it seems centered enough, but if I change the text size it is noticeable that is bottom aligned, like this:

enter image description here

Here is the code:

Box(
        modifier
            .aspectRatio(1f)
            .drawWithCache {
                onDrawBehind {

                    val height = size.height
                    val space = height / 10
                    for (i in 1..numberOfCircles) {
                        val onBrush =
                            if (i <= progressLevel) progressBrush(progressLevel) else Color.Gray.toBrush()
                        val circleSize =
                            if (i == progressLevel) circleRadius.value * 2.5F else if (i == progressLevel - 1) circleRadius.value * 1.5F else circleRadius.value


                        drawProgressCircle(
                            onBrush,
                            sizeArray[i - 1].value,
                            size.height - (space * i)
                        )

                        if (i == state.level) {
                            drawText(
                                onBrush,
                                circleSize,
                                size.height - (space * i),
                                (progressLevel * 10).toString()
                            )
                        }
                    }
                }
            },
        contentAlignment = Alignment.Center
    )

The draw circles function:

fun DrawScope.drawProgressCircle(
    brush: Brush,
    radius: Float,
    place: Float
) {
    drawCircle(
        brush = brush,
        radius = radius,
        center = Offset(x = size.width/2, y = place),
    )
}

The draw text function:

fun DrawScope.drawText(
    brush: Brush,
    radius: Float,
    place: Float,
    text: String
) {
   drawContext.canvas.nativeCanvas.apply {
    drawText(
        text,
        size.width/2.2F,
        place + radius,
        Paint().apply {
            textSize = 20.sp.toPx()
            color = Color.White.toArgb()
            textAlign = Paint.Align.RIGHT
        }
    )
}
}

How can I keep the text vertically aligned at the last circle center with any text size?

Petermonteer
  • 296
  • 4
  • 17
  • 1
    There is a new function of drawing text comes with Jetpack Compose 1.3.0-alpha02 which let's you check text bounds. https://stackoverflow.com/questions/73352084/how-to-center-text-in-canvas-in-jetpack-compose – Thracian Aug 19 '22 at 16:55

0 Answers0