Styling a SearchView in Android Action Bar

Question

I have a search widget in my Action Bar like this:

Search Widget in Action Bar

(1) How do I change the color of the text that says "iPhone"?

(2) Also, if you notice the gray X -- the entire Search Widget is that color as well when it is in an icon position. I am on Holo.Theme.Light and utilizing my own mods to it.

How do I change these two styles for the widget in my styles.xml file (assuming that is where you make the changes for a search widget)?

1. What does *in an icon position* mean? 2. What do you really want to change in (2)? Color of X? Color of underline? Both? — vArDo, Jul 26 '12 at 15:27
hey this is old and I solved it - sort of. I put the answer down below. I wanted to change color of text and X mostly. In an icon position is just magnifying glass in the action bar. You click on it and it opens up like you see above. — TheLettuceMaster, Jul 26 '12 at 16:04
http://stackoverflow.com/posts/12942258/edit It's a dirty hack but it work — Pongpat, Oct 17 '12 at 20:03
@KickingLettuce can u pls tell me r u using custom actionbar layout ? how u show icon image on left ? — Erum, Sep 02 '15 at 08:44

score 50 · Answer 1 · edited Jul 22 '20 at 21:43

I have been spending many time for this but finally: :-)

To change the text color :

((EditText)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text)).setTextColor(Color.WHITE);

or this one for AndroidX:

((EditText)searchView.findViewById(androidx.appcompat.R.id.search_src_text)).setTextColor(Color.WHITE);

To change the text hint:

((EditText)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text)).setHintTextColor(Color.WHITE);

or this one for AndroidX:

((EditText)searchView.findViewById(androidx.appcompat.R.id.search_src_text)).setHintTextColor(Color.WHITE);

Abdul Rahman · Answer 2 · 2014-01-23T08:19:18.157

If you're using appcompat library, then the solution is a bit different from Jerome's answer. Here's my solution

@Override
public boolean onCreateOptionsMenu(Menu menu)
{
    getMenuInflater().inflate(R.menu.main_menu, menu);
    restoreActionBar();

    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
    MenuItem searchMenuItem = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchMenuItem);
    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));

    SearchView.SearchAutoComplete searchAutoComplete = (SearchView.SearchAutoComplete)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    searchAutoComplete.setHintTextColor(Color.WHITE);
    searchAutoComplete.setTextColor(Color.WHITE);

    View searchplate = (View)searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
    searchplate.setBackgroundResource(R.drawable.texfield_searchview_holo_light);

    ImageView searchCloseIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
    searchCloseIcon.setImageResource(R.drawable.clear_search);

    ImageView voiceIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_voice_btn);
    voiceIcon.setImageResource(R.drawable.abc_ic_voice_search);

    ImageView searchIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
    searchIcon.setImageResource(R.drawable.abc_ic_search);


    return super.onCreateOptionsMenu(menu);
}

We are lazy and don't like following links. Please include the solution in your answer, not just a link. — mhlester, Jan 22 '14 at 18:55
Most of this comes out of the abc_search_view.xml file in the appcompat. Hope someone fines this helpful. — LEO, May 21 '14 at 20:41
Where you able to actually change the `search_mag_icon`? I can change everything except that. — theblang, Aug 14 '14 at 15:41

score 13 · Answer 3 · edited May 23 '17 at 10:30

You can change the style of the searchview. Here is some code I used to tweak the edittext, the voice icon...

SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);

        SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
        searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));

        int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
        searchView.findViewById(searchPlateId).setBackgroundResource(R.drawable.textfield_search_selected);

        int voiceSearchPlateId = searchView.getContext().getResources().getIdentifier("android:id/submit_area", null, null);
        searchView.findViewById(voiceSearchPlateId).setBackgroundResource(R.drawable.textfield_search_right_selected);

        // change hint color
        int searchTextViewId = searchView.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
        TextView searchTextView = (TextView) searchView.findViewById(searchTextViewId);
        searchTextView.setHintTextColor(getResources().getColor(R.color.light_grey));

[edit] A more complete answer is available here : Changing the background drawable of the searchview widget

How can I find these ids? I want to change the magnifier icon and the "x" to a dark color. — Victor Basso, Jan 03 '14 at 13:58
+1. This helped me. But instead of using getIdentifier, you could just use ids in case of ABS. `searchView.findViewById(R.id.abs__search_plate).setBackgroundResource(R.drawable.myBackground);` Similarly you can use for submit area and search src text also — Rahul Sainani, Apr 18 '14 at 15:30

score 9 · Accepted Answer · answered Dec 17 '12 at 18:54

9

You would have to set

searchView.setBackgroundColor(Color.WHITE);

SearchViews are not so customizable.

answered Dec 17 '12 at 18:54

lokoko

5,785
5
35
68

Very interesting, need to try this. I did solve it with a workaround weeks ago... but this is very good to know. upvote. – TheLettuceMaster Dec 17 '12 at 19:19

score 9 · Answer 5 · answered Sep 15 '15 at 07:13

As of Lollipop you can style search view like this from blog post http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html

values/themes.xml:
<style name=”Theme.MyTheme” parent=”Theme.AppCompat”>
    <item name=”searchViewStyle”>@style/MySearchViewStyle</item>
