Text layout priority in Jetpack Compose

Question

I have two texts in a row:

Row {
    Text(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
        maxLines = 1,
        style = MaterialTheme.typography.h4,
        modifier = Modifier
            .background(Color.Cyan)
    )
    Spacer(
        modifier = Modifier
            .weight(1f)
            .requiredWidthIn(min = 10.dp)
    )
    Text(
        "Second",
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .requiredWidth(IntrinsicSize.Min)
            .background(Color.Yellow.copy(alpha = 0.5f))
    )
}

First one can be quite long. When it happens, second text gets compressed and disappears from the view.

requiredWidth(IntrinsicSize.Min) brings it back, but the first text is still taking all available width and goes under the second one.

When first text is small, I need second one be at the right, that's why I use spacer between them.

How can I add some layout priority to fix it?

I meant at the right, fixed the typo. First text should be Aligned to start, and second one - to end — Phil Dukhov, Jul 09 '21 at 19:09

Gabriele Mariotti · Accepted Answer · 2021-07-09T19:18:16.987

9

You can add Arrangement.SpaceBetween in the Row and add the modifier weight(1f, fill= false) to the first Text:

Row(horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier.fillMaxWidth()) {
    Text(
        "Lorem ....",
        maxLines = 1,
        style = MaterialTheme.typography.h4,
        modifier = Modifier
            .background(Color.Cyan)
            .weight(1f, fill= false)
    )
    Text(
        "Second",
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .background(Color.Yellow.copy(alpha = 0.5f))
    )
}

edited Jul 09 '21 at 19:18

answered Jul 09 '21 at 17:11

Gabriele Mariotti

320,139
94
887
841

Looks correct now, I'm still confused with the fact that I can't make text not greedy without weight modifier, this means I can't use it more than once inside the row(without making sized dependent on each other) Yes, I can make minimum spacing between texts with padding, but I find Spacer preferred way to do so, and I can't assign it weight modifier in this case.. – Phil Dukhov Jul 09 '21 at 20:02

Tygris · Answer 2 · 2022-08-30T14:57:07.973

1

You can try preventing the Text composable from filling the whole width.

for example you can say

Text(text = "Lorem...", modifier = Modifier.fillMaxWidth(0.75f))

This will make the text fill its maximum width but leave 25% of remaining space for the second text. of course you can change 0.75f to any value you find fit for your use case.

edited Aug 30 '22 at 14:57

answered Jul 09 '21 at 19:10

Tygris

121
3
9

That may work if I was sure that second text won't take more than 25%, but I'd like it to take all space it needs and then first label layout to begin calculations – Phil Dukhov Jul 09 '21 at 19:24

Text layout priority in Jetpack Compose

2 Answers2

Linked