Hello! Noobie and simple question that I can’t fig...

# compose

[robercoding]

Hello! Noobie and simple question that I can’t figure out how to solve. Probably because I haven’t touched compose in the last 4 months.

More in 🧵

[robercoding]

I have this simple code below:

@Composable
fun SimpleBox(modifier: Modifier = Modifier) {
    Box(modifier = Modifier
        .height(48.dp)
        // .fillMaxWidth()
        .background(Color.Black)) {
        Row(
            Modifier
                .fillMaxHeight()
                .background(Color.Red), 
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = "Hello amazing text", modifier = Modifier.background(Color.Blue))
            Icon(painter = painterResource(id = R.drawable.arrow_to_right), contentDescription = "")
        }
    }
}

Observe //fillMaxWidth() is commented.

Whenever fillMaxWidth is commented it works like I expect. The box grow as much as the children (Row) needs.
Whenever fillMaxWidth is NOT commented it doesn’t behave how I want:
• Box fills the whole width as expected
• Children doesn’t match the same width as the parent.
◦ I want children to also fill the whole width if the parent has this Modifier.fillMaxWidth()
Any ideas? .weight(1f) doesn’t work because it fills the whole width when fillMaxWidth is commented.

Some pictures:

[robercoding]

I have the feeling that I will have to use Layout(...) to achieve what I want, but that feels so cumbersome

[robercoding]

Ah I cannot believe it… It was more simpler than I thought… 🤦

Just remove that extra Box that adds 0 to the actual UI

@Composable
fun SimpleBox(modifier: Modifier = Modifier) {
    Row(modifier = Modifier
        .height(48.dp)
        .fillMaxWidth()
        .background(Color.Red),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
            Text(text = "Hello amazing text", modifier = Modifier.background(Color.Blue))
            Icon(painter = painterResource(id = R.drawable.arrow_to_right), contentDescription = "")
    }
}

Solved! bloodtrail

[Josh Eldridge]

A box has a matchParentSize modifier available via it's context it provides that you can use on the children

[Stylianos Gakis]

Box has the very convenient propagateMinConstraints parameter which I’ve found to be useful many more times than I imagined it would initially.
You may have noticed that some layouts do this implicitly, most notable Surface. If you look inside it has a Box specifically with that parameter set to true.
Otherwise your box will be max size as you describe, but there’s nothing telling the children of said box to also be as big 😄

Similar result can be achieved by the aforementioned matchParentSize, but then you make it the children’s responsibility, which in my experience more often than not is something you can forget to do. If the parent wants the child to have the same min size, propagateMinConstraints is your buddy.

[robercoding]

A box has a matchParentSize modifier available via it’s context it provides that you can use on the children (edited)

matchParentSize didn’t fit my use case because children UIs would be dependant on the parent Box size. And for my specific problem: the Parent Box width size depends on the children if fillMaxWidth has NOT been set. Which would turn into a blank space (0.dp width) if I had set that matchParentSize
But thank you for the idea 🫶

propagateMinConstraints is your buddy.

Oh wow, that was such a nice explanation @Stylianos Gakis. I definitely wanted the parent to be responsible to propagate min constraints to their children. That was the tool I was missing even before posting this message.

Thanks a lot, both. I learned a new tool! 👏 🫶 🎉
Will pay a bit of more attention next time to the Surface/Box params and see if I can get something valuable from there

[Josh Eldridge]

Great to know, I also didn't know about propagateMinConstraints !

[Stylianos Gakis]

I shall call myself the propagateMinConstraints evangelist, because it seems like every time I bring it up people haven’t heard of it, and they’re all happy to learn about it. I mean I can’t blame ya, I also didn’t know about it for at least a year or two of working with compose, and ever since I did so many questions I’ve had about why some layouts work the way they do just automatically got answered!