Multiple colors in TextField of Jetpack Compose

Question

Is it possible to get different colors in a TextField of Jetpack Compose?

Something like with the Text composable with AnnotatedString, but TextField doesn't allow AnnotatedString as input value.

Image of normal Text composable with colors

Answer 1

You can use the VisualTransformation in the TextField.

TextField(
    value = text,
    onValueChange = { text = it },
    visualTransformation = ColorsTransformation()
)

In the VisualTransformation you can use AnnotatedString to display the text with multiple styles.

Something like:

class ColorsTransformation() : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        return TransformedText(
            buildAnnotatedStringWithColors(text.toString()), 
            OffsetMapping.Identity)
    }
}

with:

fun buildAnnotatedStringWithColors(text:String): AnnotatedString{
    val words: List<String> = text.split("\\s+".toRegex())// splits by whitespace
    val colors = listOf(Color.Red,Color.Black,Color.Yellow,Color.Blue)
    var count = 0

    val builder = AnnotatedString.Builder()
    for (word in words) {
        builder.withStyle(style = SpanStyle(color = colors[count%4])) {
            append("$word ")
        }
        count ++
    }
    return builder.toAnnotatedString()
}