Hi guys! I'm looking for a way to make a view like...

# compose

[Nicolai]

Hi guys!
I'm looking for a way to make a view like this but without the displacement of the one row that has a larger number % than the other.
I'm not looking to hardcode the width and I would love another way of dealing with this in favor of remembering the largest width.
Right now this is a column with a row inside containing 3 texts and one icon (arrow)

Any help is appreciated

[Filip Wiesner]

I used something like this:

@Composable
fun calculateTextWidth(
    text: String,
    style: TextStyle,
    maxIntrinsicSize: Boolean = true
): Dp {
    val density = LocalDensity.current
    val fontResolver = LocalFontFamilyResolver.current

    return remember(text, style, maxIntrinsicSize, density, fontResolver) {
        ParagraphIntrinsics(
            text = text,
            style = style,
            fontFamilyResolver = fontResolver,
            density = density
        ).let { px ->
            with(density) {
                if (maxIntrinsicSize) px.maxIntrinsicWidth.toDp()
                else px.minIntrinsicWidth.toDp()
            }
        }
    }
}

It was almost a year ago so I am not sure if this is still valid but the point is that you can get width of some (one line) text without the need of actually drawing it to screen.

[Nicolai]

Thanks Filip, that might be a way to go 🤔 . Currently looking at SubComposeLayout