CODEWITHSUNDEEP
androidandroid-jetpack-compose
Robert Veres
Robert Veres

Reputation: 545

Android Jetpack Compose: Can't set backgroundColor for OutlinedTextField

I'm new to Jetpack Compose, and trying to set backgroundColor to an OutlinedTextField.

This is my code

fun MyTextField() {
    Column(Modifier
        .background(Color.Gray)
        .fillMaxSize()
        .padding(8.dp)
    ) {
        OutlinedTextField(
            value = "text",
            onValueChange = {},
            colors = TextFieldDefaults.outlinedTextFieldColors(
                backgroundColor = Color.White, // does not work
                unfocusedBorderColor = Color.Red,
                textColor = Color.Red
            ),
            // modifier = Modifier.background(Color.White) - works but not as I expected
        )
    }
}

The backgroundColor = Color.White does not work at all. The OutlinedTextField stays transparent:

When using the modifier the background is changed, but also the part reserved for Label, even when I don't have a label:

Any ideas what am I doing wrong? Thank you.

Upvotes: 29

Views: 83664

Answers (11)

ehsan khormali
ehsan khormali

Reputation: 113

Easiest way:

OutlinedTextField(value = "",
            onValueChange = {},
            colors = OutlinedTextFieldDefaults.colors(focusedContainerColor= MaterialTheme.colorScheme.surface,
                unfocusedContainerColor = MaterialTheme.colorScheme.surface)

)

Upvotes: 0

Alp Eren Kaya
Alp Eren Kaya

Reputation: 1

I encountered a similar issue where adding a box behind the OutlinedTextField caused it to behave based on the expand state of its label. Additionally, when attempting to add a rounded view behind the label, there was a noticeable gap between it and the OutlinedTextField. I came up with a somewhat inelegant solution to this problem, but I hope it proves helpful to you.

modifier = Modifier.drawBehind {
    drawRoundRect(Color.Gray, cornerRadius = CornerRadius(0.dp.toPx()), topLeft = Offset(40F,30F), size = Size(140F, 40F))
}

Have to change topLeft and cornerRadius values which is suits to your outlinedTextField size. here is the result

Upvotes: 0

Hussnain Mehdi
Hussnain Mehdi

Reputation: 119

Check this screenshot

Check this screenshot to give background to OutlinedTextField in compose

This is the output

Upvotes: 1

Viktor Skliarov
Viktor Skliarov

Reputation: 1917

Update:

As @Blundell correctly noted, TextFieldDefaults.outlinedTextFieldColors has become deprecated and is currently recommended to be replaced with OutlinedTextFieldDefaults.colors. The main difference between colors and outlinedTextFieldColors is that now three separate components are used, instead of one containerColor — focusedContainerColor, unfocusedContainerColor and disabledContainerColor.

The following code will be relevant for now:

