Hi, I am trying to use `ConstraintLayout` but i am not able to get the constraints to work properly...

# compose

[Apoorv Patel]

Hi, I am trying to use ConstraintLayout  but i am not able to get the constraints to work properly.

ConstraintLayout(modifier = Modifier.padding(top = 16.dp, bottom = 16.dp)) {
        val (profileImage, progressText1) = createRefs()

        Image(
                modifier = Modifier
                        .constrainAs(profileImage){
                            start.linkTo(parent.start, 16.dp)
                        }.preferredWidth(72.dp)
                        .preferredHeight(72.dp)
                        .background(Color.Green),
                asset = imageResource(R.drawable.unknown_profile_empty)
        )

        val half = createGuidelineFromTop(0.5f)

        Text(text = "Sample text", modifier = Modifier.background(Color.Red).constrainAs(progressText1) {
            bottom.linkTo(half, 0.dp)
            start.linkTo(profileImage.end, 0.dp)
            end.linkTo(parent.end, 16.dp)
        })
    }

I am expecting that the text will align itself to the image end but it is not aligned to that

[Hitanshu Dhawan]

Try removing the end constraint

end.linkTo(parent.end, 16.dp)

Here, it is having start and end constraints, so it is centred from image end and parent end.

[apoorv9990]

oh I was assuming it would stretch itself to fill the whole space. What do I need to do to have the behavior?

[apoorv9990]

If I remove the end constraint it will behave like wrap_content

[Hitanshu Dhawan]

Try this

Text(text = "Sample text", modifier = Modifier.background(Color.Red).constrainAs(progressText1) {
            bottom.linkTo(half, 0.dp)
            start.linkTo(profileImage.end, 0.dp)
            end.linkTo(parent.end, 16.dp)
            width = Dimension.fillToConstraints
        })

[Hitanshu Dhawan]

width = Dimension.fillToConstraints

[Apoorv Patel]

Thanks! I didn't know about the width