A modern programming language that makes developers happier.

kotlinlang

Is there a way to align text to the right and have other text leftalign based on that first text's contents? (Pictures in thread)

correct.png

See how the 9. is aligned with the 0 on the next row?

wrong.png

The Code I am using to produce the (wrongly aligned) second image:

```repeat(11) { index -&gt; 
  Row {
    Text(text = "${index + 1}.")
    Spacer(modifier = Modifier.size(4.dp))
    Text(text = "Text content")
  }
}```

All help highly appreciated :slightly_smiling_face:

you best bet seems like subcomposing the numbers and finding out the widest one and giving that width to every numbered bullet point.

I tried rendering a text and measuring it with `onGloballyPositioned` but then it will still render the text.. is there a way to only measure a composables size without drawing it?

Yes, that's exactly what I was referring to by suggesting Subcomposition. Please take a look at the docs for `SubcomposeLayout` . `onGlobalPositioned` , `onSizeChanged` and etc. will make you lose a frame.

ConstraintLayout is able to do this using Barrier.

Screenshot_1621741032.png

<@U010V66NVRC> thank you for the questions… It was challenging :sweat_smile: and thanks to the <@UDS12QTHB> tip, I made this sample… I hope it helps…
<https://github.com/nglauber/JetpackComposePlayground/blob/master/app/src/main/java/br/com/nglauber/jetpackcomposeplayground/screens/ConstraintLayoutBarrierScreen.kt|https://github.com/nglauber/JetpackComposePlayground/blob/master/app/src/main/java[…]tpackcomposeplayground/screens/ConstraintLayoutBarrierScreen.kt>
I forgot to add the bottom padding for each item, but I guess you’ll be able to do it :wink:

Holy smokes <@UPX239H4P>, I was expecting some tips but never thought someone would actually just do it and give me a sample code :smile: Thanks, I will check it out!

I did it without ConstraintsLayout in the end:

```    private object BulletPlaceables
    private object ContentPlaceables

    SubcomposeLayout(
        modifier = modifier,
    ) { constraints -&gt;
        val maxBulletWidth = subcompose(BulletPlaceables) {
            lines.forEachIndexed { index, _ -&gt; bullet(index) }
        }.map {
            it.measure(constraints).width
        }.maxByOrNull {
            it
        }?.let { maxWidth -&gt;
            // +1 to offset rounding errors during the conversion
            with(LocalDensity.current) { ((maxWidth + 1) / density).dp }
        } ?: 0.dp

        // Measure the actual content
        val contentPlaceable: Placeable = subcompose(ContentPlaceables) {
            // This is the actual content I was rendering before, just now we know the maximum bullet size so we can use it
            Column(
                modifier = modifier,
            ) {
                lines.forEachIndexed { index, lineContent -&gt;
                    BulletListEntry(
                        style = style,
                        bullet = { bullet(index) },
                        bulletWidth = maxBulletWidth,
                        content = lineContent,
                    )
                    if (index != lines.lastIndex) {
                        Spacer(modifier = Modifier.height(entrySpacing))
                    }
                }
            }
        }
            .first()
            .measure(constraints)

        layout(contentPlaceable.width, contentPlaceable.height) {
            contentPlaceable.placeRelative(0, 0)
        }
    }```

Awesome! I never used `SubcomposeLayout` I’ll check it out :wink:

Leaving your full (summarized) sample here for future references :sweat_smile:
<https://github.com/nglauber/JetpackComposePlayground/blob/master/app/src/main/java/br/com/nglauber/jetpackcomposeplayground/screens/SubcomposableSampleScreen.kt|https://github.com/nglauber/JetpackComposePlayground/blob/master/app/src/main/java[…]r/jetpackcomposeplayground/screens/SubcomposableSampleScreen.kt>