Set SearchView clear button color

Question

I am creating a searchview in the toolbar using onCreateOptionsMenu, but can't get the clear X button to initially be white. It becomes white when starting to type letters. It also stays white after clearing.

@Override
public boolean onCreateOptionsMenu(Menu menu)
{
    MenuInflater menuInflater = getMenuInflater();
    menuInflater.inflate(R.menu.responsible_menu, menu);
    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
    SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName())); //TODO: May not be needed?

    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener()
    {
        @Override
        public boolean onQueryTextSubmit(String query)
        {
            mAdapter.updateUIWithFilter(query);
            return false;
        }

        @Override
        public boolean onQueryTextChange(String newText)
        {
            mAdapter.updateUIWithFilter(newText);
            return false;
        }
    });

    // Does not work! Still not white.
    ImageView searchClose = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
    searchClose.setColorFilter(Color.argb(255, 255, 255, 255));

    searchClose.setAlpha(255);

    return true;
}

responsible_menu.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:appcompat="http://schemas.android.com/apk/res-auto"
      xmlns:app="http://schemas.android.com/tools">

    <item
        android:id="@+id/menu_search"
        android:title="@string/search"
        appcompat:actionViewClass="android.support.v7.widget.SearchView"
        appcompat:showAsAction="always"/>

</menu>

This is resolve here: https://stackoverflow.com/questions/31093594/search-view-close-icon-appearing-disabled-rather-than-white/46450639#46450639 — Vic, Sep 29 '17 at 06:12

score 28 · Accepted Answer · edited Aug 15 '21 at 17:22

28

Found a solution. However, interested in better ones.

Downloaded the "clear button" image from https://www.google.com/design/icons/#ic_clear in 24pt white and added this code to the end of onCreateOptionsMenu

    // Does help!
    ImageView searchClose = (ImageView) searchView.findViewById(androidx.appcompat.R.id.search_close_btn);
    searchClose.setImageResource(R.drawable.ic_clear_white_24dp);

edited Aug 15 '21 at 17:22

Xam

263
2
7
19

answered Aug 24 '15 at 09:21

Sunkas

9,542
6
62
102

1

When you're able to get the actual `ImageView`, couldn't you just use `setColorFilter()` on that, instead of using a "custom" drawable? – Boris Oct 13 '16 at 12:50
Looking at my question it seems as that was the way I tried without success. Do not know why it did not work. – Sunkas Oct 13 '16 at 13:35
Your code works for me, as far as I can see. Don't know why it doesn't work for you. – Boris Oct 19 '16 at 06:59
Ok, could be a fix in newer Android (support) versions. – Sunkas Oct 19 '16 at 09:23
Thanks a lot. But the way you used for getting `searchClose` object, returned `null` in my case. I corrected it by changing it to: `((ImageView) searchView.findViewById(searchView.getContext().getResources().getIdentifier("an‌droid:id/search_clos‌e_btn", null, null))).setImageResource(R.drawable.ic_clear_white_24dp);`. – Mir-Ismaili Dec 21 '17 at 12:35
"interested in better ones" - here you go @Sunkas https://stackoverflow.com/a/63039061/1714102 – PrzemekTom Jul 28 '20 at 12:57

score 5 · Answer 2 · answered Nov 03 '16 at 17:59

You can also set it from XML. I'm using the support library 24.2.1 and an activity with a theme whose parent is "Theme.AppCompat.Light" and an android.support.v7.widget.SearchView in the ActionBar.

You can set an actionBarWidgetTheme in your activity theme like this:

<style name="ActivityTheme" parent="Theme.AppCompat.Light">
    <item name="actionBarWidgetTheme">@style/MyActionBarWidgetTheme</item>
</style>

And then define MyActionBarWidgetTheme and set the colours you want there:

<style name="MyActionBarWidgetTheme">
    <item name="android:textColorSecondary">@android:color/white</item>
</style>

android:textColorSecondary applies to the close icon
android:textColorPrimary applies to the text you enter
colorControlActivated applies to the cursor
android:textColorHint applies to the hint text

This has worked really well for me, and is the best solution as it doesn't rely on internal Android identifiers to fetch the view references which could change in future platform implementations. — Martin, Nov 22 '19 at 13:36

score 5 · Answer 3 · answered Nov 02 '18 at 14:14

5

Try this:

    ImageView searchClose = searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
    searchClose.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_ATOP);

answered Nov 02 '18 at 14:14

wbk727

8,017
12
61
125

score 1 · Answer 4 · edited Oct 03 '18 at 12:27

You can use your own custom icon in place of searchview default cancel icon.

I have used below code which works well, Hope that will work for you.

private void setCloseSearchIcon(SearchView searchView) {
        try {
            Field searchField = SearchView.class.getDeclaredField("mCloseButton");
            searchField.setAccessible(true);
            ImageView closeBtn = (ImageView) searchField.get(searchView);
            closeBtn.setImageResource(R.drawable.ic_close);

        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }

This will work above api level 14.

Kotlin

private fun configureCloseButton(searchView: SearchView) {
    val searchClose =  searchView.javaClass.getDeclaredField("mCloseButton")
    searchClose.isAccessible = true
    val closeImage = searchClose.get(searchView) as ImageView
    closeImage.setImageResource(R.drawable.arrow_back_gray) // your image here
}

Thanks for alternative solution. However, using `findViewById` seems shorter and safer (no hardcoded string-referense). — Sunkas, Nov 19 '15 at 12:56

score 1 · Answer 5 · answered Jul 22 '20 at 16:36

There's much better solution. As explained in https://android-developers.googleblog.com/2014/10/appcompat-v21-material-design-for-pre.html "SearchView Widget" part, just use this:

<style name=”Theme.MyTheme” parent=”Theme.AppCompat”>
    <item name=”searchViewStyle”>@style/MySearchViewStyle</item>
</style>
<style name=”MySearchViewStyle” parent=”Widget.AppCompat.SearchView”>
    <!-- Background for the search query section (e.g. EditText) -->
    <item name="queryBackground">...</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">...</item>
</style>

closeIcon is what you're looking for.

Example of customized close icon (just change fillColor):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#ffffff"
        android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>
</vector>

I tested it on official configuration based on Searchable Activity with specific manifest and options_menu file with app:actionViewClass="androidx.appcompat.widget.SearchView": https://developer.android.com/training/search/setup

For some reason your solution doesn't work :(. I had to set the image resource for the ImageView that is inside of the SearchView. — Xam, Aug 15 '21 at 02:28

score 1 · Answer 6 · answered Apr 27 '21 at 10:22

for android x

ImageView ivClose = searchView.findViewById(androidx.appcompat.R.id.search_close_btn);

change the res img

ivClose.setImageResource(R.drawable.ic_clear_white_24dp);

or just change the tint

ivClose.setColorFilter(ContextCompat.getColor(mContext, R.color.white), android.graphics.PorterDuff.Mode.SRC_IN);

Set SearchView clear button color

6 Answers6

Linked