Jetpack Compose: Constraint Layout Vertical Chain Constraints Issue

Question

I'm trying to build something similar to the following using Jetpack Compose ConstraintLayout.

I want to understand how can I create a vertical chain with respect to the Image. When I try to use the createVerticalChain() function, that overrides my given constraints and chains it w.r.t the parent instead.

Here's my current code if that's any helpful

@Composable
fun GreetingWithConstraintLayout(name: String) {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val(ivIcon, tvHello, tvBye) = createRefs()
        createVerticalChain(tvBye, tvHello, chainStyle = ChainStyle.Packed)
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = null,
            modifier = Modifier
                .size(80.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colors.primary, CircleShape)
                .constrainAs(ivIcon) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                }
        )
        Text(
            text = "Hello $name!",
            modifier = Modifier.constrainAs(tvHello) {
                start.linkTo(ivIcon.end, 8.dp)
                top.linkTo(ivIcon.top)
                bottom.linkTo(tvBye.top)
            }
        )
        Text(
            text = "Bye $name!",
            modifier = Modifier.constrainAs(tvBye) {
                start.linkTo(tvHello.start)
                top.linkTo(tvHello.bottom)
                bottom.linkTo(ivIcon.bottom)
            }
        )
    }
}

I can't find any example similar to this use case online. I'm not even sure if this can be done? Thank you!

This exact layout was answered [here](https://stackoverflow.com/a/76297870/6411857) — DroidClicketyClacker, May 21 '23 at 12:49

score 2 · Answer 1 · answered Feb 22 '23 at 00:14

2

Try constraining the chain

  val chain = createVerticalChain(tvBye, tvHello, chainStyle = ChainStyle.Packed)
  constrain(chain) {
     top.linkTo(ivIcon.top)
     bottom.linkTo(ivIcon.bottom)
  }

answered Feb 22 '23 at 00:14

hoford

4,918
2
19
19

it removes all margins – user924 Apr 11 '23 at 20:20

score 0 · Answer 2 · answered Jul 22 '22 at 10:58

The Only Problem I see is your Image is not constraint properly Also your ConstraintLayout is using fillMaxSize() which i think you can change to fillMaxWidth() if that Okay its fine both ways depending on need . Try the below composable i made few changes i think it works fine .

@Composable
fun GreetingWithConstraintLayout(name: String) {
ConstraintLayout(modifier = Modifier.fillMaxSize()) {
    val (ivIcon, tvHello, tvBye) = createRefs()
    Image(
        painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = null,
        modifier = Modifier
            .size(120.dp)
            .clip(CircleShape)
            .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
            .constrainAs(ivIcon) {
                start.linkTo(parent.start)
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
            }
    )
    Text(
        text = "Hello $name!",
        modifier = Modifier.constrainAs(tvHello) {
            start.linkTo(ivIcon.end, 8.dp)
            top.linkTo(ivIcon.top)
            bottom.linkTo(tvBye.top)
            end.linkTo(parent.end)
            width = Dimension.fillToConstraints
        }
    )
    Text(
        text = "Bye $name!",
        modifier = Modifier.constrainAs(tvBye) {
            start.linkTo(tvHello.start)
            top.linkTo(tvHello.bottom)
            bottom.linkTo(ivIcon.bottom)
            end.linkTo(parent.end)
            width = Dimension.fillToConstraints
        }
    )
    createVerticalChain(tvBye, tvHello, chainStyle = ChainStyle.Packed)
}
}

Thanks @ADM This does not work unfortunately. It just centers the image too since we added the constraint for it to the bottom of parent which gives an illusion that the chain is working, but the chain is still relative to the parent and not the Image. If I add any sort of bias on the image, the texts still stay aligned to the parent. — che10, Jul 22 '22 at 11:15

score 0 · Answer 3 · answered Feb 21 '23 at 15:02

What you need in order to make it works is: Modifier.wrapContentHeight(align = Alignment.Top).

This is how it looks like in emulator:

And the code (I removed some not needed constraints and use Material3 color scheme)

@Composable
fun GreetingWithConstraintLayout(name: String) {
    ConstraintLayout(modifier = Modifier.wrapContentHeight(align = Alignment.Top).fillMaxWidth()) {
        val (ivIcon, tvHello, tvBye) = createRefs()
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = null,
            modifier = Modifier
                .size(80.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
                .constrainAs(ivIcon) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                }
        )
        Text(
            text = "Hello $name!",
            modifier = Modifier.padding(start = 16.dp).constrainAs(tvHello) {
                start.linkTo(ivIcon.end)
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
            }
        )
        Text(
            text = "Bye $name!",
            modifier = Modifier.padding(start = 16.dp).constrainAs(tvBye) {
                start.linkTo(ivIcon.end)
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
            }
        )
        createVerticalChain(tvBye, tvHello, chainStyle = ChainStyle.Packed)
    }
}

Jetpack Compose: Constraint Layout Vertical Chain Constraints Issue

3 Answers3