How to change searchview icon color?

user_7258252 0
Viewed 28223

I know there's already a lot of answers for this question here, and I wouldn't be creating another thread if I hadn't already tried everything I saw here. Anyway, the question is pretty simple. I don't mind if the solution comes from XML styling or Java code (both solutions are welcome). I will show everything (most of it anyway) I've tried to solve it.

First of all, the searview icon seems to be immutable by code since I can't change anything from it. My searchview is declared in menu.xml as this

<item android:id="@+id/icon_search"
    android:title="Searchador"
    android:icon="@drawable/ic_search_black_24dp" <!-- icon not used by searchview anyway -->
    android:showAsAction="always"
    android:actionViewClass="android.widget.SearchView"
/>

and inside my onCreateOptionsMenu I have this

SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
searchMenuItem = menu.findItem(R.id.icon_search);
searchView = (SearchView) searchMenuItem.getActionView();
searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
searchView.setSubmitButtonEnabled(false);
searchView.setOnQueryTextListener(this);
MenuTint.colorIcons(this, menu, Color.BLUE);
return true;

The MenuTint.colorIcons(this, menu, Color.BLUE); I got from a special class I found here where it basically changes all my icons color, unfortunately not working for the searchview icon.

I then found some answers suggesting to use a style like this

<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
   <!-- changing my icon, its color and stuff.. -->
   <item name="searchIcon">@drawable/ic_search</item></style>

but I was getting the No resource found that matches the given name 'Widget.AppCompat.SearchView'. error.

I then found that I should add the android-support-app-compat project library instead of just the .jar. It didn't work. I mean, the import worked, but the error kept showing. Then, I found somewhere that I should change the project.properties from target=android-19 to 21 (or higher) but it didn't solved the "No resource found" error.

So I'm pretty much stuck for this simple detail where I need to change the searchview color.

Also, this is not exactly the same question, but I believe it might be solved the in the same way so I will include here: I wanted to change distance between the icons. Someone suggested this solution

<style name="ActionButtonStyle" parent="AppBaseTheme">
    <item name="android:minWidth">0dip</item>
    <item name="android:paddingLeft">0dip</item>
    <item name="android:paddingRight">0dip</item>                  
</style>

but I end up getting this

As you can see, this approach works for my custom icons only, but not for the searchview icon, neither for the menu overflow icon. I would like to change the distance between ALL icons equally.

searchview android-actionbar icons eclipse android
10 Answers

For android.x,

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    ...

    ImageView searchIcon= 
    searchView.findViewById(androidx.appcompat.R.id.search_mag_icon);

    // To change color of close button, use:
    // ImageView searchCloseIcon = (ImageView)searchView
    //        .findViewById(androidx.appcompat.R.id.search_close_btn);

    searchIcon.setColorFilter(getResources().getColor(R.color.colorPrimary),
            android.graphics.PorterDuff.Mode.SRC_IN);

    ...

    return true;

}
user_87714030

If you want to change SearchView's search icon, you just need to get the image view within the view as follow:

searchView = v.findViewById(R.id.searchView);
//change icon color
ImageView searchIcon = searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
searchIcon.setImageDrawable(ContextCompat.getDrawable(getActivity(),R.drawable.ic_search_icon));

It is important that the icon is R.id.search_button and you can replace it with a white vector asset that you provide, in this case R.drawable.ic_search_icon

Similarly, you can change the text within the SearchView as follows:

//set color to searchview
SearchView.SearchAutoComplete searchAutoComplete = searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchAutoComplete.setHintTextColor(getResources().getColorandroid.R.color.white));
searchAutoComplete.setTextColor(getResources().getColor(android.R.color.white));
user_62482080 
 final SearchView searchViewAndroidActionBar = (SearchView) MenuItemCompat.getActionView(searchViewItem);
        // change close icon color
        ImageView iconClose = (ImageView) searchViewAndroidActionBar.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
        iconClose.setColorFilter(getResources().getColor(R.color.grey));
       //change search icon color
        ImageView iconSearch = searchViewAndroidActionBar.findViewById(android.support.v7.appcompat.R.id.search_button);
        iconSearch.setColorFilter(getResources().getColor(R.color.grey));
user_62989050

To change the search view's icon color use the following lines of code:

SearchView searchView = (SearchView) findViewById(R.id.searchview);
ImageView icon = searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
icon.setColorFilter(Color.BLACK);
user_46611440

You can change or customize the icons of the SearchView by adding you're own drawable icons.

        <androidx.appcompat.widget.SearchView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:closeIcon="@drawable/close_icon"
        app:searchHintIcon="@drawable/search_icon"
        app:searchIcon="@drawable/search_icon"
        android:textStyle="bold" />
user_76680200

Use below code:

MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView mSearchView = (SearchView) searchItem.getActionView();
Drawable dr = searchItem.getIcon();
    
dr.setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_ATOP);

OR:

dr.setColorFilter(BlendModeColorFilterCompat
         .createBlendModeColorFilterCompat(Color.RED, BlendModeCompat.SRC_ATOP));
user_148453890

Take the Drawable you want to tint, wrap it with a tinted drawable , and set it as a new one for the search menu item:

@JvmStatic
fun getTintedDrawable(inputDrawable: Drawable, @ColorInt color: Int): Drawable {
    val wrapDrawable = DrawableCompat.wrap(inputDrawable.mutate())
    DrawableCompat.setTint(wrapDrawable, color)
    DrawableCompat.setTintMode(wrapDrawable, Mode.SRC_IN)
    return wrapDrawable
}

Usage:

val drawable =getTintedDrawable(...)
searchMenuItem.icon = drawable

And this should work for all Android versions that android-x (support library) supports.

user_8781260

Use below code:

ImageView searchIcon = searchView.findViewById(R.id.search_button);
searchIcon.setColorFilter(Color.WHITE);

If you want to change close icon color, use this one:

ImageView searchClose = searchView.findViewById(R.id.search_close_btn);
searchIcon.setColorFilter(Color.WHITE);
user_69307190

I have found that in later (2020) appCompat scenarios I have had trouble changing icon colors, but found this one to work:

(kotlin)


searchItem.icon.colorFilter = BlendModeColorFilterCompat.createBlendModeColorFilterCompat(Color.RED, BlendModeCompat.SRC_ATOP)
user_44752060

You can use theme in your layout

In your styles file define:

 <style name="YourAppTheme.DarkSearchViewTheme">
    <item name="colorControlNormal">#FFFFFF</item>
 </style>

Then if you use menu inflation, you can apply this theme into your activity from the manifest

Or if you explicitly use SearcView widget in your layout, you can apply it into your widget by theme attribute like this:

<androidx.appcompat.widget.SearchView
    android:theme="@style/YourAppTheme.DarkSearchViewTheme"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
user_23474860
Related