How to change SearchView elements' color?

Question

I want to use SearchView in my project, but I have a problem with elements' color. Let me show you: its fragmentDialog where I have my SearchView

I dont need to change bg color. The next picture is for example. I want to see SearchView elements without black bg.

I have tried to

• change theme
• change style
• change tint

but nothing is working. The search icon and anoter elements still white. Maybe I'm losing something? Can I do this in XML? Please, help me.

Answer 1

In this answer I've changed colors of search icon, search hint icon, close icon, plate, query hint color, query color

view!!.findViewById<EditText>(
            searchView.context.resources.getIdentifier(
                "android:id/search_src_text",
                null,
                null
            )
        ).apply {
            setTextColor(ContextCompat.getColor(context!!, R.color.darkThemeIconColor))
            setHintTextColor(ContextCompat.getColor(context!!, R.color.colorAccent))
        }

        view!!.findViewById<ImageView>(
            searchView.context.resources.getIdentifier(
                "android:id/search_button",
                null, null
            )
        ).imageTintList = ColorStateList.valueOf(
            ContextCompat.getColor(context!!, R.color.darkThemeIconColor)
        )
        val mDrawable = SearchView::class.java.getDeclaredField("mSearchHintIcon")
        mDrawable.isAccessible = true
        val drawable = mDrawable.get(searchView) as Drawable
        drawable.colorFilter = BlendModeColorFilterCompat.createBlendModeColorFilterCompat(
            ContextCompat.getColor(context!!, R.color.darkThemeIconColor),
            BlendModeCompat.SRC_ATOP
        )
        view!!.findViewById<ImageView>(
            searchView.context.resources.getIdentifier(
                "android:id/search_close_btn",
                null, null
            )
        ).imageTintList = ColorStateList.valueOf(
            ContextCompat.getColor(context!!, R.color.darkThemeIconColor)
        )
        view!!.findViewById<View>(
            searchView.context.resources.getIdentifier(
                "android:id/search_plate",
                null, null
            )
        ).backgroundTintList = ColorStateList.valueOf(
            ContextCompat.getColor(context!!, R.color.darkThemeIconColor)
        )

Answer 2

This will help you if you want to change color of magnifying glass in Search view. if you use Material theme than this

 ImageView icon = album_search.findViewById(com.google.android.material.R.id.search_button);
        Drawable whiteIcon = icon.getDrawable();
        whiteIcon.setTint(Color.BLACK); //Whatever color you want it to be
        icon.setImageDrawable(whiteIcon);

and if Appcompact theme than just change com.google.android.material.R.id.search_button to android.support.v7.appcompat.R.id.search_button

Thats it

Answer 3

Searchview which comes with support library has features to change icons

<androidx.appcompat.widget.SearchView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:searchIcon="@drawable/ic_search"
            app:closeIcon="@drawable/ic_close_black"
            app:commitIcon=""
            app:goIcon=""
            app:searchHintIcon=""
            app:voiceIcon=""
    >

Answer 4

You can modify your search view with a costume style in `styles.xml' :

<style name="AppSearchView" parent="Widget.AppCompat.SearchView" >
    <!-- Text Size -->
    <item name="android:textSize">@dimen/textSizePrimary</item>
    <!-- Query Text Color -->
    <item name="android:textColorPrimary">@color/textColorPrimary</item>
    <!-- Hint Color -->
    <item name="android:textColorHint">@color/textColorDisabled</item>
    <!-- Icon Color -->
    <item name="android:tint">@color/textColorPrimary</item>
</style>

then use this style in your search view :

<android.support.v7.widget.SearchView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    ...
    app:theme="@style/AppSearchView" />

Answer 5

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

try with this style in your searchview,

Before expanding searchview --->

After expanding searchview --->

<android.support.v7.widget.SearchView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/search_view"
            style="@style/SearchViewStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:layout_gravity="end" />

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

Answer 6

Try to add those lines to style.

android:textColorPrimary changes text that user inputs in EditText. android:textColorSecondary changes back arrow, "remove text" cross and small search icon before the hint.

<item name="android:textColorPrimary">@color/white</item>
<item name="android:textColorSecondary">@color/white</item>

Answer 7

int searchiconId = view.getContext().getResources().getIdentifier("android:id/search_button",null,null);
ImageView imgView = (ImageView)findViewById(searchiconId);
Drawable whiteIcon = img.getDrawable();
whiteIcon.setTint(Color.RED); //Whatever color you want it to be
img.setImageDrawable(whiteIcon);

Answer 8

So, what was my problem. I used android.widget.SearchView instead of android.support.v7.widget.SearchView. I changed SearchView and after that proposed solution started to work.

If somebody can explain why styles and different things did not work or can give me a link, I'll be appreciated.

Answer 9

In this answer I assume that, the SearchView is added inside Toolbar and AppTheme is a child of Theme.AppCompat.Light.NoActionBar

<style name="AppTheme.Toolbar" parent="AppTheme">
    <!--This line changes the color of text in Toolbar-->
    <item name="android:textColorPrimary">@color/green</item>
    <!--This line changes the color of icons in toolbar (back, overflow menu icons)-->
    <item name="android:textColorSecondary">@color/green</item>
</style>

Now use the AppTheme.Toolbar as your toolbar's theme.

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    app:theme="@style/AppTheme.Toolbar" />