Styling AppCompat SearchView with AppCompat 22.1.0 is not working

Question

I defined a layout for the suggestion row, but after updating the AppCompat library to 22.1 the layout defined in the styles.xml is ignored.

This is my styles.xml file (simplified):

<style name="Theme.Upp" parent="@style/MyApp">
    <item name="searchViewStyle">@style/SearchViewStyleMyApp</item>
</style>

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

Even if I try to change the queryBackground it is not working.

Any ideas why?

score 23 · Accepted Answer · answered Apr 25 '15 at 21:01

After looking into the newest library source it loooks like it was intended to make SearchView match material design guidelines, so as a result default style is without underline and hint icon.

To apply your own style first you have to define your SearchView style in styles.xml like this:

<style name="SearchViewStyleMyApp" parent="Widget.AppCompat.SearchView">
    <!-- Background for the search query section (e.g. EditText) -->
    <!-- <item name="queryBackground">@android:color/black</item> -->
    ...
    <!-- note that this is how you stye your hint icon -->
    <item name="searchHintIcon">@drawable/ab_icon_search</item>
</style>

Then you define your ActionBar/Toolbar theme overlay:

<style name="MyThemeOverlay.ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="searchViewStyle">@style/SearchViewStyleMyApp</item>
</style>

Next step is to add ToolBar to your layout file like this:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/MyThemeOverlay.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:elevation="4dp" />

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Last step is to set your Toolbar to act like an ActionBar:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }
}

Also note that your theme has to extend Theme.AppCompat.NoActionBar

hi ,i did same as you mentioned, but still my Search Style is ignored. Any idea? — Mohammad Imran, May 05 '15 at 11:08
@Mohammad Imran You have to extend **Widget.AppCompat.SearchView** and not **Widget.AppCompat.SearchView.ActionBar**. If this does not help then there is a style error somewhere else. — Tadas, May 06 '15 at 18:36
@Mohammad Imran Your SearchView style looks correct problem is somewhere else. Check if the themes are applied correctly to toolbar and activity. — Tadas, May 07 '15 at 09:43
You should also use `androidx.appcompat.widget.SearchView` (not `android.widget.SearchView`) in your `toolbar_menu.xml` to apply custom style — lincollincol, Nov 17 '21 at 12:26

score 11 · Answer 2 · answered Apr 29 '15 at 10:10

If you are not using Toolbar, the style to override is searchViewStyle under actionBarTheme:

<style name="AppTheme" parent="Theme.AppCompat.Light">
    ...
    <item name="actionBarTheme">@style/AppActionBarTheme</item>
</style>

<style name="AppActionBarTheme" parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="searchViewStyle">@style/AppActionBarSearchView</item>
</style>

<style name="AppActionBarSearchView" parent="Widget.AppCompat.SearchView.ActionBar">
    <item name="queryBackground">@drawable/your_query_background</item>
    <item name="submitBackground">@drawable/your_submit_background</item>
    <item name="searchHintIcon">@drawable/your_search_hint_icon</item>
    <item name="queryHint">your query hint</item>
</style>

I can confirm that this does work with appcompat 22.1.1 – tinsukE May 28 '15 at 08:29 — tinsukE, May 28 '15 at 08:29

score -2 · Answer 3 · answered Jul 12 '18 at 04:01

-2

You can code to change it's look and feel. I explained in this post with images. you can reference this post for your project

You can change background, icon of the search view, even the clear button ( cancel button)

How to change searchbar cancel button image in xamarin forms

answered Jul 12 '18 at 04:01

vu ledang

465
4
7

this is out of topic, he is not asking about xamarin – Allan Veloso Mar 06 '19 at 21:38

Styling AppCompat SearchView with AppCompat 22.1.0 is not working

3 Answers3