CODEWITHSUNDEEP
android-jetpack-composesearchbar
DeKekem
DeKekem

Reputation: 1743

changing colors in compose SearchBar

I have been trying to use the new compose SearchBar composable. Everything is going fine except for the fact that I can't change the color of the search input text field.

here my code:

 SearchBar(
   ...
   colors = SearchBarDefaults.colors(
                    inputFieldColors = TextFieldDefaults.colors(
                        unfocusedContainerColor = Color.Red,
                        focusedContainerColor = Color.Red,
                        focusedIndicatorColor = Color.Red,
                        unfocusedIndicatorColor = Color.Red,
                        disabledIndicatorColor = Color.Red,
                    )
                ), tonalElevation = 0.dp

I have set red to see if things are working at all. As you can see in the picture, there is no red at all. The tonalElevation is 0.dp on purpose. Basically I want the text field to have darker background

no red to be seen

Upvotes: 0

Views: 1252

Answers (2)

Ra Isse
Ra Isse

Reputation: 371

For anyone that has the same issue, for the colors to have effect you should put them inside the InputField just like below:

SearchBar(inputField = {
    SearchBarDefaults.InputField(
        state = searchFieldState,
        onSearch = {},
        expanded = false,
        onExpandedChange = {},
        placeholder = { Text(text = "Search Reference") },
        leadingIcon = {
            Icon(
                painter = painterResource(id = R.drawable.baseline_search_24),
                contentDescription = "Search Icon"
            )
        },
        // Change the colors here
        colors = SearchBarDefaults.inputFieldColors(
            focusedContainerColor = MaterialTheme.colorScheme.secondaryContainer,
            unfocusedContainerColor = MaterialTheme.colorScheme.secondaryContainer)

    )
}, expanded = false, onExpandedChange = {}) {

}

Upvotes: 0

DeKekem
DeKekem

Reputation: 1743

I just read this from the source code of inputFieldColors composable.

Creates a TextFieldColors that represents the different colors used in the search bar input field in different states. Only a subset of the full list of TextFieldColors parameters are used in the input field. All other parameters have no effect.

Therefore changing the properties I mentioned in my question will have no effect.

Upvotes: 0

Related Questions