Question 411711 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Set Composable TextField's background color to white. Android Jetpack compose

I have an OutlinedTextField and I want it to have a white background but only the TextField. The thing is, when I add modifier = Modifier.background(color = AppWhite), not only the textField is white, but also what’s surrounding it (see first attached image) and, when I remove the modifier, everything is green (like the second image).
This is my Composable:

           Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.Center
            ) {
                OutlinedTextField(
                    shape = RoundedCornerShape(20.dp),
                    modifier = Modifier.background(color = AppWhite),
                    value = searchText,
                    onValueChange = { searchText = it },
                    label = {
                        Text(stringResource(R.string.searchHint))
                    },
                    .
                    .
                    .
                Image(
                    modifier = Modifier.padding(top = 8.dp),
                    painter = painterResource(R.drawable.isotype_white),
                    contentDescription = null
                )

How can I set only the TextField’s background to white without having the extra white outside it??

enter image description here

Tags:

2

Answers


  1. 0

    You can set colors for your OutlinedTextField container using colors parameter like this:

    OutlinedTextField(
    shape = RoundedCornerShape(20.dp),
    value = searchText,
    onValueChange = { searchText = it },
    label = {
        Text(stringResource(R.string.searchHint))
    },
    colors = OutlinedTextFieldDefaults.colors( 
        unfocusedContainerColor = Color.White,
        focusedContainerColor = Color.White
    )  
)
    Login or Signup to reply.
  2. 0

    You have the extra white background because you are setting the modifier background color to the whole OutlinedTextField (which is a big rectangle). For your purpose, you need to apply your change only on the part of the OutlinedTextField you want (here only the text).

    As mentioned in the response above, use the colors for the OutlinedTextField should fix the issue.

    Row(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Gray),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center
) {
    OutlinedTextField(
        // modifier = Modifier.background(Color.White), // here the modification is applied to the whole component
        shape = RoundedCornerShape(20.dp),
        value = "Hello",
        onValueChange = {  },
        label = {
            Text(
                modifier = Modifier.background(Color.Transparent), // here you can apply a background only to the label if needed
                text = "Bonjour"
            )
        },
        colors = OutlinedTextFieldDefaults.colors(
            unfocusedContainerColor = Color.White,
            focusedContainerColor = Color.White
        )
    )
    Image(
        modifier = Modifier.padding(top = 8.dp),
        painter = painterResource(R.drawable.ic_menu_camera),
        contentDescription = null
    )
}

    OutlinedTextFieldDefaults.colors() gives you access to several other colors as well.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search