When using a `Box` that renders an arc with `Canvas` and a centered `Text`; why is the `Box` sizing ...

# compose

[Zoltan Demant]

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? 🧵

[Zoltan Demant]

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!

[Zoltan Demant]

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
        )
    )
}

[Zoltan Demant]

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.

[Zoltan Demant]

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.

[Zoltan Demant]

It seems to work with other composables, text being the exception 🤔

[Zoltan Demant]

Im rendering all of this inside an AlertDialog. Not sure if that makes any difference.

[Zach Klippenstein (he/him) [MOD]]

What is center()?

[steelahhh]

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

[Zoltan Demant]

@Zach Klippenstein (he/him) [MOD] a simple text from the material design library

[Zach Klippenstein (he/him) [MOD]]

No modifiers or anything?

[Zoltan Demant]

Nope, text="ooo" is all

[Zach Klippenstein (he/him) [MOD]]

I’m not sure then, but that alert dialog thing seems worth checking out.

[Zoltan Demant]

Yup, the AlertDialog baseline was it. Stripped it out until its officially fixed and everything works!