https://kotlinlang.org logo
#compose
Title
# compose
c

Cash Hsiao

10/28/2020, 3:57 AM
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.
Copy code
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.
c

Chethan

10/28/2020, 6:08 AM
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.
Copy code
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
            )
        }
    }
}
🙏 1
c

Cash Hsiao

10/28/2020, 6:58 AM
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.