CODEWITHSUNDEEP
androidandroid-jetpack-composesearchbarmaterial3
SergiBC
SergiBC

Reputation: 533

SearchBar text style for Android Compose Material3

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

Upvotes: 2

Views: 875

Answers (2)

Purple6666
Purple6666

Reputation: 402

You'll need to override the themes for Searchbar and Serchview: in your values/themes.xml add these 2 items to your material theme:

    <item name="materialSearchViewStyle">@style/Widget.App.SearchView</item>
    <item name="materialSearchBarStyle">@style/Widget.App.SearchBar</item>

Then in your values/styles.xml define these 2 themes s children of material themes and override their text appearance:

<style name="Widget.App.SearchView" parent="Widget.Material3.SearchView">
    <item name="android:textAppearance">@style/TextAppearance.App.SearchView</item>
</style>
<style name="TextAppearance.App.SearchView" parent="Base.TextAppearance.Material3.Search">
    <item name="android:textSize">20sp</item>
    <item name="android:textColor">#CA0101</item>
    <!--        customise SearchView text here-->
</style>


<style name="Widget.App.SearchBar" parent="Widget.Material3.SearchBar">
    <item name="android:textAppearance">@style/TextAppearance.App.SearchView</item>
</style>
<style name="TextAppearance.App.SearchBar" parent="TextAppearance.Material3.SearchBar">
    <item name="android:textSize">20sp</item>
    <item name="android:textColorHint">#CA0101</item>
    <!--        customise SearchBar text here-->
</style>

Upvotes: 0

Cyklet
Cyklet

Reputation: 341

(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)

Upvotes: 0

Related Questions