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>

Kironde

This is resolve here: #31094094 – Dunleavy

Answer 1

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);

Kironde

When you're able to get the actual ImageView, couldn't you just use setColorFilter() on that, instead of using a "custom" drawable? – Cuyp

Looking at my question it seems as that was the way I tried without success. Do not know why it did not work. – Kironde

Your code works for me, as far as I can see. Don't know why it doesn't work for you. – Cuyp

Ok, could be a fix in newer Android (support) versions. – Kironde

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);. – Bernie

"interested in better ones" - here you go @Kironde https://mcmap.net/q/793341/-set-searchview-clear-button-color – Wingard

Answer 2

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

Kishke

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. – Idioblast

Answer 3

Try this:

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

Assimilate

Answer 4

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
}

Renaud

Thanks for alternative solution. However, using findViewById seems shorter and safer (no hardcoded string-referense). – Kironde

Answer 5

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

Wingard

For some reason your solution doesn't work :(. I had to set the image resource for the ImageView that is inside of the SearchView. – Cinereous

Answer 6

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);

Curet