</style>
<style name=”MySearchViewStyle” parent=”Widget.AppCompat.SearchView”>
    <!-- Background for the search query section (e.g. EditText) -->
    <item name="queryBackground">...</item>
    <!-- Background for the actions section (e.g. voice, submit) -->
    <item name="submitBackground">...</item>
    <!-- Close button icon -->
    <item name="closeIcon">...</item>
    <!-- Search button icon -->
    <item name="searchIcon">...</item>
    <!-- Go/commit button icon -->
    <item name="goIcon">...</item>
    <!-- Voice search button icon -->
    <item name="voiceIcon">...</item>
    <!-- Commit icon shown in the query suggestion row -->
    <item name="commitIcon">...</item>
    <!-- Layout for query suggestion rows -->
    <item name="suggestionRowLayout">...</item>
</style>

Is there a way to use the styling for search view pre lollipop? For instance like KitKat? — Red M, Aug 04 '16 at 17:07

score 4 · Answer 6 · edited Mar 30 '16 at 21:06

SearchView searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.search));
searchView.setSubmitButtonEnabled(true); // to enable submit button

ImageView b = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_go_btn);
b.setImageResource(android.R.drawable.ic_menu_search); //to change submit button icon

TextView a=(TextView) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
a.setTextColor(...); //to change color of search text

score 3 · Answer 7 · answered Jul 26 '12 at 16:02

3

The way I solved this was by using Holo.Light.DarkActionBar theme. I don't believe you can easily change the search widget otherwise.

answered Jul 26 '12 at 16:02

TheLettuceMaster

15,594
48
153
259

3

Actually, you can set text color of `EditText` in `SearchView`. However, as you've mentioned, it's not as easy as using XML style definitions. You can even set color of the underline. See [my answer](http://stackoverflow.com/questions/11085308/changing-the-background-drawable-of-the-searchview-widget) to other about `SearchView` customization. – vArDo Jul 26 '12 at 16:11
1

This is the best way to do this in my opinion. – Clive Jefferies Jun 30 '14 at 16:09

score 2 · Answer 8 · answered Oct 31 '14 at 19:35

in onCreateOptionsMenu :

int id = searchView.getContext()
                   .getResources()
                   .getIdentifier("android:id/search_src_text", null, null);
    TextView textView = (TextView) searchView.findViewById(id);
    textView.setTextColor(Color.WHITE);

score 0 · Answer 9 · answered May 14 '14 at 11:32

0

If you want white text, you should extend from an Action Bar theme that has a black background like Holo.Theme or Theme.AppCompat.Light.DarkActionBar if you're using the support library.
No other settings necessary.

answered May 14 '14 at 11:32

Mehdiway

10,337
8
36
68

score 0 · Answer 10 · answered Dec 30 '14 at 14:44

@Override
    public boolean onCreateOptionsMenu(Menu menu) {

        super.onCreateOptionsMenu(menu);

        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);

        // Associate search configuration with the SearchView
        SearchManager searchManager =
               (SearchManager) getSystemService(Context.SEARCH_SERVICE);
        SearchView searchView =
                (SearchView) menu.findItem(R.id.search).getActionView();
        searchView.setQueryHint("Client/DOB/PPSN");
        searchView.setSearchableInfo(
                searchManager.getSearchableInfo(getComponentName()));

        // Setting the textview default behaviour properties
        int id = searchView.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
        TextView textView = (TextView) searchView.findViewById(id);
        textView.setTextColor(Color.WHITE);
        textView.setHintTextColor(Color.WHITE);

        // Set the search plate color to white
        int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
        View view = searchView.findViewById(linlayId);
        Drawable drawColor = getResources().getDrawable(R.drawable.searchcolor);
        view.setBackground( drawColor );
        return super.onCreateOptionsMenu(menu);

    }

Now this is the xml file searchcolor.xml for changing the plate color of search bar

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
      <shape >
          <solid android:color="#ffffff" />
      </shape>
  </item>

  <!-- main color -->
  <item android:bottom="1.5dp"
      android:left="1.5dp"
      android:right="1.5dp">
      <shape >
          <solid android:color="#2c4d8e" />
      </shape>
  </item>

  <!-- draw another block to cut-off the left and right bars -->
  <item android:bottom="10.0dp">
      <shape >
          <solid android:color="#2c4d8e" />
      </shape>
  </item>
</layer-list>

and menu/menu.xml for creating the search in action bar

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@+id/search"
          android:icon="@drawable/search"
          android:showAsAction="ifRoom"
          android:actionViewClass="android.widget.SearchView" />

</menu>

score 0 · Answer 11 · answered Dec 09 '15 at 14:23

Get SearchView in your xxxActivity.java file and then:

SearchView searchView = (SearchView)menu.findItem(R.id.my_search_view).getActionView();
int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);

// Getting the 'search_plate' LinearLayout.
View searchPlate = searchView.findViewById(searchPlateId);
searchPlate.setBackgroundResource(R.drawable.textfield_searchview);

Create file res/drawable/texfield_searchview.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"
        android:drawable="@drawable/textfield_search_selected_holo_light" />
    <item android:drawable="@drawable/textfield_search_default_holo_light" />
</selector>

Styling a SearchView in Android Action Bar

11 Answers11

Linked