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.stack.imgur.com/G2p0x.jpg (this is what i have now, but the search icon needs to be white) https://i.stack.imgur.com/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.stack.imgur.com/EgrBp.jpg (what i have now) https://i.stack.imgur.com/qtDjz.jpg (what i want) How can i solve this?

Thanks in advance, -Vince

Another solution that works with BottomAppBar: https://stackoverflow.com/a/56814085/5065312 — VasileM, Jun 28 '19 at 23:45

score 7 · Accepted Answer · answered Dec 06 '17 at 22:27

7

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>

answered Dec 06 '17 at 22:27

MezzDroid

560
4
11

so change the actionViewclass to: android.support.v7.widget.SearchView? – Vince VD Dec 06 '17 at 22:29
The icon changed to white, but the second problem is that my favorite icon still shows in the actionbar, i want it to disappear, when i click the search icon. – Vince VD Dec 06 '17 at 22:32
for changing the image of icon – ashishdhiman2007 Mar 15 '19 at 08:35

score 3 · Answer 2 · answered Jul 26 '18 at 00:37

I found another solution to override the default searchview icons color so you don't have to use a drawable.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater menuInflater = getMenuInflater();
    menuInflater.inflate(R.menu.menu, menu);
    android.support.v7.widget.SearchView searchView = (android.support.v7.widget.SearchView) menu.findItem(R.id.action_search).getActionView();
    ImageView icon = searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
    icon.setColorFilter(Color.WHITE);
    return super.onCreateOptionsMenu(menu);
}

This code changes the color of the default searchview icon.

android.support.v7.widget.SearchView searchView = (android.support.v7.widget.SearchView) menu.findItem(R.id.action_search).getActionView();
ImageView icon = searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
icon.setColorFilter(Color.WHITE);

score 1 · Answer 3 · edited Sep 18 '21 at 09:07

You can define a style for the searchview as below:

<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
    //text color
    <item name="android:editTextColor">@color/white</item>
    //icon color
    <item name="android:tint">@color/white</item>
    //cursor color
    <item name="colorAccent">@color/white</item>
    //query search icon color
    <item name="colorControlNormal">@color/sb_light_gray</item>
</style>

and call it in your xml :

<androidx.appcompat.widget.SearchView
    android:id="@+id/searchview_passage"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/SearchViewStyle />

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

3 Answers3

Linked