Search code examples
androidandroid-jetpack-composeandroid-themeandroid-textinputlayoutandroid-compose-textfield

How to change the outline color of OutlinedTextField from jetpack compose?


Here is how OutlinedTextField code looks like in jetpack-compose:

OutlinedTextField(
    value = "",
    onValueChange = {},
    label = {Text("Input")}
)

The default color of the outline of this TextField is purple. I want to change the outline color along with the label obviously.


Solution

  • The default values used by the OutlinedTextField are defined in the TextFieldDefaults.outlinedTextFieldColors by the focusedBorderColor, unfocusedBorderColor, disabledBorderColor.

    With M2:

    focusedBorderColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
    unfocusedBorderColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),
    

    You can change the colors.primary and the colors.onSurface in your theme.

    With M3:

        focusedBorderColor: Color = OutlinedTextFieldTokens.FocusOutlineColor.toColor(),
        unfocusedBorderColor: Color = OutlinedTextFieldTokens.OutlineColor.toColor(),
    

    In this case you can change the primary and the outline colors in your theme.

    Otherwise you can override them using something like:

        OutlinedTextField(
            value = "",
            onValueChange = {},
            label = {Text("Input")},
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = Green,
                unfocusedBorderColor = Yellow)
        )
    

    enter image description here