Bugdr0id
Bugdr0id

Reputation: 3063

Android ConstraintLayout - adjust width of Childs

I need to have a composition which dynamically adjusts child view width depending on available space.

Rules:

These are the different behaviour variants I need from the composition. example

I have the following code, but dividers do not have the same size when text overflows its space:

@Preview
@Composable
fun MyComponent() {
    val minLineWidth = 3.dp
    val maxLineWidth = 16.dp

    val idLeft = "line_left"
    val idRight = "line_right"
    val idText = "text"

    val constraint = ConstraintSet {
        val startLineRef = createRefFor(idLeft)
        val endLineRef = createRefFor(idRight)
        val textRef = createRefFor(idText)

        constrain(startLineRef) {
            start.linkTo(parent.start)
            end.linkTo(textRef.start)
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            width = Dimension.preferredWrapContent.atLeast(minLineWidth).atMost(maxLineWidth)
        }

        constrain(endLineRef) {
            end.linkTo(parent.end)
            start.linkTo(textRef.end)
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            width = Dimension.preferredWrapContent.atLeast(minLineWidth).atMost(maxLineWidth)
        }

        constrain(textRef) {
            start.linkTo(startLineRef.end)
            end.linkTo(endLineRef.start)
            width = Dimension.preferredWrapContent.atMostWrapContent
        }

    }
    ConstraintLayout(
        modifier = Modifier.requiredWidth(80.dp),
        constraintSet = constraint,
    ) {
        Divider(
            modifier = Modifier
                .layoutId(idLeft),
            color = Color.Red
        )

        Divider(
            modifier = Modifier
                .layoutId(idRight),
            color = Color.Blue
        )

        Text(
            modifier = Modifier
                .layoutId(idText),
            text = "ABCDEFG",
            textAlign = TextAlign.Center,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
}

Result: enter image description here

Suggestions to have divider to always have the same size when shrinking due to text size?

Upvotes: 1

Views: 30

Answers (0)

Related Questions