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