0

In the following code the innermost Box, the blue box, is set 200.dp and able to hide its parent, the green box. Why is the blue box allowed to do that if I set the blue box's width and height to 30dp only.


    @Composable
fun MainScreen() {
    Box(
        modifier = Modifier
            .size(60.dp)
            .background(color = Color.Red)
    ) {
        Box(
            modifier = Modifier
                .size(30.dp)
                .background(Color.Green)
        )
        Box(modifier = Modifier
            .size(200.dp)
            .background(Color.Blue)
        )
    }


}
ntos
  • 189
  • 10

1 Answers1

0

There is nothing wrong in your example.

When the child Constraints do not match the one it receives from parent it's bounded in that Constraints unless you use Modifier.wrapContentX(unbounded=true/false) or Modifier.requiredX modifier. X can be width/height/size etc.

In your example minWidth/Height and maxWidth/Height in parent Constraints will be similar to what i have on my device in pixels(dp * density)

 I  Parent Constraints(minWidth = 165, maxWidth = 165, minHeight = 165, maxHeight = 165)
 I  Top Constraints(minWidth = 83, maxWidth = 83, minHeight = 83, maxHeight = 83)
 I  Bottom Constraints(minWidth = 165, maxWidth = 165, minHeight = 165, maxHeight = 165)

I replaced each Box with BoxWithConstraints to log Constraints.

When you assign a Modifier.size() both min and max width or height are equal and they should be in parent's Constraints bounds.

In bottom Box since 200.dp is out of parent's 60.dp size, it's min and max dimensions are limited to 60.dp in pixels. With default Composables and without Modifier.wrapContentX or Modifier.requiredX you cannot force 200.dp size to child Composable while parent is 60.dp

And why blue Box is on top is due to how Box places items. the last Placeable or Composable is drawn on top of others unless any Modifier.zIndex is assigned.

You can check out Constraints section of this answer for more detail about Constraints ranges.

Also you can refer this official medium article for more details about Constraints and Modifiers.

https://medium.com/androiddevelopers/constraints-and-modifier-order-a3912461ecd6

Thracian
  • 43,021
  • 16
  • 133
  • 222
  • Thank you. My mistake. I did not embed the blue box in the green one. But how does it calculate the constraints for the `Top` composable? On my virtual device, pixel 5 api 33 at 1080x2340 440dpi, the result is `Constraints(minWidth = 193, maxWidth = 193, minHeight = 193, maxHeight = 193)` – ntos Aug 08 '23 at 11:11
  • It's calculated by multiplying dimension in dp with density. You can also get max/minWidth/Height in dp. `println("Top minWidth: $minWidth, maxWidth: $maxWidth")` – Thracian Aug 08 '23 at 11:25
  • I still do not get it. `193 * 440` = `84920` but the width of the pixel 5 is only `1080` – ntos Aug 08 '23 at 12:52
  • Thank you very much. I think I should ask this in another post. – ntos Aug 08 '23 at 13:22
  • I actually meant density vs dpi. I posted dp by mistake but you got what i mean with it. – Thracian Aug 08 '23 at 13:29