CODEWITHSUNDEEP
androidandroid-support-librarysearchview
Sunkas
Sunkas

Reputation: 9590

Set SearchView clear button color

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.

Example of clear button having the color of gray instead of white

@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>

Upvotes: 14

Views: 15304

Answers (6)

Sunkas
Sunkas

Reputation: 9590

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

Upvotes: 28

Joseph Ali
Joseph Ali

Reputation: 355

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

Upvotes: 1

PrzemekTom
PrzemekTom

Reputation: 1994

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

Upvotes: 1

wbk727
wbk727

Reputation: 8408

Try this:

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

Upvotes: 5

Silvans Solanki
Silvans Solanki

Reputation: 1267

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
}

Upvotes: 1

Bea
Bea

Reputation: 158

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

Upvotes: 6

Related Questions