Hey! :wave: Anyone tried to use ConstraintLayout +...

# compose

[Nacho Ruiz Martin]

Hey! 👋
Anyone tried to use ConstraintLayout + Chains + margins?
I don’t get why this isn’t working as expected (group is vertically centred but there are margins between fields and button).

[TheDukerChip]

When using vertical chains, the constraints top.* and bottom.* will be ignored, likewise start.* and end.* will be ignored for horizontal constraints

What we can do is add Spacer elements in between these composable and add it to the vertical chain

Here is the snippet

ConstraintLayout(modifier = Modifier.fillMaxSize()) {
    val startGuideLine = createGuidelineFromStart(14.dp)
    val endGuideLine = createGuidelineFromEnd(14.dp)
    val (emailRef, passwordRef, buttonRef, usernmeSpacerRef, passwordSpacerRef) = createRefs()
    createVerticalChain(
        emailRef,
        usernmeSpacerRef,
        passwordRef,
        passwordSpacerRef,
        buttonRef,
        chainStyle = ChainStyle.Packed,
    )

    TextField(
        value = username,
        onValueChange = userNameChange,
        modifier = Modifier.constrainAs(emailRef) {
            start.linkTo(startGuideLine)
            end.linkTo(endGuideLine)
        }
    )

    Spacer(modifier = Modifier.size(14.dp).constrainAs(usernmeSpacerRef){})

    TextField(
        value = password,
        onValueChange = passwordChange,
        modifier = Modifier.constrainAs(passwordRef) {
            start.linkTo(startGuideLine)
            end.linkTo(endGuideLine)
        }
    )

    Spacer(modifier = Modifier.size(14.dp).constrainAs(passwordSpacerRef){})

    Button(
        onClick = submitClicked,
        modifier = Modifier.constrainAs(buttonRef) {
            start.linkTo(startGuideLine)
            end.linkTo(endGuideLine)
        }
    ) {
        Text(text = "Login")
    }
}

[Nacho Ruiz Martin]

Great idea, thanks!! 🙇 I've been using padding, but Spacer looks cleaner.