Hi, I want to apply a visual transformation to a B...

# compose-android

[KotlinLeaner]

Hi, I want to apply a visual transformation to a BasicTextField in Jetpack Compose. I've tried some code, but I'm facing several issues. For example, the cursor doesn't stay in the correct position, and when pressing backspace, the cursor moves to the wrong place.

[KotlinLeaner]

I need the BasicTextField to always display a specific string (e.g., "ABC-") that cannot be removed, even with backspace or clear actions. Additionally, I want to limit the input and apply masking to format the text like this: "ABC-1234-2345-6366".

Could someone help me implement this correctly?

[KotlinLeaner]

@Preview(showBackground = true)
 @Composable
 private fun SampleTextFieldView() {
     var textFieldValue by remember { mutableStateOf(TextFieldValue("ABC-")) }
     BasicFieldView(
         textFieldValue,
         onValueChange = { onValueChange ->
             val digitOnly = onValueChange.text.filter { it.isDigit() }
             val formattedString = buildString {
                 append("Abc-")
                 digitOnly.forEachIndexed { index, digit ->
                     if (index % 4 == 0 && index !=0 ){
                         append("-")
                     }
                     append(digit)
                 }
             }
             textFieldValue = onValueChange.copy(formattedString)
         }
     )
 }
 
 @Composable
 fun BasicFieldView(
     textFieldValue: TextFieldValue,
     onValueChange: (TextFieldValue) -> Unit,
 ) {
     Column(
         modifier = Modifier.fillMaxSize()
     ) {
         BasicTextField(
             modifier = Modifier.fillMaxWidth(),
             value = textFieldValue,
             onValueChange = {
                 onValueChange(it)
             },
         )
     }
 }

[Chrimaeon]

checkout the examples in https://developer.android.com/reference/kotlin/androidx/compose/ui/text/input/VisualTransformation

[KotlinLeaner]

Thank you, I'll take a look now.

[Zach Klippenstein (he/him) [MOD]]

Better yet, use the new BasicTextField and avoid dealing with VT altogether

[KotlinLeaner]

I'm using a new BasicTextField. Sorry what do you mean by VT ?

[Zach Klippenstein (he/him) [MOD]]

VisualTransformation. The new text field doesn't use it at all.

[KotlinLeaner]

Could you please share any examples of how to use it without VisualTranformation.

[Zach Klippenstein (he/him) [MOD]]

this is the new field, and the docs on OutputTransformation include a sample

[KotlinLeaner]

Thank you so much I'll take a look

[KotlinLeaner]

Hi zach, I tried below code and it's wokring fine.

@Preview(showBackground = true)
@Composable
fun OutputDataPreview() {
    val state = rememberTextFieldState()
    Column(
        modifier = Modifier.fillMaxSize(),
    ) {
        BasicTextField(
            state = state,
            modifier = Modifier.fillMaxWidth(),
            inputTransformation = InputTransformation.maxLength(16)
                .then(DigitsOnlyTransformation),
            outputTransformation = GroupingOutputTransformation(4, "-"),
            decorator = { innerTextField ->
                Row {
                    Text(text = "ABC-")
                    innerTextField()
                }
            },
        )
    }
}

@Stable
data class GroupingOutputTransformation(
    private val groupSize: Int,
    private val groupDelimiter: String,
) : OutputTransformation {
    override fun TextFieldBuffer.transformOutput() {
        repeat((length - 1) / groupSize) {
            insert(it + (it + 1) * groupSize, groupDelimiter)
        }
    }
}

object DigitsOnlyTransformation : InputTransformation {
    override val keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)

    override fun TextFieldBuffer.transformInput() {
        if (!asCharSequence().isDigitsOnly()) {
            revertAllChanges()
        }
    }
}

[KotlinLeaner]

I'm trying to reuse the same BasicTextField component in multiple places. I'm exploring how to use the label and placeholder properties, but I came across TextFieldDefaults.DecorationBox, which requires a visualTransformation. I want to apply a label animation decoration as well, but I'm not sure how to achieve this with the current setup.
Could you help with this?

[Zach Klippenstein (he/him) [MOD]]

Ah yea material doesn’t support the new text field yet I guess

[KotlinLeaner]

Are they planning to support?

[Zach Klippenstein (he/him) [MOD]]

Yes, I’d be surprised if it’s not already out in the alphas

[KotlinLeaner]

I only found this one https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/input/TextFieldDecorator