CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack-compose-layout
David Ibrahim
David Ibrahim

Reputation: 3237

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

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: enter image description here

Upvotes: 56

Views: 36270

Answers (3)

Nishikant Choudhary
Nishikant Choudhary

Reputation: 237

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: enter image description here

Upvotes: 0

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364988

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
    )
}

enter image description here

or

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

Upvotes: 111

Code Poet
Code Poet

Reputation: 8013

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
            )
        }
    }

Upvotes: 1

Related Questions