Home > Software engineering >  Make the first element in a Row wrap without occupying all available space
Make the first element in a Row wrap without occupying all available space

Time:10-22

In Android Compose I want to create a Row which occupies all available width and contains two texts:

How this should look

  1. The first text should be at the start of the row.
  2. The second text should be right after the first one.
  3. The first text is of variable size, may soft-wrap, and should overflow first.
  4. The second text is fixed, occupies one line max, and should overflow only if the first one cannot shrink any further.

I tried my best to do this, but I can only achieve either of these things:

a. Make the second text go right after the first one but overflow first (by simply placing them one after another in the code).

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(text = title)

    Text(
        text = "Fixed text",
        maxLines = 1
    )
}

My Attempt a

b. Make the first text overflow first, but occupy the whole available space when it doesn't overflow (by adding Modifier.weight(1f) to the first text).

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        text = title,
        modifier = Modifier.weight(1f)
    )

    Text(
        text = "Fixed text",
        maxLines = 1
    )
}

My attempt b

How can I achieve the described behavior? I know I can probably use PreviewShortTextWithNoFill

  • Related