Hello everyone, Hopefully someone worked on simila...

# compose

[Daniel Candeias]

Hello everyone,
Hopefully someone worked on similar composition, or might have some hints on how to set this composition.
Rules:
• Right and Left dividers always visible
• Dividers size: min 6dp, max 16dp
• Dividers can adjust its size due to text size.
• Text is single line and might ellipse if does not fix between the dividers.
(code inside the thread)

Can someone help identify the issue or propose different approach?

[Zach Klippenstein (he/him) [MOD]]

Please keep long code snippets to the thread to keep the main channel more readable, thank you

[Daniel Candeias]

@Preview
@Composable
fun MyComponent() {
    val minLineWidth = 6.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(<http://parent.top|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(<http://parent.top|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.fillToConstraints.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 = "ABCDEFGHIJKL",
            textAlign = TextAlign.Center,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
}

[Colton Idle]

Seems like weights would work well enough for this

[Daniel Candeias]

@Colton Idle how so? Wights is not giving me the dynamic width for side lines.

[Zach Klippenstein (he/him) [MOD]]

I tried using weights for this (weight(1) on each line), but couldn’t get them to respect min size because the unweighted text gets measured first and pushes them out. You could add a custom layout modifier to the text that takes the min line width off the constraints and that should work. But I would probably just write the whole row as a custom layout.

[gildor]

Same as Zach, I tried to use weight for exactly this case, but there is no way to set min width for lines