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

Answer 1

Try this:

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

Answer 2

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
}

Answer 3

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

Answer 4

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

Answer 5

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(android.support.v7.appcompat.R.id.search_close_btn);
    searchClose.setImageResource(R.drawable.ic_clear_white_24dp);