Do not add margins with ChainStyle Packed in Compose

[iesedobleac]

I'm using version 2 of the Constraint Layout beta for Compose and when I created a vertical packed style chain, it doesn't add the margins and everything looks stuck together. This is my code example:

@Composable
fun CreateStructure() {
    var num by rememberSaveable { mutableStateOf(0) }
    val constraint = ConstraintSet {
        val valueLabel = createRefFor("valueLabel")
        val addButton = createRefFor("addButton")
        val subtractButton = createRefFor("subtractButton")
        val resetButton = createRefFor("resetButton")

        constrain(valueLabel) {
            top.linkTo(parent.top)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            bottom.linkTo(addButton.top)
        }
        constrain(addButton) {
            top.linkTo(valueLabel.bottom, 30.dp)
            start.linkTo(valueLabel.start)
            end.linkTo(valueLabel.end)
            bottom.linkTo(subtractButton.top)
            width = Dimension.value(200.dp)
        }
        constrain(subtractButton) {
            top.linkTo(addButton.bottom, 10.dp)
            start.linkTo(addButton.start)
            end.linkTo(addButton.end)
            bottom.linkTo(resetButton.top)
            width = Dimension.fillToConstraints
        }
        constrain(resetButton) {
            top.linkTo(subtractButton.bottom, 10.dp)
            start.linkTo(subtractButton.start)
            end.linkTo(subtractButton.end)
            bottom.linkTo(parent.bottom)
            width = Dimension.fillToConstraints
        }
        createVerticalChain(valueLabel, addButton, subtractButton, resetButton, chainStyle = ChainStyle.Packed)
    }

    ConstraintLayout(constraintSet = constraint, Modifier.fillMaxSize()) {
        Text(text = "Conteo: $num", Modifier.layoutId("valueLabel"))
        Counter(layoutId = "addButton", titleButton = "Sumar número") {
            num++
        }
        Counter(layoutId = "subtractButton", titleButton = "Restar número") {
            num--
        }
        Counter(layoutId = "resetButton", titleButton = "Resetear valor") {
            num = 0
        }
    }
}

And this is the result:

I don't know if it's a mistake or if I'm not doing it the right way.

Best regards.

[af-dre]

I can confirm this, meanwhile solved it with Spacer function

Possible related bug: if I use a nondefault bias for vertical chain with ChainStyle.Packed, e.g. Packed(0.55f), I get endless recompositions of the parent ConstraintLayout.

[oscar-ad]

I can confirm this, meanwhile solved it with Spacer function

Possible related bug: if I use a nondefault bias for vertical chain with ChainStyle.Packed, e.g. Packed(0.55f), I get endless recompositions of the parent ConstraintLayout.

Have you observed this issue recently? If possible please file another issue with repro steps.

[oscar-ad]

For the issue mentioned here, use 1.1.0-alpha03 in the meantime.

[HumairaPasha]

I have recently encountered the same issue on 1.0.1

[jafu888]

The createVerticalChain will remove the margins created above it. Try moving createVerticalChain above the margin creation.

[HumairaPasha]

The margins are after createVerticalChain.

ConstraintLayout(modifier = rowModifier) {

val (circle, startCircle, endCircle, label, subLabelPrimary, subLabelSecondary, subLabelTertiary, topLine, midLine, bottomLine, trailingContent, divider) = createRefs()
val chainRef = createVerticalChain(
  label,
  subLabelPrimary,
  subLabelSecondary,
  subLabelTertiary,
  chainStyle = ChainStyle.Packed
)
constrain(chainRef) {
  top.linkTo(parent.top, margin = 16.dp)
  bottom.linkTo(parent.bottom, margin = 16.dp)
}

titleLabel?.let {
  Title(text = it, titleColor = titleColor, modifier = Modifier.constrainAs(label) {
    linkTo(
      start = if (travelDestination) circle.end else startCircle.end,
      end = trailingContent.start,
      startMargin = 16.dp,
      endMargin = 16.dp
    )
    width = Dimension.fillToConstraints
  })
}

startLabel?.let {
  SubLabel(text = it, modifier = Modifier.constrainAs(subLabelPrimary) {
    linkTo(start = subLabelStart, end = trailingContent.start, startMargin = 16.dp, endMargin = 16.dp)
    linkTo(top = label.bottom, bottom = subLabelSecondary.top, topMargin = 4.dp)
    width = Dimension.fillToConstraints
  })
}
endLabel?.let {
  SubLabel(text = it, modifier = Modifier.constrainAs(subLabelSecondary) {
    linkTo(start = subLabelStart, end = trailingContent.start, startMargin = 16.dp, endMargin = 16.dp)
    linkTo(top = subLabelPrimary.bottom, bottom = subLabelTertiary.top, topMargin = 4.dp)
    width = Dimension.fillToConstraints
  })
}
bonusLabel?.let {
  BonusLabel(text = it.text, icon = it.icon, tint = it.tint).Content(
    modifier = Modifier.constrainAs(
      subLabelTertiary
    ) {
      linkTo(start = subLabelStart, end = trailingContent.start, startMargin = 16.dp, endMargin = 16.dp)
      linkTo(top = subLabelSecondary.bottom, bottom = parent.bottom, topMargin = 4.dp)
      width = Dimension.fillToConstraints
    })
    

I have supplied top margins for subLabelPrimary, subLabelSecondary & subLabelTertiary but they are not added. Please let me know if I'm missing something.

[usmanrana07]

facing same issue

[jafu888]

This should work:

val chainRef = createVerticalChain(
  label,
  subLabelPrimary,
  subLabelSecondary.withChainParams(topMargin = 43.dp),
  subLabelTertiary,
  chainStyle = ChainStyle.Packed
)

[enofeb]

same issue

[jafu888]

You tried adding margins like this

val chainRef = createVerticalChain(
  ref1,
  ref1,
  ref2.withChainParams(topMargin = 43.dp),
  ref3,
  chainStyle = ChainStyle.Packed
)

and it did not work ?

[eldartsa]

You tried adding margins like this

val chainRef = createVerticalChain(
  ref1,
  ref1,
  ref2.withChainParams(topMargin = 43.dp),
  ref3,
  chainStyle = ChainStyle.Packed
)

and it did not work ?

No such function "withChainParams".

[oscar-ad]

Please upgrade to at least 1.1.0-alpha08

withChainParams() should be there. You should also get a Lint warning with a quick fix to move your current chain margins to withChainParams().