androidkotlinandroid-studioandroid-jetpack-composeandroid-constraintlayout

Why Android Studio is complaining about this


I was following this document to find out how can use the decoupling api ConstraintLayout in Compose but unfortunately failed to build and run Here's the error I got

Build Output

I can't figure out why it's complaining. I tried cursor to help me find a solution, but the document isn't doing it this way and said I have to define the actual string constants that will be used as references in the constraint set like so:

// Add these constants at the top of the file, outside any function
private const val imgProfile = "imgProfile"
private const val txtName = "txtName"
private const val txtCountry = "txtCountry"
private const val rowStats = "rowStats"
private const val btnFollow = "btnFollow"
private const val btnDM = "btnDM"

My code:


@Composable
fun ProfilePage(modifier: Modifier){
    Card(elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
        modifier = Modifier.fillMaxSize().padding(top = 220.dp, bottom = 220.dp, start = 16.dp, end = 16.dp)
    ) {
        BoxWithConstraints() {
            val constraints = if (minWidth < 600.dp) {
                verticalConstraints(margin = 16.dp)
            } else {
                verticalConstraints(margin = 16.dp)
            }

            ConstraintLayout(constraints) {
                Image(
                    painter = painterResource(id = R.drawable._84b21894c2453a6b598d23e62ff551c),
                    contentDescription = "Shizba",
                    modifier = Modifier
                        .size(100.dp)
                        .clip(CircleShape)
                        .border(width = 2.dp, shape = CircleShape, color = Color.Red)
                        .layoutId("imgProfile"),
                    contentScale = ContentScale.Crop
                )

                Text(
                    text = "Shiba Inu",
                    modifier = Modifier.layoutId("txtName")
                )
                Text(
                    "Japan",
                    modifier = Modifier.layoutId("txtCountry")
                )
                Row(
                    horizontalArrangement = Arrangement.SpaceEvenly,
                    modifier = Modifier
                        .fillMaxWidth() // it should take the entire width, so no need to link it to left or the right
                        .padding(16.dp)
                        .layoutId("rowStats")
                ) {
                    ProfileStats("350", "Followers")
                    ProfileStats("200", "Following")
                    ProfileStats("50", "Posts")
                }
                Button(
                    onClick = {},
                    modifier = Modifier.layoutId("btnFollow")
                ) {
                    Text(text = "Follow User")
                }
                Button(
                    onClick = {},
                    modifier = Modifier.layoutId("btnDM")
                ) {
                    Text(text = "Send Message")
                }
            }
        }
    }
}

@Composable
fun ProfileStats(count: String, title: String){
    Column(horizontalAlignment = Alignment.CenterHorizontally)
    {
        Text(text = count, fontWeight = FontWeight.Bold)
        Text(text = title)
    }
}


private fun verticalConstraints(margin:Dp): ConstraintSet{
    return ConstraintSet{
        val guideline = createGuidelineFromTop(0.1f)
        val imgProfile = createRefFor(imgProfile)
        val txtName = createRefFor(txtName)
        val txtCountry = createRefFor(txtCountry)
        val rowStats = createRefFor(rowStats)
        val btnFollow = createRefFor(btnFollow)
        val btnDM = createRefFor(btnDM)

        constrain(imgProfile){
            top.linkTo(parent.top)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
        constrain(txtName){
            top.linkTo(imgProfile.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
        constrain(txtCountry){
            top.linkTo(txtName.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
        constrain(rowStats){
            top.linkTo(txtCountry.bottom)
        }
        constrain(btnFollow){
            top.linkTo(rowStats.bottom, margin = margin)
            start.linkTo(parent.start)
            end.linkTo(btnDM.start)
            width = Dimension.wrapContent
        }
        constrain(btnDM){
            top.linkTo(rowStats.bottom, margin = margin)
            start.linkTo(btnFollow.end)
            end.linkTo(parent.end)
            width = Dimension.wrapContent
        }
    }

}

Solution

  • You should create references for strings. In the verticalConstraints function replace

    val imgProfile = createRefFor(imgProfile)
    

    with

    val imgProfile = createRefFor("imgProfile")
    

    Repeat for the rest of the references.