IssueTracker

ConstraintLayout Compose version: 1.1.0-alpha08

Given this example:

@Composable
fun Bug() {
    ConstraintLayout(
        Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        val (ref1, ref2, ref3) = createRefs()
        val chain = createVerticalChain(ref1, ref2, ref3, chainStyle = ChainStyle.Packed(0.5f))
        constrain(chain) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
        }

        Text(
            text = "Above",
            modifier = Modifier.constrainAs(ref1) {
                width = Dimension.fillToConstraints
                linkTo(start = parent.start, end = parent.end)
            }
        )
        AndroidView(
            factory = ::View,
            modifier = Modifier
                .constrainAs(ref2) {
                    width = Dimension.fillToConstraints
                    linkTo(start = parent.start, end = parent.end)
                }
                .aspectRatio(1f)
        ) {
            it.setBackgroundColor(0xffff0000.toInt())
        }
        Text(
            "Below",
            modifier = Modifier
                .constrainAs(ref3) {
                    width = Dimension.fillToConstraints
                    linkTo(start = parent.start, end = parent.end)
                }
                .padding(top = 8.dp)
        )
    }
}

@Preview(showBackground = true, backgroundColor = 0xffffffff)
@Composable
private fun BugPreview() {
    Bug()
}

I'd expect the items to be placed in a vertically centered chain.

What I see instead is that the AndroidView fills most the screen and even obscures the title.

Wrapping it in a Box works however:

@Composable
fun Working() {
    ConstraintLayout(
        Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        val (ref1, ref2, ref3) = createRefs()
        val chain = createVerticalChain(ref1, ref2, ref3, chainStyle = ChainStyle.Packed(0.5f))
        constrain(chain) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
        }

        Text(
            text = "Above",
            modifier = Modifier.constrainAs(ref1) {
                width = Dimension.fillToConstraints
                linkTo(start = parent.start, end = parent.end)
            }
        )
        Box(modifier = Modifier
            .constrainAs(ref2) {
                width = Dimension.fillToConstraints
                linkTo(start = parent.start, end = parent.end)
            }
        ) {
            AndroidView(
                factory = ::View,
                modifier = Modifier.aspectRatio(1f)
            ) {
                it.setBackgroundColor(0xffff0000.toInt())
            }
        }
        Text(
            "Below",
            modifier = Modifier
                .constrainAs(ref3) {
                    width = Dimension.fillToConstraints
                    linkTo(start = parent.start, end = parent.end)
                }
        )
    }
}

@Preview(showBackground = true, backgroundColor = 0xffffffff)
@Composable
private fun WorkingPreview() {
    Working()
}