How can i change the icon color of searchview in actionbar?

Question

This is my menu.xml

<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:icon="@drawable/search_icon"
    android:title="@string/action_search"
    app:actionViewClass="android.widget.SearchView"
    app:showAsAction="always" />

<item
    android:id="@+id/action_favorite"
    android:icon="@drawable/favorite_icon"
    android:title="@string/action_favorite"
    app:showAsAction="always" />


<item
    android:id="@+id/themes"
    android:title="@string/overflow_menu_item"
    app:showAsAction="never">

<menu>
        <item
            android:id="@+id/background1"
            android:title="Red-PinkGradient"
            />
        <item
            android:id="@+id/background2"
            android:title="Red-Gradient"
            />
        <item
            android:id="@+id/background3"
            android:title="Green-Gradient"
            />
        <item
            android:id="@+id/background4"
            android:title="Black-GreyGradient"
            />
</menu>

</item>

<item
    android:title="@string/overflow_menu_item2"
    android:id="@+id/settings"
    />

And this is my styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="actionOverflowButtonStyle">@style/overFlow</item>
    <item name="searchViewStyle">@style/CustomSearchViewStyle</item>

</style>
<style name="overFlow" parent="@style/Widget.AppCompat.Light.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_overflow_icon</item>
</style>
<style name="CustomSearchViewStyle" parent="Widget.AppCompat.SearchView">
    <item name="queryBackground">@color/white</item>
    <item name="searchIcon">@drawable/search_icon</item>
</style>

How can i change the icon color of my searchview? I tried to set the icon in my item to the drawable which is a white search icon, but i stays black. https://i.sstatic.net/G2p0x.jpg (this is what i have now, but the search icon needs to be white) https://i.sstatic.net/M26yu.jpg (what is want as result)

I want the color to be white, for the other icons it works, but not for my searchview.

A second problem is when i click the search icon, my overflow disappears which is what i want, but my favorite icon stays there, how can i make it disappear? And how can i make the close button also white, the small x icon to close the searchView. https://i.sstatic.net/EgrBp.jpg (what i have now) https://i.sstatic.net/qtDjz.jpg (what i want) How can i solve this?

Thanks in advance, -Vince

Answer 1

You need to use android.support.v7.widget.SearchView

<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
    <!-- Gets rid of the search icon -->
    <item name="searchIcon">@drawable/ic_search</item>
    <!-- Gets rid of the "underline" in the text -->
    <item name="queryBackground">@color/white</item>
    <!-- Gets rid of the search icon when the SearchView is expanded -->
    <item name="searchHintIcon">@null</item>
    <!-- The hint text that appears when the user has not typed anything -->
    <item name="queryHint">@string/search_hint</item>
</style>