Android Compose contraintLayout has a text inside, which if it's long -> it will go out of it's parent

Question

This is my code:

@Preview
@Composable
private fun composable(){
    ConstraintLayout(
        modifier = Modifier
            .padding(all = 8.dp)
    ) {
        val (title, type) = createRefs()

        Image(
            painter = painterResource(R.drawable.ic_chat_grey),
            contentDescription = "Badge",
            colorFilter = ColorFilter.tint(
                colorResource(
                    id =  R.color.white
                )
            ),
            modifier = Modifier
                .size(28.dp)
                .constrainAs(type) {
                    top.linkTo(parent.top)
                    end.linkTo(parent.end)
                },
        )
        Text(
            text = "123456789009876554431213TEST12312312312TEST12312312334234TEST 123456789009876554431213TEST12312312312TEST12312312334234TEST 123456789009876554431213TEST12312312312TEST12312312334234TEST",
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top)
                end.linkTo(type.start)
            },
            fontSize = 16.sp,
            style = TextStyle(
                fontFamily = FontFamily.SansSerif,
                fontWeight = FontWeight.Light,
                color = colorResource(
                    id = R.color.white
                )
            ),
            textAlign = TextAlign.Start
        )
    }
}

And as you can see, the start of me text is not all present:

I tried setting text to be also start linked to parent -> but then it's always 0.dp, even if text is not bigger than screen. (with Dimension.fillToConstraint)

What am I doing wrong?

Answer 1

The issue was in your constraints. Also, you need to specify the width of your parent constraint layout, it will consider it as wrapContent. Here is the updated code.

@Preview
@Composable
private fun composable(){
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(all = 8.dp)
    ) {
        val (title, type) = createRefs()

        Image(
            painter = painterResource(R.drawable.ic_photo),
            contentDescription = "Badge",
            colorFilter = ColorFilter.tint(
                colorResource(
                    id =  R.color.white
                )
            ),
            modifier = Modifier
                .size(28.dp)
                .constrainAs(type) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    width = Dimension.wrapContent
                    height = Dimension.wrapContent
                },
        )
        Text(
            text = "123456789009876554431213TEST12312312312TEST12312312334234TEST 123456789009876554431213TEST12312312312TEST12312312334234TEST 123456789009876554431213TEST12312312312TEST12312312334234TEST",
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top)
                start.linkTo(type.end, 16.dp)
                end.linkTo(parent.end)
                width = Dimension.fillToConstraints
            },
            fontSize = 16.sp,
            style = TextStyle(
                fontFamily = FontFamily.SansSerif,
                fontWeight = FontWeight.Light,
                color = colorResource(
                    id = R.color.white
                )
            ),
            textAlign = TextAlign.Start
        )
    }
}

Answer 2

New constraints for the image:

.constrainAs(type) {
    top.linkTo(parent.top)
    start.linkTo(parent.start)
    end.linkTo(title.start)
}

For the text:

.constrainAs(title) {
    top.linkTo(parent.top)
    end.linkTo(parent.end)
    start.linkTo(type.end)
}

Result:

Reasoning:

With constraint layouts it is important to be constrained on 3 or 4 sides. So they are both constrained to the same top but now the image starts at the start of the parent, the text ends at the end of the parent, and they meet in the middle without overlapping.

*note I increased the ConstraintLayout padding a bit too.