Search code examples
androidsearchviewandroid-4.4-kitkat

How to change icon colors in KitKat?

I have troubles to change icon colors in KitKat inside the search view.

When I click on search icon in my toolbar it becomes like this

enter image description here

After I click on this lens toolbar transforms like this

enter image description here

Could you suggest me any way to make those icons white in API 19? I can make close icon lighter with this code

  int idSearchCloseIcon = searchView.getContext()
      .getResources()
      .getIdentifier("android:id/search_close_btn", null, null);
  ImageView searchCloseIcon = (ImageView) searchView.findViewById(idSearchCloseIcon);
  searchCloseIcon.setColorFilter(Color.WHITE);

When I put search_mag_icon instead search_close_btn nothing happens at all.

Here is my menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/action_search"
        android:title="@string/toolbar_menu_search"
        android:icon="@drawable/ic_search_white_48dp"
        app:showAsAction="collapseActionView|ifRoom"
        app:actionViewClass="android.widget.SearchView" />

    <item
        android:id="@+id/action_contact"
        app:showAsAction="never"
        android:title="@string/toolbar_menu_contact"
        android:icon="@drawable/ic_contact_mail_white_48dp">
    </item>

    <item
        android:id="@+id/action_about"
        app:showAsAction="never"
        android:title="@string/toolbar_menu_about">
    </item>
</menu>
Solution

  • I'll answer to my question myself. It's not really proper solution but in works on api 19 and probably it will save a lot of time for someone.

    In onCreateOptionsMenu I added this part to avoid the view that you see on image 1 in a question

     searchView.setIconifiedByDefault(true);
 searchView.setFocusable(true);
 searchView.setIconified(false);
 searchView.clearFocus();
 searchView.requestFocusFromTouch();

    Than in the same onCreateOptionsMenu I'm looking for edit text to apply some styling. I set hint programmatically and this removes this lens icon.

     // EditText styling
 int idSearchTextView = searchView.getContext()
     .getResources()
     .getIdentifier("android:id/search_src_text", null, null);
 final EditText editText = searchView.findViewById(idSearchTextView);
 if (editText != null) {
     editText.setTextColor(getResources()
          .getColor(R.color.primaryTextColor));                
     setCursorColor(editText,getResources()
          .getColor(R.color.primaryTextColor));
     // this is done to remove icon from a hint!!!!
     editText.setHint(getString(R.string.home_search_input_hint));
 }

    In this case after you click on search button you'll see expanded toolbar like this

    enter image description here

    But if you click close icon you'll be back to

    enter image description here

    To avoid this I override on clock event of close button in onCreateOptionsMenu

     int idSearchCloseIcon = searchView.getContext()
    .getResources()
    .getIdentifier("android:id/search_close_btn", null, null);
 ImageView searchCloseIcon = (ImageView) searchView.findViewById(idSearchCloseIcon);
 // add this listener to avoid return on view with lens icon
 searchCloseIcon.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View view) {
         if(editText != null){
             editText.setText("");
         }
     }
});

    Hope it helps :)