I have a weird problem with upgrading to alpha05. ...

# compose

[Cash Hsiao]

I have a weird problem with upgrading to alpha05.
The elements inside ConstraintLayout will have a probability to be rendered or not.
I also discovered this issue in Owl project.

[Cash Hsiao]

Surface(modifier = Modifier.fillMaxSize()) {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (logo, brand) = createRefs()
        Image(
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.FillWidth,
            asset = imageResource(id = R.drawable.black_background)
        )
        Icon(
            modifier = Modifier.wrapContentSize().constrainAs(logo) {
                top.linkTo(<http://parent.top|parent.top>)
                bottom.linkTo(parent.bottom)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            },
            asset = vectorResource(id = R.drawable.ic_logo),
            tint = white
        )
        Icon(
            modifier = Modifier.wrapContentSize().constrainAs(brand) {
                top.linkTo(logo.bottom, 2.dp)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            },
            asset = vectorResource(id = R.drawable.ic_brand),
            tint = white
        )
    }
}

I've tried several times with this view, it will have 4 combinations: both logo and brand show, only logo shows, only brand shows and none of them show.

[Chethan]

it is the problem with way you have consider this layout , you have not restricted the very first element - Image under constrain layout. with this structure - before background complete with specified background , other icon comes to see or it hide behind the background .

Please consider this way, stack them one after other , background and then contrainlayout.

Surface(modifier = Modifier.fillMaxSize()) {

    Box {


        Image(
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.FillWidth,
            asset = vectorResource(id = R.drawable.ic_bk)
        )

        ConstraintLayout(modifier = Modifier.fillMaxSize()) {

            val (logo, brand) = createRefs()

            Icon(
                modifier = Modifier.wrapContentSize().constrainAs(logo) {
                    top.linkTo(<http://parent.top|parent.top>)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                },
                asset = vectorResource(id = R.drawable.ic_logo),
                tint = Color.White
            )
            Icon(
                modifier = Modifier.wrapContentSize().constrainAs(brand) {
                    top.linkTo(logo.bottom, 2.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                },
                asset = vectorResource(id = R.drawable.ic_lux),
                tint = Color.White
            )
        }
    }
}

[Cash Hsiao]

Thanks. I realize that the problem comes from the render order. ConstraintLayout now doesn't confirm the render order by code order, so sometimes the Image background who fillMaxSize() didn't render first.