'fillMaxHeight() inside Row

My question is related to this one: How to achieve this layout in Jetpack Compose

I have this code:

@Composable
fun TestUi() {
    Row {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .background(color = Color.Yellow)
                .fillMaxHeight()
        ) {
            CircularProgressIndicator()
        }
    
        Image(imageVector = vectorResource(id = R.drawable.ic_launcher_background))
    }
}

I expected to get this:

But I got this instead:

How can I get the Box to fill all the available height without affecting the height of the Row?

I know I could use a ConstraintLayout to solve this, but it seems too much for such a simple use case.

android-jetpack-compose

Solution 1:^[1]

Have a look at the Layout Composable or Modifier. You can measure the defining element first and then provide modified constraints to the dependent element. If you want to use this as a modifier you should add a size check for the list.

Layout(content = {
    Box(modifier = Modifier
        .size(width = 30.dp, height = 50.dp)
        .background(Color.Green))
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .background(color = Color.Yellow)
            .fillMaxHeight()
    ) {
        CircularProgressIndicator()
    }
}) { measurables: List<Measurable>, constraints: Constraints ->
    val heightDef = measurables[0].measure(constraints)
    val other = measurables[1].measure(
        constraints.copy(
            maxHeight = heightDef.height,
            maxWidth = constraints.maxWidth - heightDef.width)
    )
    layout(
        width = heightDef.width + other.width,
        height = heightDef.height
    ) {
        other.placeRelative(0,0)
        heightDef.placeRelative(other.width,0)
    }
}

Solution 2:^[2]

This worked for me Modifier.height(IntrinsicSize.Min)

@Composable
fun content() {
    return Row(
        modifier = Modifier
            .height(IntrinsicSize.Min)
    ) {
        Box(
            modifier = Modifier
                .width(8.dp)
                .fillMaxHeight()
                .background(Color.Red)
        )
        Column {
            Text("Hello")
            Text("World")
        }
    }
}

source: https://www.rockandnull.com/jetpack-compose-fillmaxheight-fillmaxwidth/

Solution 3:^[3]

For height, instead of fillMaxHeight, just put

.height(vectorResource(id = R.drawable.ic_launcher_background).defaultHeight)

Solution 4:^[4]

Just for reference, here's the equivalent design implemented with ConstraintLayout:

@Composable
fun TestUi() {
    ConstraintLayout {
        val (box, image) = createRefs()

        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .background(color = Color.Yellow)
                .constrainAs(box) {
                    height = Dimension.fillToConstraints
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(parent.start)
                }
        ) {
            CircularProgressIndicator()
        }

        Image(
            imageVector = vectorResource(id = R.drawable.ic_launcher_background),
            modifier = Modifier.constrainAs(image) {
                top.linkTo(parent.top)
                start.linkTo(box.end)
            }
        )
    }
}

Solution 5:^[5]

you can use constraintlayout, the trick is in this part of the code height =Dimension.fillToConstraints

  ConstraintLayout(){
        val (boxRef, imgRef) = createRefs()

        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .background(color = Color.Yellow)
                .constrainAs(boxRef){
                    start.linkTo(parent.start)
                    end.linkTo(imgRef.start)
                    top.linkTo(parent.top)
                    height = Dimension.fillToConstraints
                }

        ) {
            CircularProgressIndicator()
        }

        Image(imageVector = vectorResource(id = R.drawable.ic_launcher_background),modifier=Modifier.constrainAs(imgRef){
            start.linkTo(boxRef.end)
            top.linkTo(parent.top)
            end.linkTo(parent.end)
        })
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	2jan222
Solution 2	Bills
Solution 3	Code Poet
Solution 4	Milack27
Solution 5	David Ibrahim

'fillMaxHeight() inside Row

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]