SearchBar text style for Android Compose Material3

323 views Asked by At

I'm using the SearchBar included in the Compose library with Material3: androidx.compose.material3.SearchBar.

(Question 1) I'm trying to customize it a bit and I don't know how to set custom font for the typing text. However I can set a custom font for the placeholder text.

SearchBar(
            modifier = Modifier.fillMaxWidth(),
            placeholder = {
                Text(
                    text = searchPlaceHolder,
                    style = MaterialTheme.typography.h4, //my custom style - font
                    color = Color.Gray
                )
            },
            (...)
)

(Question 2) Moreover, I don't know how to modify the height of the SearchBar or reduce the paddings to center the placeholder text.

Images to clarify: Question 1 - Searching text cannot be customised

Question 2 - Placeholder with a big font not centered

1

There are 1 answers

0
Cyklet On

(Question 1) Single way that I found is:

ProvideTextStyle(value = MaterialTheme.typography.displayMedium) { 
        SearchBar() {}
}

Under the hood SearchBar uses BasicTextField that has his style set as LocalTextStyle.current

SearchBar -> SearchBarInputField -> BasicTextField(textStyle = LocalTextStyle.current.merge(TextStyle(color = textColor)))

Would be nice to know if someone else found a better approach.

(Question 2) This one didn't find a way to change it yet, SearchBar uses BasicTextField where height is hardcoded to InputFieldHeight that is a val and can't be modfied

BasicTextField(value = query,
onValueChange = onQueryChange,
modifier = modifier
.height(InputFieldHeight)