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

user_10138208 0
Viewed 10916

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

android-jetpack-compose android
3 Answers

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 ..", .....)
    }
}
user_20165620

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

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

user_125359450
Related