What am I missing here? I want the red box to fill...

# compose

[Philip Blandford]

What am I missing here? I want the red box to fill the space between the parent top and the top of the green box, but it ends up aligned to the centre of the green box.

ConstraintLayout(Modifier.fillMaxSize()) {
  val (box1, box2) = createRefs()
  Box(Modifier.constrainAs(box1){
    top.linkTo(parent.top); bottom.linkTo(box2.top)
  }.background(Color.Red).fillMaxSize())
  Box(Modifier.constrainAs(box2){
   bottom.linkTo(parent.bottom); centerHorizontallyTo(parent)
  }.size(200.dp,50.dp).background(Color.Green))
}

[Zach Klippenstein (he/him) [MOD]]

Just a guess, but maybe the fillMaxSize on box1 is conflicting with the constraints somehow? What if you change to fillMaxWidth?

[Philip Blandford]

The red box just disappears altogether when I do that.

[Zach Klippenstein (he/him) [MOD]]

I think the problem is definitely the size modifiers stomping the constraint layout. If you change it to use the ConstraintLayout to define the sizes, then it works:

val (box1, box2) = createRefs()

    Box(Modifier
      .constrainAs(box1) {
        width = fillToConstraints
        height = fillToConstraints
        top.linkTo(<http://parent.top|parent.top>)
        bottom.linkTo(<http://box2.top|box2.top>)
        start.linkTo(parent.start)
        end.linkTo(parent.end)
      }
      .background(Color.Red)
    )

    Box(Modifier
      .constrainAs(box2) {
        width = value(200.dp)
        height = value(50.dp)
        bottom.linkTo(parent.bottom)
        centerHorizontallyTo(parent)
      }
      .background(Color.Green)
    )

[Philip Blandford]

Ah, that's what I was missing! Thanks