A modern programming language that makes developers happier.

kotlinlang

image.png

I have a question about something I'm a bit stuck on.
I need to create a layout like this where the left text (label) and the right text (value) should be wrapped.
When one of them is growing in width, it should grow until the other one and then start to ellipsize.
When both of them are growing in width, they should stop in the middle and both start to ellipsize.

What I have achieved is this (image in white with the code in the thread).
I also tried to use `weight(0.5f)` on both, but then they always ellipsize when reaching the middle :sweat:

What am I missing? Is this even feasible in Compose/Android?
Could somebody help me with this :sweat_smile:

```Row(
    modifier = Modifier
        .weight(1.0f),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        modifier = Modifier
            .wrapContentWidth()
            .background(Color.Blue.copy(alpha = 0.5f)),
        text = labelText,
        overflow = TextOverflow.Ellipsis,
        style = labelTextStyle,
        maxLines = 1
    )

    Spacer(modifier = Modifier.width(6.dp))

    Text(
        modifier = Modifier
            .background(Color.Red.copy(alpha = 0.5f)),
        text = valueText ?: "",
        overflow = TextOverflow.Ellipsis,
        style = valueTextStyle,
        textAlign = TextAlign.End,
        maxLines = 1
    )
}```


Feel free to give this a try <https://github.com/HedvigInsurance/android/blob/7e85f0db5781027e32700587c32c517454c95dac/app/core/core-ui/src/main/kotlin/com/hedvig/android/core/ui/text/HorizontalItemsWithMaximumSpaceTaken.kt#L18-L31|https://github.com/HedvigInsurance/android/blob/7e85f0db5781027e32700587c32c517454[…]ig/android/core/ui/text/HorizontalItemsWithMaximumSpaceTaken.kt>

Examples of how to use this are in the previews right below

Wow, this is crazy! Didn't expect such a quick and detailed response! Thank you very much, this will help tremendously! :open_mouth:

You got lucky :sweat_smile: Many people have asked for this in the past years by now, and it was Albert who wrote this in this thread <https://kotlinlang.slack.com/archives/CJLTWPH7S/p1650525026461549?thread_ts=1648467352.438719&amp;cid=CJLTWPH7S> and I just fine tuned it a tiny bit for our needs and I’ve probably linked it in this slack 3+ times by now :smile:

Wow okay, a nice read on the whole thought process. Thanks for the information!