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,
    )
}

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)
    )
}