Search view close icon appearing disabled rather than white

Question

Whenever I type into my search view the close button (X) appears to be disabled for some reason rather than appearing in the colour white. How can this error be resolved so that it appears white?

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    inflater.inflate(R.menu.menu_search_list, menu);
    MenuItem item = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);
    searchView.setOnQueryTextListener(this);
    searchView.setQueryHint(getResources().getString(R.string.station_search_hint));
}

menu_search_list.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_action_search_light"
        android:title="@string/action_search"
        android:orderInCategory="100"
        app:showAsAction="always"
        app:actionViewClass="android.support.v7.widget.SearchView"/>
</menu>

score 4 · Answer 1 · answered Sep 27 '17 at 14:35

Clean solution hiding the close icon when is empty.

Use "collapseActionView|always" in app:showAsAction attribute.

<item
    android:id="@+id/action_search"
    android:icon="@drawable/ic_search"
    android:title="@string/menu_action_search"
    app:showAsAction="collapseActionView|always"
    app:actionViewClass="android.support.v7.widget.SearchView"/>

score 1 · Answer 2 · edited Jul 08 '15 at 12:53

1

ImageView close_button = (ImageView)searchView.findViewById(R.id.close_button);
close_button .setBackgroundResource(R.drawable.your_icon);

or (Using Selector)

 ImageView close_button =(ImageView)searchView.findViewById(R.id.close_button);
 close_button .setBackgroundResource(R.drawable.your_image_selector);

edited Jul 08 '15 at 12:53

moffeltje

4,521
4
33
57

answered Jul 08 '15 at 12:44

Bhaskar Kumar Singh

411
4
6

