Compose - Two Composables overlaped and constraint with them

Question

SCENARIO

The min width of the green box is the same width of the black box, so the black box it's somehow WRAP_CONTENT.

If the green box needs more space (because the text is longer than its width what is going to do is, make the green box bigger together with the black one.

What I did is, put the black box width = Dimensions.fillToConstraints and what happens is that the green box can make it smaller breaking the black box and this is not expected.

Only is missing this case, that don't let the green box alter the width of the black box (it only can happen to make it bigger like second image but never should happen the oposite, make it smaller, let's say the smallest width is always the WRAP_CONTENT of black box)

What I have is :

ConstraintLayout {
        val (label, fixed) = createRefs()

        
            Box(
                modifier = Modifier
                    .height(24.dp)
                    .padding(start = 4.dp)
                    .background(color = Colors.Green)
                    .constrainAs(label) {
                        top.linkTo(parent.top)
                        start.linkTo(parent.start)
                        end.linkTo(fixed.end)

                    },
            ) {
                Label(
                    modifier = Modifier
                        .align(Alignment.TopCenter)
                        .padding(horizontal = 4.dp),
                    labelText = "whatever",
                    textStyle = myStyle,
                    colors,
                )
            }
       

        Text(
            modifier = Modifier
                .constrainAs(fixed) {
                    top.linkTo(label.top, margin = 15.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    bottom.linkTo(parent.bottom)
                    width = Dimension.fillToConstraints
                },
            text = "fixed",
        )

And Label is :

@Composable
fun Label(
    modifier: Modifier = Modifier,
    labelText: String,
) {
    Text(
        maxLines = 1,
        modifier = modifier,
        text = labelText,
    )
}

Explosion

I didn't get it, what's wrong with your "this is wrong." picture? What should be instead? – Violet

The text is always "fixed" and if I make the text of the greenbox smaller it cuts the text of the black one and it shouldn't be possible, so the problem is that the green even if the text is small it should be at least the same width as the black box – Faroff

@PhilipDukhov The concept would be, make the black box min width what it needs (with the full text) and then max width is depending of the green box (if it's bigger then it will increase) – Faroff

I don't know if the problem is the fillToConstraint from the second text it helps me to make it bigger but then the problem is that if I do the green stuff smaller then it makes the other box smaller... – Faroff

@PhilipDukhov Planning to open a bounty in 5h in case you get more interested on it. – Faroff

Answer 1

When you need all your child elements to be the same size depending on the content, you can use intrinsic measurements:

Box(Modifier.width(IntrinsicSize.Max)) {
    Box(
        modifier = Modifier
            .height(24.dp)
            .padding(start = 4.dp)
            .background(color = Color.Green)
            .fillMaxWidth()
    ) {
        Label(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .padding(horizontal = 4.dp),
            labelText = "whatever",
        )
    }

    Text(
        text = "fixed",
        color = Color.White,
        textAlign = TextAlign.Center,
        modifier = Modifier
            .padding(top = 15.dp)
            .padding(end = 4.dp)
            .fillMaxWidth()
            .background(Color.Black)
    )
}

Violet

Yup! Looks like I was missing this concept about InstrinsicSize, because I've tried the fillMaxWidth but it was all the width of the phone... Thank you Philip ;) – Faroff