https://kotlinlang.org logo
Title
z

Zoltan Demant

09/20/2021, 2:24 PM
When using a
Box
that renders an arc with
Canvas
and a centered `Text`; why is the
Box
sizing wrong if contentAlignment is set to center? 🧵
Without contentAlignment=Center, the text is obviously laid out at the top left, but sizing of the box is correct. Ill leave my code below!
Box(
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(1f),
        contentAlignment = Center,
        content = {
            Canvas(
                modifier = Modifier.matchParentSize(),
                onDraw = {
                    val progressCircleWidth = ProgressCircleWidth.toPx()
                    val backgroundCircleWidth = TrackCircleWidth.toPx()

                    val radius = size.width / 2

                    drawCircularIndicator(
                        startAngle = StartAngle,
                        sweep = 360f,
                        color = trackCircleColor,
                        strokeWidth = backgroundCircleWidth,
                        radius = radius
                    )

                    drawCircularIndicator(
                        startAngle = StartAngle,
                        sweep = animatedProgress * EndAngle,
                        color = progressCircleColor,
                        strokeWidth = progressCircleWidth,
                        radius = radius
                    )
                }
            )

            center() //Text
        }
    )
private fun DrawScope.drawCircularIndicator(
    startAngle: Float,
    sweep: Float,
    color: Color,
    strokeWidth: Float,
    radius: Float
) {
    drawArc(
        color = color,
        startAngle = startAngle,
        sweepAngle = sweep,
        useCenter = false,
        topLeft = size.center - Offset(
            x = radius,
            y = radius
        ),
        size = Size(
            size.width,
            size.height,
        ),
        style = Stroke(
            width = strokeWidth,
            cap = Round
        )
    )
}
Also, I realize that I can render text directly on the canvas and probably have it centered that way easily. Id like to know why this isnt working though, and my use case requires a pretty complex center-content that goes beyond just text.
Simply removing the center composable from the box makes it size correctly. In this example Im just using a Text from the material library as the center content.
It seems to work with other composables, text being the exception 🤔
Im rendering all of this inside an AlertDialog. Not sure if that makes any difference.
z

Zach Klippenstein (he/him) [MOD]

09/20/2021, 4:33 PM
What is
center()
?
s

steelahhh

09/20/2021, 4:34 PM
Can’t help much, but the fact that you’re having iusses when it’s in AlertDialog, makes me think of this: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1630863255280400?thread_ts=1630854269.278500&channel=CJLTWPH7S&message_ts=1630863255.280400
👀 1
z

Zoltan Demant

09/20/2021, 4:50 PM
@Zach Klippenstein (he/him) [MOD] a simple text from the material design library
z

Zach Klippenstein (he/him) [MOD]

09/20/2021, 5:33 PM
No modifiers or anything?
z

Zoltan Demant

09/20/2021, 5:36 PM
Nope, text="ooo" is all
z

Zach Klippenstein (he/him) [MOD]

09/20/2021, 5:46 PM
I’m not sure then, but that alert dialog thing seems worth checking out.
👍🏽 1
z

Zoltan Demant

09/21/2021, 4:05 AM
Yup, the AlertDialog baseline was it. Stripped it out until its officially fixed and everything works!