CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-compose-textfield
YUSUF AYDIN
YUSUF AYDIN

Reputation: 33

jetpack compose can't set search bar background color to white

I have a search bar with textfield when I try to set background color to white it comes with gray but I can make it to other colors only white not working if I change Textfiled to BasicTexfield it works fine but can't set the Icon top start

@Composable
fun DoctorListScreen(
navController: NavController,
viewModel: DoctorListViewModel = hiltViewModel()
) {
Surface(
    color = Color.White,
    modifier = Modifier.fillMaxSize(1f)
) {
    Column {
        Spacer(modifier = Modifier.padding(top = 15.dp))
        SearchBar(
            hint = "Klinik ara..", modifier = Modifier
                .fillMaxWidth()
                .padding(15.dp)
        ) {
        }
        CheckGender(modifier = Modifier.padding(15.dp))

    }
}
}


@Composable
fun SearchBar(
modifier: Modifier = Modifier,
hint: String = "",
onSearch: (String) -> Unit = {},
) {

var text by remember {
    mutableStateOf("")
}

var isHintDisplayed by remember {
    mutableStateOf(hint != "")
}
Box(modifier = modifier) {
    TextField(value = text, onValueChange = {
        text = it
        onSearch(it)
    }, leadingIcon = {
        Icon(painter = painterResource(id = R.drawable.search), contentDescription = null)
    }, maxLines = 1,
        singleLine = true,
        modifier = Modifier
            .fillMaxWidth()
            .shadow(5.dp, shape = RoundedCornerShape(10.dp))
            .background(Color.White, shape = RoundedCornerShape(10.dp))
            .onFocusChanged {
                isHintDisplayed = it.isFocused != true && text.isEmpty()
            })
    if (isHintDisplayed) {
        Text(
            text = hint,
            color = Color.LightGray,
            modifier = Modifier.padding(horizontal = 50.dp, vertical = 16.dp)
        )
    }
}
}

how it looks like :

enter image description here

both background and bar color is white but seems different

Upvotes: 1

Views: 2318

Answers (4)

TSM
TSM

Reputation: 39

As suggested by another answer:

TextFieldDefaults.textFieldColors(backgroundColor = Color.White)

Doesn't work for me.

Try with containerColor parameter:

TextFieldDefaults.textFieldColors(containerColor = Color.Red)

Upvotes: 0

karique
karique

Reputation: 538

In the latest version of compose the "backgroundColor" property changed to "containerColor"

use:

TextField(
     /* .... */
    shape = RoundedCornerShape(10.dp),
    colors = TextFieldDefaults.textFieldColors(containerColor = Color.White),
)

Upvotes: 3

Gabriele Mariotti
Gabriele Mariotti

Reputation: 365038

Remove the background modifier:

//background(Color.White, shape = RoundedCornerShape(10.dp))

and use:

 TextField(
         /* .... */
        shape = RoundedCornerShape(10.dp),
        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.White),
 )

enter image description here

Upvotes: 2

Code Poet
Code Poet

Reputation: 8033

Add this line in your Textfield:

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

Upvotes: 4

Related Questions