CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-themeandroid-textinputlayoutandroid-compose-textfield
Artaza Sameen
Artaza Sameen

Reputation: 787

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.

Upvotes: 49

Views: 53807

Answers (8)

Nikhil Biju
Nikhil Biju

Reputation: 825

For those looking to customize the outline color of a OutlinedTextField in Jetpack Compose (1.6.0), you can achieve this by using the colors parameter and specifically setting the focusedIndicatorColor and unfocusedIndicatorColor. In your case, you want the outline to be green when focused and red when unfocused.

Here's an example:

OutlinedTextField(
    value = value,
    onValueChange = onValueChange,
    modifier = Modifier
        .fillMaxWidth()
        .padding(vertical = 4.dp),
    placeholder = {
        Text(
            text = "Enter description",
            style = TextStyle(
                color = MaterialTheme.colorScheme.primary,
                textAlign = TextAlign.Center
            )
        )
    },
    shape = RoundedCornerShape(12.dp),
    colors = TextFieldDefaults.colors(
        focusedIndicatorColor = Color.Green,
        unfocusedIndicatorColor = Color.Red
    )
)

Upvotes: 3

ASIM
ASIM

Reputation: 91

In Compose 1.4.0 and Material 3, you can use the following:

    OutlinedTextField(
        value = "Hello",
        onValueChange = {},
        colors = TextFieldDefaults.outlinedTextFieldColors(
            containerColor =,
            focusedBorderColor =,
            unfocusedBorderColor =
        ),
    )

Upvotes: 2

Ankit Verma
Ankit Verma

Reputation: 718

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.

Upvotes: 8

Saurabh
Saurabh

Reputation: 308

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")
            },
        )

Upvotes: 5

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363825

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

Upvotes: 93

Gregor Sotošek
Gregor Sotošek

Reputation: 417

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

Upvotes: 1

27P
27P

Reputation: 1475

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

enter image description here

Upvotes: 13

ming chen
ming chen

Reputation: 680

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.

Upvotes: 3

Related Questions