Do you know how to solve this with a proper answer and code?[Fast scroll large letter thumb preview not appearing](http://stackoverflow.com/questions/31321784/fast-scroll-large-letter-thumb-preview-not-appearing) – wbk727 Jul 10 '15 at 09:50
Can we set space allocated for close button ? I used the above code it works fine, but the new image i set is aligned to almost center of search box – Nimmagadda Gowtham Nov 29 '15 at 17:15

score 1 · Answer 3 · edited Jul 08 '15 at 13:26

1

I think copy-paste of next code:

View close = searchView.findViewById(R.id.search_close_btn);
close.setBackgroundResource(R.drawable.desired_icon);

Is not good solution. Please, use styles for this.
First solution. Add close icon as default android:searchViewCloseIcon in your primary theme:

<style name="Theme" parent="AppBaseTheme">
<item name="android:searchViewCloseIcon">@drawable/ic_your_search_close_icon</item>
</style>

Second solution(Better). Style your action bar

<style name="CustomActionBarTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

<!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="searchViewCloseIcon">@android:drawable/ic_your_search_close_icon</item>
    </style>

Other SearchView attributes(from appcompat-v7 source code(UPDATED LINK)):

<attr name="searchResultListItemHeight" format="dimension" />
<attr name="searchViewAutoCompleteTextView" format="reference" />
<attr name="searchViewCloseIcon" format="reference" />
<attr name="searchViewEditQuery" format="reference" />
<attr name="searchViewEditQueryBackground" format="reference" />
<attr name="searchViewGoIcon" format="reference" />
<attr name="searchViewSearchIcon" format="reference" />
<attr name="searchViewTextField" format="reference" />
<attr name="searchViewTextFieldRight" format="reference" />
<attr name="searchViewVoiceIcon" format="reference" />

Exaple usage:

<item name="searchDropdownBackground">@android:drawable/spinner_dropdown_background</item>
<item name="searchViewTextField">@drawable/textfield_searchview_holo_dark</item>
<item name="searchViewTextFieldRight">@drawable/textfield_searchview_right_holo_dark</item>
<item name="searchViewCloseIcon">@android:drawable/ic_clear</item>
<item name="searchViewSearchIcon">@android:drawable/ic_search</item>
<item name="searchViewGoIcon">@android:drawable/ic_go</item>
<item name="searchViewVoiceIcon">@android:drawable/ic_voice_search</item>
<item name="searchViewEditQuery">@android:drawable/ic_commit_search_api_holo_dark</item>
<item name="searchViewEditQueryBackground">?attr/selectableItemBackground</item>
<item name="searchDialogTheme">@style/Theme.SearchBar</item>

More about styling:
Android – Theming ActionBar and the SearchView within it by Andreas Nilsson
Styling the Action Bar by Android official documentation

edited Jul 08 '15 at 13:26

answered Jul 08 '15 at 13:20

Aleksandr

4,906
4
32
47

@MacaronLover, try to remove prefix `android:`. Leave only `searchViewCloseIcon` – Aleksandr Jul 08 '15 at 13:54
I now get this error: `Cannot resolve symbol 'android:searchViewCloseIcon'`. How do I resolve it? – wbk727 Jul 08 '15 at 13:55
1

Your `styles.xml`: `` In your main theme: `` – Aleksandr Jul 08 '15 at 13:59
Error's now gone but does this also need to go in styles.xml? `` – wbk727 Jul 08 '15 at 13:59
1

Of cource this should be in styles.xml not in attrs.xml – Aleksandr Jul 08 '15 at 14:00
Not use prefix `android:` and then all will be works. See at second solution, style 'MyActionBar' – Aleksandr Jul 08 '15 at 14:01
@MacaronLover, List of attrs I added to help you see all atributes. You don't need add it's to your code. You should only edit styles – Aleksandr Jul 08 '15 at 14:05
After using this code it says minimum sdk 21 required. Do I really have to change it to 21? Mine is currently at 14. Bare in mind that the activity my search view will be in is NOT the main activity: ` ` – wbk727 Jul 08 '15 at 14:13
This is one of sollutions. You don't need change minSdk to 21. I give 3 variant how to implement it. I recomend you to use second solution, if you need to support android 4+. Just copy and paste my second solution. Please, don't forget to apply `CustomActionBarTheme` to your action bar in your primary theme like this: – Aleksandr Jul 08 '15 at 14:17
Of course you may use your code, but good practice to use styles for separate content and logic of presentation. If you will work at good company, you should follow some code styles. And if you will use your code for all components, it will be hell for all, who will be read your code(And for you too after some long time). Styles helps you to create your code more clean and readable. – Aleksandr Jul 08 '15 at 14:28
Also, edit style more easy than code. And the main reason, you're not mix all code in Activity/Fragment. You edited only close icon. Just image what happens with your activity/fragment if you will be use java code to edit all UI elements? The length of code will be much much more and this is bad practice. Guys from Google simplified our life by adding styles, and I think we should be thankful for it and follow his guides – Aleksandr Jul 08 '15 at 14:36
Ok, your answer gives the best explanation hence I'll give you the points when I receive a gratification. – wbk727 Jul 08 '15 at 14:44

score 1 · Accepted Answer · answered Jul 08 '15 at 16:59

Your code seems fine. Try out the following code:

final MenuItem search = menu.findItem(R.id.action_search);
    if (search != null) {
        SearchView searchView = (SearchView) MenuItemCompat.getActionView(search);
        search.expandActionView();
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                // Your Logic
                return false;
            }
        });
        MenuItemCompat.setOnActionExpandListener(search, new MenuItemCompat.OnActionExpandListener() {
            @Override
            public boolean onMenuItemActionExpand(MenuItem item) {
                return false;
            }

            @Override
            public boolean onMenuItemActionCollapse(MenuItem item) {
                finish();
                return true;
            }
        });

One more tweak: Try the same above code in onPrepareOptionsMenu with following extra lines at the top

menu.clear();
getMenuInflater().inflate(R.menu.menu_search_list, menu);
...
// Above code

Search view close icon appearing disabled rather than white

4 Answers4

Linked