import androidx.compose.material3.OutlinedTextFieldDefaults
...
OutlinedTextField(
    ...
    colors = OutlinedTextFieldDefaults.colors(
        focusedContainerColor = Color.White,
        unfocusedContainerColor = Color.White,
        disabledContainerColor = Color.White
    ),

Old answer:

When using the material library, your code builds without problems.

import androidx.compose.material.TextFieldDefaults
...
OutlinedTextField(
    ...
    colors = TextFieldDefaults.outlinedTextFieldColors(
        backgroundColor = Color.White
    ),

However, if material3 is used, then the TextFieldDefaults.outlinedTextFieldColors does not have a backgroundColor parameter. In order to achieve correct display on material3, just replace backgroundColor with containerColor.

import androidx.compose.material3.TextFieldDefaults
...
OutlinedTextField(
    ...
    colors = TextFieldDefaults.outlinedTextFieldColors(
        containerColor = Color.White
    ),

Upvotes: 21

AIroot
AIroot

Reputation: 81

use following TextFiledDefaults.textFieldColors properties to change background color

     OutlinedTextField(
         value = exampleName ?: "",
         onValueChange = onExampleChange,
         colors = TextFieldDefaults.textFieldColors(
                textColor = MaterialTheme.colors.onSurface,
                disabledTextColor = Color.Transparent,
                backgroundColor = MaterialTheme.colors.surface,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent
            ),
    )

Upvotes: 1

Qobil
Qobil

Reputation: 1

TextField(
        value = user, { text -> user = text },

        modifier = Modifier
            .fillMaxWidth()
            .height(60.dp)
            .padding(start = 64.dp, end = 64.dp, bottom = 8.dp)
            .background(color = Color.White)
            .border(
                1.dp, color = Color(android.graphics.Color.parseColor("#7d32a8")),

                shape = RoundedCornerShape(50)


            ),
        shape = RoundedCornerShape(50),
        textStyle = TextStyle(
            textAlign = TextAlign.Center,
            color = Color(android.graphics.Color.parseColor("#7d32a8")),
            fontSize = 14.sp
        ),
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            containerColor = Color.White // here add containerColor not backgroundColor

// backgroundColor is not working !!!

        ),


        )

Upvotes: -1

m.sajjad.s
m.sajjad.s

Reputation: 821

you can use this:

TextField(
...
colors = TextFieldDefaults.colors(
                    unfocusedContainerColor = Color.White,
                    focusedContainerColor = Color.White,
                )
...
)

Upvotes: 3

Su Bu
Su Bu

Reputation: 31

You have to do like this

OutlinedTextField(
                ...
                colors = TextFieldDefaults.textFieldColors(
                        backgroundColor =Color.White
                    )
                )

in order to set background Outline textfield

Upvotes: 3

DartLuke
DartLuke

Reputation: 1

Use this

OutlinedTextField(
                modifier = modifier,
                value = text,
                label = label,
                onValueChange = {
                 text=it
                },
                colors = TextFieldDefaults.textFieldColors(
                        backgroundColor =Color.White
                    )
                )

Upvotes: 0

Gaurav Pawar
Gaurav Pawar

Reputation: 249

I found this

Row(
        Modifier
            .background(
                colorResource(id = R.color.col_EEEEEE)
            )
            .align(BottomEnd)
            .padding(10.dp)
    ) {
        OutlinedTextField(
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = 20.dp, end = 20.dp).background(Color.White, RoundedCornerShape(22.dp)),
            shape = RoundedCornerShape(22.dp),
            value = "",
            onValueChange = {},
            textStyle = MaterialTheme.typography.caption
        )
    }

In the above code, I added required background color with the shape in the modifier. The modifier shape property is the same as the OutlinedTextField shape property, which gives required effect.

image to refer

Upvotes: 6

nglauber
nglauber

Reputation: 24004

I'll leave my answer here because I didn't find an easier way...

You can define a composable which will work as wrapper+background.

@Composable
fun OutlinedTextFieldBackground(
    color: Color,
    content: @Composable () -> Unit
) {
    // This box just wraps the background and the OutlinedTextField
    Box {
        // This box works as background
        Box(
            modifier = Modifier
                .matchParentSize()
                .padding(top = 8.dp) // adding some space to the label
                .background(
                    color, 
                    // rounded corner to match with the OutlinedTextField
                    shape = RoundedCornerShape(4.dp) 
                )
        )
        // OutlineTextField will be the content...
        content()
    }
}

Then you just need to wrap your OutlinedTextField with it.

OutlinedTextFieldBackground(Color.LightGray) {
    OutlinedTextField(
        modifier = Modifier.fillMaxWidth(),
        value = textState.value,
        onValueChange = { textState.value = it },
        label = {
            Text(
                text = "Name"
            )
        },
    )
}

Here is the result: enter image description here

As you can see, it works. But as mentioned by Sergey Krivenkov it could be a bad choice in terms of design, because half of the label has one background and other part has another background and this could looks strange.

Upvotes: 36

Related Questions