Fill height for child in Row

Question

I try to achieve this layout but don't really know how:

currently it looks like this:

using this Code:

@Preview(widthDp = 150)
@Composable
fun Item() {
    Card(shape = RoundedCornerShape(8.dp)) {
        Row {
            Box(Modifier.background(Color.Yellow).weight(1f)) {
                SomeMoreContentWithUnknownHeight()
            }
            Box(Modifier.width(20.dp).height(IntrinsicSize.Max).background(Color.Green))
        }
    }
}

I tried to set the height of the second Box to IntrinsicSize.Max but that didn't change anything. I am currently running Jetpack Compose in Version 1.0.0-beta07

Gabriele Mariotti · Accepted Answer · 2023-03-07T07:31:23.147

87

You have to apply Modifier.height(IntrinsicSize.Min) to the Row and the fillMaxHeight() modifier to the 2nd Box.

Something like:

Card(shape = RoundedCornerShape(8.dp)) {
    Row(
        modifier = Modifier.height(IntrinsicSize.Min) //Intrinsic measurement
    ) {
        Box(
            Modifier
                .background(Color.Yellow)
                .weight(1f)
        ) {
            //Box(Modifier.height(50.dp))
        }

        Box(
            Modifier
                .width(20.dp)
                .fillMaxHeight()  //<--- fill max height
                .background(Color.Green)
        ) {
            //........
        }
    }
}

As explained in the doc:

The Row composable's minIntrinsicHeight will be the maximum minIntrinsicHeight of its children. The Green Box element's minIntrinsicHeight is 0 as it doesn't occupy space if no constraints are given; the Yellow Box minIntrinsicHeight will be that of the content given a specific width. Therefore, the Row element's height constraint will be the max minIntrinsicHeight of the Yellow Box content. The Green Box will then expand its height to the height constraint given by the Row.

edited Mar 07 '23 at 07:31

answered May 24 '21 at 19:39

Gabriele Mariotti

320,139
94
887
841

4

Do you know why we have to apply `Modifier.height(IntrinsicSize.Min)` to the top Row? – Ahmed Hegazy Dec 06 '21 at 15:20
@AhmedHegazy, this will size the children to be as tall as the minimum height needed. – crjacinro Jan 27 '23 at 09:42
this is quite hard to understand, with `ConstraintLayout` you can just set `height` to `Dimension.fillToConstraints` (in View System just to set `height` to `0dp`) and link `top` to `parent.top` and `bottom` to `parent.bottom`, easy to understand the logic – user924 Apr 11 '23 at 21:19
What about this case? https://stackoverflow.com/questions/75990451/fill-height-for-child-in-row-when-one-of-them-is-constraintlayout I can't make it work with `ConstraintLayout` – user924 Apr 12 '23 at 09:53
basically setting `.height(IntrinsicSize.Min)` to container breaks logic for any `ConstraintLayout` inside this container... – user924 Apr 12 '23 at 10:53

Fill height for child in Row

1 Answers1

Linked