Skip to content
This repository was archived by the owner on Dec 27, 2024. It is now read-only.
This repository was archived by the owner on Dec 27, 2024. It is now read-only.

Horizontal chain in Compose does not support RTL layout #857

@ericksli

Description

@ericksli

Using constraint layout compose version 1.1.0-alpha13 with compose BOM version 2024.06.00, after setting up horizontal chain then the elements in the chain sequence does not flip in RTL layout.

Here is a demo:

@Composable
fun ChainDemo(modifier: Modifier = Modifier) {
    ConstraintLayout(modifier = modifier) {
        val (text1, text2) = createRefs()
        createHorizontalChain(text1, text2, chainStyle = ChainStyle.SpreadInside)
        Text(
            text = "1",
            modifier = Modifier.constrainAs(text1) {
                start.linkTo(parent.start)
                end.linkTo(text2.start)
            },
        )
        Text(
            text = "2",
            modifier = Modifier.constrainAs(text2) {
                start.linkTo(text1.end)
                end.linkTo(parent.end)
            },
        )
    }
}

@Preview(name = "LTR", showBackground = true, locale = "en")
@Preview(name = "RTL", showBackground = true, locale = "ar")
@Composable
private fun ChainDemoPreview() {
    ChainDemo(modifier = Modifier.fillMaxWidth())
}

Preview of the code above:

image

If we comment out the createHorizontalChain statement, then the element ordering is flipped propely in RTL layout:

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions