Jetpack Compose Fill remaining space in Row

Question

I have a Row with max width, I want to place a Icon at start then a text and then another Icon at end. I have specific sizes of icon and I want the Text to fill up the remaining space.

Row(
   Modifier
   .fillMaxWidth()
   .height(30.dp)
){
  Icon(Modifier.size(20.dp))

  Text() // Fill this with remaining space available

  Icon(Modifier.size(20.dp))
}

If I do fillMaxWidth in text then Icons goes out of the view.

How to do that?

score 59 · Accepted Answer · answered May 23 '21 at 14:21

59

You can apply Modifier.weight(1f) to the Text composable.

Something like:

Row(
    Modifier
        .fillMaxWidth()
        .height(30.dp)
){
    Icon(Icons.Filled.Add,"", Modifier.size(20.dp))

    Text("Text",Modifier.weight(1f)) // Fill this with remaining space available

    Icon(Icons.Filled.Add,"", Modifier.size(20.dp))
}

answered May 23 '21 at 14:21

Gabriele Mariotti

320,139
94
887
841

I have one more problem. i have decreased the height of TextField but the Placeholder text and input text are getting cropped. i.e. only 50% visible. how to solve it? – DelusionaL May 23 '21 at 14:54
@DelusionaL Try to decrease the textsize – Gabriele Mariotti May 23 '21 at 19:47
Then it's getting too small, only 8.sp is working which affects accessibility. – DelusionaL May 24 '21 at 02:41

Jetpack Compose Fill remaining space in Row

1 Answers1