Is there a way to make a composable as tall as other composables within a row?

Question

Row {
   Foo()
   Bar(cellSize = 80) 
}

I have two composables Foo and Bar. Bar's size is dependent on cellSize and after the calculation Bar usually ends up taller than Foo.

Foo contains a box with certain content. I want Foo to be as tall as Bar but adding a modifier.fillMaxHeight() to Foo just fills up the entire screen as opposed to the row

Therapsid

Have you tried assigning Modifier.height(IntrinsicSize.Max) to row and modifier.fillMaxHeight() to Foo? – Massa

You can try it like this #65943211 – Pixilated

Answer 1

Try doing this:

Row(modifier = Modifier.height(IntrinsicSize.Max)){
   Foo(modifier=Modifier.fillMaxHeight)
   Bar(cellSize = 80) 
}

This will basically make the Row take the height of the biggest child in terms of height and then we assign a fillmaxheight modifier to Foo() so that it takes all the height.

Styliform

This works great and is super cool! – Ablepsia

Answer 2

It sounds like you want to make the Foo composable as tall as the Bar composable within a Row, while maintaining the original structure of your layout. One way to achieve this is by using a Box composable to wrap both Foo and Bar, and then applying a modifier to the Box to align both composables vertically and ensure that Foo takes up as much height as Bar.

Here's how you can modify your code:

Row {
    Box(
        modifier = Modifier
            .fillMaxHeight()
            .weight(1f) // This will make the Box (and Foo) take up equal space as Bar
    ) {
        Foo()
    }
    Bar(cellSize = 80)
}

the Box will take up as much height as Bar due to the fillMaxHeight() modifier. The weight(1f) modifier ensures that the Box and Foo will take up equal space as Bar within the Row.

This approach maintains the structure of your layout while achieving the desired height alignment between Foo and Bar.

Filament