How to make element fill the remaining space inside a Row or a Column in Jetpack Compose

Question

I am trying to show two text messages besides each other in a row but when the size of the first text is big, the second view gets pushed out of the screen as shown below:

The code:

Row(modifier = Modifier.fillMaxWidth()) {
    Text(
        text = "safasfasdfsasdssdsaasdsadsdsaasdsasdsasdasddassdsssdasdadsasdasdsd",
        modifier = Modifier
            .padding(top = 12.dp, bottom = 12.dp, end = 12.dp, start = 10.dp)
            .background(Color.Gray)
    )
    Text(
        text = "12:00 am",
        style = messageTimeTextStyle,
        modifier = Modifier
            .padding(horizontal = 16.dp),
        maxLines = 1
    )
}

The output:

Gabriele Mariotti · Accepted Answer · 2021-03-14T10:13:25.877

You can apply the weight modifier only to the long text.

The .weight modifier sizes the element's width proportional to its weight relative to other weighted sibling elements in the Row. The parent will divide the horizontal space remaining after measuring unweighted child elements and distribute it according to this weight

Something like:

Row() {
    Text(text = "safasfasdfsasdssdsaasdsadsdsaasdsasdsasdasddassdsssdasdadsasdasdsd",
        Modifier
            .padding(top = 12.dp, bottom = 12.dp, end = 12.dp, start = 10.dp)
            .background(Color.Gray)
            .weight(1f)
         )
    Text(
        text = "12:00 am",
        modifier = Modifier
            .padding(horizontal = 16.dp),
        maxLines = 1
    )
}

or

Row() {
    Column(Modifier.weight(1f)){
        Text(text = "safasfasdfsasdssdsaasdsadsdsa.." , ....)
    }
    Column() {
        Text( text = "12.00 ..", .....)
    }
}

What happens if my longer text disappears at runtime? I still want the second text to remain at the end. Is that possible? — Sarah Khan, Apr 21 '22 at 19:58
@SarahKhan I believe the second text will remain at the end as the Modifier.weight(1f) is applied to the Column and not the Text composable itself — Arthur Kasparian, Sep 04 '22 at 19:11

score 1 · Answer 2 · answered Mar 14 '21 at 09:02

If you wrap your text in boxes and give your boxes weight, then you get what you are looking for:

Row(modifier = Modifier.fillMaxWidth()) {
        Box(Modifier.weight(2f)) {
            Text(
                text = "safasfasdfsasdssdsaasdsafasfasdfsasdssdsaasdsafasfasdfsasdssdsaasd",
                Modifier
                    .padding(top = 12.dp, bottom = 12.dp, end = 12.dp, start = 10.dp)
                    .background(Color.Gray)
            )
        }
        Box(Modifier.weight(1f)) {
            Text(
                text = "12:00 am",
                modifier = Modifier
                    .padding(horizontal = 16.dp),
                maxLines = 1
            )
        }
    }

yes I can absolutely do that but I want the first text to take all the available space and leave only space for the second view, just as expected from a normal Linearlayout — David Ibrahim, Mar 14 '21 at 09:13

score 0 · Answer 3 · answered Apr 20 '22 at 14:52

If you assign weight only to the Text, it will take all the space available and it will leave just enough space that is needed for the Box. I am copying and editing the same code from the reply above by @Code Poet.

    Row(modifier = Modifier.fillMaxWidth()) {
        Box(Modifier.weight(2f)) {
            Text(
                text = "safasfasdfsasdssdsaasdsafasfasdfsasdssdsaasdsafasfasdfsasdssdsaasd",
                Modifier
                    .padding(top = 12.dp, bottom = 12.dp, end = 12.dp, start = 10.dp)
                    .background(Color.Gray)
            )
        }
        Box {
            Text(
                text = "12:00 am",
                maxLines = 1
            )
        }
    }
}

Preview:

How to make element fill the remaining space inside a Row or a Column in Jetpack Compose

3 Answers3

Linked