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

Question

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.

Gabriele Mariotti · Accepted Answer · 2023-03-12T10:09:05.737

74

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)
    )

edited Mar 12 '23 at 10:09

answered Mar 03 '21 at 09:17

Gabriele Mariotti

320,139
94
887
841

5

We can use focusedLabelColor and unfocusedLabelColor to change the color of the label. Btw, thanks for showing me the path for more customization possibilities. – Artaza Sameen Mar 03 '21 at 09:35
@Gabriele Mariotti It is not working when "enable = false". Is there any workaround on that ? Thanks – Arpit Patel Jan 15 '23 at 05:48
1

@ArpitPatel If it has `enabled=false` you have to use the `disabledBorderColor` attribute – Gabriele Mariotti Jan 15 '23 at 11:38
I only want to change outline color when user press on that not always. I was opening drop down on outlineTextField click and highlight that field so user will notify current state of screen. – Arpit Patel Jan 16 '23 at 22:46

score 10 · Answer 2 · answered Aug 16 '21 at 20:40

@Preview
@Composable
fun TelephoneEditText() {
    val textValue = remember {
        mutableStateOf("")
    }

    OutlinedTextField(
        label = {
            Text(
                text = stringResource(
                    id = R.string.phoneNumber
                ),
                style = TextStyle(
                    color = MaterialTheme.colors.primaryVariant,
                )
            )
        },
        placeholder = {
            Text(
                text = stringResource(id = R.string.phone_placeholder),
                style = TextStyle(
                    color = MaterialTheme.colors.primaryVariant,
                    textAlign = TextAlign.Center
                )
            )
        },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = MaterialTheme.colors.secondary,
            unfocusedBorderColor = MaterialTheme.colors.secondary,
            focusedLabelColor = MaterialTheme.colors.secondary,
            cursorColor = MaterialTheme.colors.primaryVariant
        ),
        keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number),
        value = textValue.value,
        onValueChange = { textValue.value = it },
    )
    WhatsAppButton(textValue)
}

Colors.kt

val Yellow500 = Color(0XFFFFDE03)
val Blue700 = Color(0xFF0036FF)
val Pink500 = Color(0xFFf50057)
val Pink700 = Color(0xFFff5983)

val LightColors = lightColors(
    primary = Yellow500,
    primaryVariant = Blue700,
    secondary = Pink500,
    secondaryVariant = Pink700
)

val DarkColors = darkColors(
    primary = Yellow500,
    primaryVariant = Blue700,
    secondary = Pink700
)

score 2 · Answer 3 · answered Mar 03 '21 at 09:19

for 1.0.0 beta-1

OutlinedTextField(
    value = "",
    onValueChange = {},
    label = {Text("Input")},
    color = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor: Color = MaterialTheme.colors.primary.copy(alpha = 
              ContentAlpha.high),
            unfocusedBorderColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 
              ContentAlpha.disabled),
            disabledBorderColor: Color = unfocusedBorderColor.copy(alpha =
              ContentAlpha.disabled),
            errorBorderColor: Color = MaterialTheme.colors.error,
    )
)

Set border colors depends on the situation using above parameter.

score 2 · Answer 4 · answered Jun 25 '23 at 06:12

With compose androidx.compose:compose-bom:2023.04.01 Now you need to use colors. For background use container color and for border use indicator color

  OutlinedTextField(
            searchValue.value,
            {
                searchValue.value = it
            },
            placeholder = { Text(text = stringResource(id = R.string.hint_search_food)) },
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Text, imeAction = ImeAction.Search
            ),
            modifier = Modifier.fillMaxWidth(),
            shape = RoundedCornerShape(24.dp),
            colors = TextFieldDefaults.colors(
                unfocusedContainerColor = fieldBackGroundColor,
                focusedContainerColor = fieldBackGroundColor,
                focusedIndicatorColor = fieldBackGroundColor,
                unfocusedIndicatorColor = fieldBackGroundColor
            ),
            leadingIcon = {
                Icon(Icons.Outlined.Search, "Search")
            },
        )

score 1 · Answer 5 · answered Dec 20 '22 at 21:47

I believe this is solution for M3:

colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent,
                cursorColor = androidx.compose.material3.MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = ContentAlpha.medium),
                focusedIndicatorColor = androidx.compose.material3.MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = ContentAlpha.medium),
                focusedLabelColor = androidx.compose.material3.MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = ContentAlpha.medium)
            )

score 1 · Answer 6 · answered Aug 30 '23 at 17:17

You can use this property to change the border colors

OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = // someColor,
                    unfocusedBorderColor = //someColor,
                )

Example,

OutlinedTextField(
                value = status,
                onValueChange = { status = it },
                shape = RoundedCornerShape(8.dp),
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = Grey80,
                    unfocusedBorderColor = Grey80,
                )

            )

You get a bunch of options to try on.

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

6 Answers6

Linked