This is a question about ConstraintLayouts: (Code and Details in the Replies) If a ConstraintLayout...

# compose

[Russell Skorina]

This is a question about ConstraintLayouts: (Code and Details in the Replies)

If a ConstraintLayout is Empty then it will automatically FillMaxSize.
Is there a way to limit the maximum size of a ConstraintLayout without just adding a 0 pixel wide spacer in the code?

[Russell Skorina]

Here's some example Code:

@Composable
fun ConstraintLayoutTest(showRed: Boolean = true, showGreen: Boolean = true){
    var boxSize = 50.dp
    ConstraintLayout(modifier = Modifier) {
//		Spacer(modifier = Modifier.width(0.dp))
       val (greenBox, redBox) = createRefs()
       AnimatedVisibility(visible = showGreen,
          modifier = Modifier.constrainAs(greenBox){
             start.linkTo(parent.start)
          }) {
          Box(modifier = Modifier.width(boxSize).height(boxSize).background(Color.Green))
       }
       AnimatedVisibility(visible = showRed,
          modifier = Modifier.constrainAs(redBox){
             start.linkTo(greenBox.end)
          }) {
          Box(modifier = Modifier.width(boxSize).height(boxSize).background(Color.Red))
       }
    }
}

@Preview(showBackground = true)
@Composable
private fun SpacerPreview(){
	Theme {
		MidColumn {
			ConstraintLayoutTest()
			ConstraintLayoutTest(showGreen = false)
			ConstraintLayoutTest(showRed = false, showGreen = false)
		}
	}
}

[Russell Skorina]

Here's the Preview without the 0.dp spacer:

[Russell Skorina]

Here's The Preview with the 0.dp spacer

Why is this so different and how can I fix it?