Custom SearchView style not applied

Question

I´m trying to set a custom style on my SearchView in the toolbar, but none of the proposed solutions that I´ve found works and the style isn´t applied. I´m using the androidx.appcompat.widget.SearchView version of the SearchView.

In the styles.xml I´ve created a custom style for the SearchView and applied it to the AppTheme but the appearance of the SearchView doesn´t change. I´ve already tried multiple differen attributes of the style but none changes anything.

styles.xml:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="searchViewStyle">@style/CustomSearchViewStyle</item>
    </style>

    <style name="AppTheme.Toolbar" parent="Base.ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="searchViewStyle">@style/CustomSearchViewStyle</item>
    </style>

    <style name="CustomSearchViewStyle" parent="Widget.AppCompat.SearchView">
        <item name="searchIcon">@drawable/ic_custom_search</item>
        <item name="suggestionRowLayout">@layout/custom_search_row</item>
    </style>
</resources>

menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search_white_24dp"
        android:orderInCategory="100"
        android:title="@string/search"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        app:showAsAction="collapseActionView|ifRoom" />

</menu>

I just want to modify the clock icon in the recent searches suggestion list, but the custom style isn´t applied and I can´t find any other way to do it.

Edit 1: I´ve just added the same androidx.appcompat.widget.SearchView to a regular layout-file and then the style is applied correctly. However when used as actionViewClass in the menu the style is ignored. Do you know how to also apply the style when it is used as actionViewClass?

Answer 1

Answer is applying only for androidx.appcompat.widget.SearchView

Add this to the AppTheme

<style name="AppTheme" parent="Theme.MaterialComponents">
    <item name="actionBarTheme">@style/AppTheme.Toolbar</item>
</style>

And remove this item searchViewStyle from AppTheme

Complete style

<style name="AppTheme" parent="Theme.MaterialComponents">
    <item name="actionBarTheme">@style/ActionBar</item>
</style>

<style name="ActionBar" parent="Base.ThemeOverlay.AppCompat.ActionBar">
    <item name="searchViewStyle">@style/SearchViewStyle</item>
</style>

<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView.ActionBar">
    <!--search view customization-->
    <item name="layout">@layout/abc_search_view</item>
    <item name="queryBackground">@drawable/abc_textfield_search_material</item>
    <item name="submitBackground">@drawable/abc_textfield_search_material</item>
    <item name="closeIcon">@drawable/abc_ic_clear_material</item>
    <item name="searchIcon">@drawable/abc_ic_search_api_material</item>
    <item name="searchHintIcon">@drawable/abc_ic_search_api_material</item>
    <item name="goIcon">@drawable/abc_ic_go_search_api_material</item>
    <item name="voiceIcon">@drawable/abc_ic_voice_search_api_material</item>
    <item name="commitIcon">@drawable/abc_ic_commit_search_api_mtrl_alpha</item>
    <item name="suggestionRowLayout">@layout/abc_search_dropdown_item_icons_2line</item>
</style>

If you use NoActionBar theme (example Theme.MaterialComponents.Light.NoActionBar), then add searchViewStyle directly to AppTheme

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="searchViewStyle">@style/SearchViewStyle</item>
</style>

<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView.ActionBar">
    <!--search view customization-->
    <item name="layout">@layout/abc_search_view</item>
    <item name="queryBackground">@drawable/abc_textfield_search_material</item>
    <item name="submitBackground">@drawable/abc_textfield_search_material</item>
    <item name="closeIcon">@drawable/abc_ic_clear_material</item>
    <item name="searchIcon">@drawable/abc_ic_search_api_material</item>
    <item name="searchHintIcon">@drawable/abc_ic_search_api_material</item>
    <item name="goIcon">@drawable/abc_ic_go_search_api_material</item>
    <item name="voiceIcon">@drawable/abc_ic_voice_search_api_material</item>
    <item name="commitIcon">@drawable/abc_ic_commit_search_api_mtrl_alpha</item>
    <item name="suggestionRowLayout">@layout/abc_search_dropdown_item_icons_2line</item>
</style>

Answer 2

In your Activity's onCreateOptionsMenu:

For support library

MenuInflater menuInflater = getMenuInflater();
menuInflater.inflate(R.menu.menu, menu);
SearchManager searchManager = (SearchManager) getSystemService(SEARCH_SERVICE);
mSearchView = (SearchView) menu.findItem(R.id.action_search).getActionView();

mSearchView.setMaxWidth(Integer.MAX_VALUE);
ImageView icon = mSearchView.findViewById(androidx.appcompat.R.id.search_button);
icon.setImageResource(R.drawable.ic_action_search);

mSearchView.setMaxWidth(Integer.MAX_VALUE);
ImageView icon = mSearchView.findViewById(android.support.v7.appcompat.R.id.search_button);
icon.setImageResource(R.drawable.ic_action_search); // Here you select your custom icon.

For Android X

MenuInflater menuInflater = getMenuInflater();
menuInflater.inflate(R.menu.menu, menu);
SearchManager searchManager = (SearchManager) getSystemService(SEARCH_SERVICE);
mSearchView = (SearchView) menu.findItem(R.id.action_search).getActionView();

mSearchView.setMaxWidth(Integer.MAX_VALUE);
ImageView icon = mSearchView.findViewById(androidx.appcompat.R.id.search_button);
icon.setImageResource(R.drawable.ic_action_search); // Here you select your custom icon.