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.

Do you want to set icon and background color dynamically ???? — Bhavnik, Nov 24 '16 at 13:05
No, I dont. I want to set it in XML and dont touch it anymore, if it's possible — Alex Smith, Nov 24 '16 at 13:10

rahulrvp · Answer 1 · 2016-11-24T13:27:39.693

49

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

edited Nov 24 '16 at 13:27

answered Nov 24 '16 at 13:20

rahulrvp

2,006
1
19
26

But what if I use SearchView not in the Toolbar? Will it be work? – Alex Smith Nov 24 '16 at 14:27
If the `SearchView` is a menu item shown in `Toolbar` it would work. – rahulrvp Nov 25 '16 at 06:08
thanks brother.But i try with programatically but not worked – Deepak Borade Oct 07 '18 at 16:08
1

This should be accepted answer after so long time research! Thanks for the solution! – Teo Jun 21 '21 at 03:29
offtopic, the question is not about search in toolbar – user924 Oct 14 '22 at 10:18

Bhavnik · Accepted Answer · 2019-01-16T07:25:52.157

24

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>

edited Jan 16 '19 at 07:25

answered Nov 24 '16 at 13:16

Bhavnik

2,020
14
21

1

I think you are not using android.support.v7.widget.SearchView – Bhavnik Nov 24 '16 at 19:18
yea, you're right. A found it 2 hours before your ansver :D http://stackoverflow.com/a/40791256/7138308 – Alex Smith Nov 25 '16 at 15:33
1

The text color ends up being white. – Johann Jan 14 '19 at 10:30
you are not changing any colors here, offtopic – user924 Oct 14 '22 at 10:17
@user924, what do you want to do exactly? let me know. IMO it is changing color of the background for sure because I've tested it. – Bhavnik Oct 14 '22 at 13:03
@Bhavnik here is the correct answer https://stackoverflow.com/a/54273767/7767664 – user924 Oct 14 '22 at 14:29

Armin · Answer 3 · 2019-01-20T05:26:27.707

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

should be accept, we only one answer that shows how to change colors, `parent="Widget.AppCompat.SearchView"` is very important to make it all work, works fine with `` — user924, Oct 14 '22 at 10:31

score 6 · Answer 4 · answered Mar 21 '19 at 18:16

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

score 5 · Answer 5 · edited Apr 30 '17 at 12:56

5

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

edited Apr 30 '17 at 12:56

Divyang Desai

7,483
13
50
76

answered Apr 30 '17 at 12:24

TheLastBorn

69
1
2

score 5 · Answer 6 · answered May 21 '18 at 14:41

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>

score 1 · Answer 7 · answered Nov 24 '16 at 16:37

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.

score 1 · Answer 8 · answered Nov 30 '19 at 09:33

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

score 0 · Answer 9 · answered Apr 05 '20 at 20:36

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

How to change SearchView elements' color?

9 Answers9

Linked