Revision history [back]

To arrange two pieces of text side by side using constraints in Jetpack Compose, you can follow these steps:

1. Define two text elements that you want to place side by side. For example:

Text("Left side text")
Text("Right side text")

1. Wrap each text element inside a ConstraintLayout.

ConstraintLayout {
    Text("Left side text")
}

ConstraintLayout {
    Text("Right side text")
}

1. Add constraints to each element to position them side by side. Use the ConstraintSet API to define constraints.

ConstraintLayout {
    val (leftText, rightText) = createRefs()

    Text("Left side text", Modifier.constrainAs(leftText) {
        start.linkTo(parent.start)
        top.linkTo(parent.top)
        bottom.linkTo(parent.bottom)
    })

    Text("Right side text", Modifier.constrainAs(rightText) {
        start.linkTo(leftText.end)
        top.linkTo(parent.top)
        bottom.linkTo(parent.bottom)
    })
}

In this example, we create two constraints:

• start.linkTo(parent.start): This constraint places the left text element at the start (left) edge of the parent container.
• start.linkTo(leftText.end): This constraint places the right text element immediately to the right of the left text element.

These constraints place the two text elements side by side in the container.

1. Adjust the constraints and modifiers as needed to achieve the desired layout. For example, you can center the text elements vertically by adding a verticalBias property to the constraints.