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

Answer 1

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

Answer 2

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 3

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 4

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

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