Styling for SearchView

[iamarjun]

Hi, awesome example btw, but I was trying to theme the search view but couldn't get it working, can you help me with this

[sabergeek]

Hello @iamarjun. Can you share the following details?

1. Android version you're trying on.
2. Screen reference of desired look of search view
3. Screen reference of how the current styling for search view looks like.

[iamarjun]

@sabergeek

1. Android 10
2. Simple SearchView in the toolbar.
3. As you can see when the search view expands there is a back arrow before the cursor which is currently white, also there are those magnifying glass and cross icons in the search view itself which are white, I tried many solutions but couldn't get it working.

Below is the styling I tried to follow

<style name="App.Theme.SearchView" parent="Widget.AppCompat.SearchView">
        <!-- Background for the search query section (e.g. EditText) -->
        <item name="queryBackground">@color/primaryDarkColor</item>
        <!-- Background for the actions section (e.g. voice, submit) -->
        <item name="submitBackground">@color/black_800</item>
        <!-- Close button icon -->
        <item name="closeIconTint">@color/black_800</item>
        <!-- Search button icon -->
        <item name="searchIcon">@color/black_800</item>
        <!-- Go/commit button icon -->
        <item name="goIcon">@color/black_800</item>
        <!-- Voice search button icon -->
        <item name="voiceIcon">@color/black_800</item>
        <!-- Commit icon shown in the query suggestion row -->
        <item name="commitIcon">@color/black_800</item>
        <!-- Layout for query suggestion rows -->
        <item name="suggestionRowLayout">@color/black_800</item>

    </style>

[sabergeek]

@iamarjun Styling view-groups of widgets can be little tricky. I'll update the repo with a working example soon.

[sabergeek]

@iamarjun The repo has been updated with a sample for styling search views. You should basically add theme and popup theme attributes while styling your toolbar. In this repo, the toolbar has been globally styled in themes.xml.

    <!-- Toolbar -->

    <style name="ToolbarAppearance" parent="Widget.MaterialComponents.Toolbar.PrimarySurface">
        <item name="popupTheme">@style/ToolbarAppearanceOverlay</item>
        <item name="theme">@style/ToolbarAppearanceOverlay</item>
    </style>

    <!-- For widgets on Toolbar -->

    <style name="ToolbarAppearanceOverlay">
        <item name="android:textColorPrimary">?colorOnPrimary</item>
        <item name="colorControlNormal">?colorOnPrimary</item>
        <item name="colorControlHighlight">?colorOnPrimary</item>
        <item name="android:textColorHint">?colorOnPrimary</item>
    </style>

**Update: I noticed the approach only works for themes that extend Theme.MaterialComponents.DayNight.DarkActionBar.

For Theme.MaterialComponents.DayNight.NoActionBar, popupTheme and theme attributes DO NOT work. Instead, replace them with just one materialThemeOverlay attribute pointing to the overlay style.**

[iamarjun]

@iamarjun The repo has been updated with a sample for styling search views. You should basically add theme and popup theme attributes while styling your toolbar. In this repo, the toolbar has been globally styled in themes.xml.

    <!-- Toolbar -->

    <style name="ToolbarAppearance" parent="Widget.MaterialComponents.Toolbar.PrimarySurface">
        <item name="popupTheme">@style/ToolbarAppearanceOverlay</item>
        <item name="theme">@style/ToolbarAppearanceOverlay</item>
    </style>

    <!-- For widgets on Toolbar -->

    <style name="ToolbarAppearanceOverlay">
        <item name="android:textColorPrimary">?colorOnPrimary</item>
        <item name="colorControlNormal">?colorOnPrimary</item>
        <item name="colorControlHighlight">?colorOnPrimary</item>
        <item name="android:textColorHint">?colorOnPrimary</item>
    </style>

Awesome thanks, lemme give it a spin

[iamarjun]

@sabergeek Thanks for the efforts, but is there any difference in theming if I were to define my own toolbar using this as parent

Theme.MaterialComponents.DayNight.NoActionBar

In my case, the search view theming still doesn't get applied If you look very closely the back button and the cross buttons are stiff white, also before writing the text the magnifying glass icon is also white, you can refer to the previous screenshot that I've attached. You need to look very closely as it is white and not very distinguishable.

[sabergeek]

@iamarjun That shouldn't be a problem. Can you share a sample project with your current implementation? I'll look into it.

[iamarjun]

@iamarjun That shouldn't be a problem. Can you share a sample project with your current implementation? I'll look into it.

Sure, https://github.com/iamarjun/Food2Fork/tree/material_design

[sabergeek]

@iamarjun Try this:

    <!-- Toolbar -->

    <style name="ToolbarAppearance" parent="Widget.MaterialComponents.Toolbar.Primary">
        <item name="materialThemeOverlay">@style/ToolbarAppearanceOverlay</item>
    </style>

    <!-- For widgets on Toolbar -->

    <style name="ToolbarAppearanceOverlay">
        <item name="android:textColorPrimary">?colorOnPrimary</item>
        <item name="colorControlNormal">?colorOnPrimary</item>
        <item name="colorControlHighlight">?colorOnPrimary</item>
        <item name="android:textColorHint">?colorOnPrimary</item>
    </style>

    <!-- You can replace ?colorOnPrimary with any other you like -->

The code above produces the following output for Theme.MaterialComponents.DayNight.NoActionBar:

[iamarjun]

<style name="ToolbarAppearance" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="materialThemeOverlay">@style/ToolbarAppearanceOverlay</item>
</style>

<!-- For widgets on Toolbar -->

<style name="ToolbarAppearanceOverlay">
    <item name="android:textColorPrimary">?colorOnPrimary</item>
    <item name="colorControlNormal">?colorOnPrimary</item>
    <item name="colorControlHighlight">?colorOnPrimary</item>
    <item name="android:textColorHint">?colorOnPrimary</item>
</style>

<!-- You can replace ?colorOnPrimary with any other you like -->

Thanks, @sabergeek it works like a charm, dammit I find it so hard to understand these styling and theming, thanks once again