[TextField] Add option to allow suffix flow with the text

[mahozad]

trafficstars

Description Finally, new prefix and suffix attributes have been added for text fields.
The suffix is fixed at the end of the text field and cannot be made to flow with the input text.

The solution Add the functionality and an option (attribute) to text field so that the developer can specify whether the suffix should be fixed or it should flow at the end of the input text.

Alternatives Currently, this feature can be implemented without using suffixText attribute.
It requires a text listener that appends the suffix when the text is changed.

See the related stack overflow post.

[TurKurT656]

Is there another workaround to temporary fix this issue? I've tried to manipulate layoutParams of com.google.android.material.R.id.textinput_suffix_text but it didn't worked.

[mahozad]

Added a relevant link in the description.

[mahozad]

This can be done fairly easily in Compose like this:

@Composable
fun SuffixTest() {
    var text by remember { mutableStateOf("") }
    TextField(
        text,
        singleLine = true,
        visualTransformation = SuffixTransformer(" $"),
        onValueChange = { text = it }
    )
}

class SuffixTransformer(val suffix: String) : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        val result = text + AnnotatedString(suffix)
        return TransformedText(result, OffsetMapping.Identity)
    }
}

The above component probably can be used in Views too. See this post

_{Here is the related SO post. Also, thanks to Gabriele Mariotti for this answer on Stack Overflow.}

[loofv]

This can be done fairly easily in Compose like this:

@Composable
fun SuffixTest() {
    var text by remember { mutableStateOf("") }
    TextField(
        text,
        singleLine = true,
        visualTransformation = SuffixTransformer(" $"),
        onValueChange = { text = it }
    )
}

class SuffixTransformer(val suffix: String) : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        val result = text + AnnotatedString(suffix)
        return TransformedText(result, OffsetMapping.Identity)
    }
}

The above component probably can be used in Views too. See this post

Here is the related SO post. Also, thanks to Gabriele Mariotti for this answer on Stack Overflow.

Thank you for that, worked wonders!

[vivekAtHorizon]

@mahozad Thank you for this answer/solution to be done with Jetpack, but still, I'm looking for the complete solution that I can do in XML with kotlin, if there's any excellent example like your question on SO that I can use please let me know..

[devanshc21]

@vivekAtHorizon Did you figure out a way to get this done?