Search code examples
androidandroid-jetpack-composetextfieldandroid-compose-textfield

Android Jetpack Compose cannot change BasicTextField cursor thumb color


Currently I'm working with android jetpack compose BasicTextField. And when I change cursor color, I expect the cursor handle to be changed with the same color as well. But it turns out with a different color. Is this a bug or I did set something wrong?

Here is what I have set

colors = TextFieldDefaults.textFieldColors(
    backgroundColor = Color.Transparent,
    focusedIndicatorColor = colorResource(id = R.color.accent),
    unfocusedIndicatorColor = colorResource(id = R.color.lightest_grey),
    focusedLabelColor = colorResource(id = R.color.secondary_20),
    unfocusedLabelColor = colorResource(id = R.color.light_grey),
    textColor = colorResource(id = R.color.secondary),
    cursorColor = colorResource(id = R.color.secondary),
  )

enter image description here


Solution

  • You have to provide a custom TextSelectionColors.

    Something like:

    val customTextSelectionColors = TextSelectionColors(
        handleColor = Green,
        backgroundColor = Red
    )
    
    CompositionLocalProvider(LocalTextSelectionColors provides customTextSelectionColors) {
        BasicTextField(
            value = text,
            onValueChange = {text = it},
            cursorBrush = SolidColor(Black)
        )
    }
    

    enter image description here enter image description here