Jetpack Compose - Cant wrap content textField

Question

I am doing some things with Compose and i encountered this problem

I cant understand WHY my textfield width is to the end of the parent. I want to wrap the content dependening on the input lenght. I painted the background red on purpouse.

I cant hardcode a padding because if the lenght of the field is too much the text starts to go out sight

What i am doing wrong?

Row(Modifier.wrapContentSize()) {

    ConstraintLayout(
        Modifier
            .wrapContentSize()
    ) {

        val (text1, text2) = createRefs()

        Text(
            modifier = modifier
                .wrapContentWidth()
                .constrainAs(text1) {
                    end.linkTo(text2.start)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                },
            text = "$",
            color = Color.White,
            fontSize = sp_50,
            fontFamily = FontFamily(
                Font(R.font.mulish_bold)
            ),
            textAlign = TextAlign.Center
        )

        TextField(
            modifier = modifier
                .wrapContentWidth()
                .constrainAs(text2) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(text1.end)

                }.background(Color.Red),
            visualTransformation = {
                show = it.isNotEmpty()
                val value =
                    if (it.isEmpty())
                        NUM_0
                    else it.text

                val amountFormat: String = notFormatAmount(value).toStringThousandAmount()
                TransformedText(
                    AnnotatedString(amountFormat.take(amountFormat.length)),
                    OffsetMapping.Identity
                )
            },
            value = text,
            onValueChange = {
                text = it
                if (onTextChange != null) {
                    onTextChange(
                        it.ifEmpty { NUM_0 }
                    )
                }
            },
            colors = TextFieldDefaults.textFieldColors(
                textColor = Color.White,
                disabledTextColor = Color.Transparent,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent,
                cursorColor = Color.Transparent
            ),
            textStyle = TextStyle(
                color = Color.White,
                fontFamily = FontFamily(
                    Font(R.font.mulish_bold)
                ),
                textAlign = TextAlign.Justify,
                fontSize = sp_50
            ),
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword)
        )
    }
}

score 0 · Answer 1 · answered Feb 06 '23 at 02:52

Modified code:

Row(Modifier.wrapContentSize()) {

    ConstraintLayout(
        Modifier
            .wrapContentSize()
    ) {

        val (text1, text2) = createRefs()

        Text(
            modifier = modifier
                .wrapContentWidth()
                .constrainAs(text1) {
                    end.linkTo(text2.start)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                },
            text = "$",
            color = Color.White,
            fontSize = sp_50,
            fontFamily = FontFamily(
                Font(R.font.mulish_bold)
            ),
            textAlign = TextAlign.Center
        )

        TextField(
            modifier = modifier
                .wrapContentWidth()
                .constrainAs(text2) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(text1.end)
                    width = Dimension.fillToConstraints
                }.background(Color.Red),
            visualTransformation = {
                show = it.isNotEmpty()
                val value =
                    if (it.isEmpty())
                        NUM_0
                    else it.text

                val amountFormat: String = notFormatAmount(value).toStringThousandAmount()
                TransformedText(
                    AnnotatedString(amountFormat.take(amountFormat.length)),
                    OffsetMapping.Identity
                )
            },
            value = text,
            onValueChange = {
                text = it
                if (onTextChange != null) {
                    onTextChange(
                        it.ifEmpty { NUM_0 }
                    )
                }
            },
            colors = TextFieldDefaults.textFieldColors(
                textColor = Color.White,
                disabledTextColor = Color.Transparent,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent,
                cursorColor = Color.Transparent
            ),
            textStyle = TextStyle(
                color = Color.White,
                fontFamily = FontFamily(
                    Font(R.font.mulish_bold)
                ),
                textAlign = TextAlign.Justify,
                fontSize = sp_50
            ),
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword)
        )
    }
}

Jetpack Compose - Cant wrap content textField

1 Answers1