Changing the background drawable of the searchview widget
Solution 1
Intro
Unfortunately there's no way to set SearchView
text field style using themes, styles and inheritance in XML as you can do with background of items in ActionBar dropdown. This is because selectableItemBackground
is listed as styleable in R.stylable
, whereas searchViewTextField
(theme attribute that we're interested in) is not. Thus, we cannot access it easily from within XML resources (you'll get a No resource found that matches the given name: attr 'android:searchViewTextField'
error).
Setting SearchView text field background from code
So, the only way to properly substitute background of SearchView
text field is to get into it's internals, acquire access to view that has background set based on searchViewTextField
and set our own.
NOTE: Solution below depends only on id (android:id/search_plate
) of element within SearchView
, so it's more SDK-version independent than children traversal (e.g. using searchView.getChildAt(0)
to get to the right view within SearchView
), but it's not bullet-proof. Especially if some manufacturer decides to reimplement internals of SearchView
and element with above-mentioned id is not present - the code won't work.
In SDK, the background for text field in SearchView
is declared through nine-patches, so we'll do it the same way. You can find original png images in drawable-mdpi directory of Android git repository. We're interested in two image. One for state when text field is selected (named textfield_search_selected_holo_light.9.png) and one for where it's not (named textfield_search_default_holo_light.9.png).
Unfortunately, you'll have to create local copies of both images, even if you want to customize only focused state. This is because textfield_search_default_holo_light
is not present in R.drawable. Thus it's not easily accessible through @android:drawable/textfield_search_default_holo_light
, which could be used in selector shown below, instead of referencing local drawable.
NOTE: I was using Holo Light theme as base, but you can do the same with Holo Dark. It seems that there's no real difference in selected state 9-patches between Light and Dark themes. However, there's a difference in 9-patches for default state (see Light vs Dark). So, probably there's no need to make local copies of 9-patches for selected state, for both Dark and Light themes (assuming that you want to handle both, and make them both look the same as in Holo Theme). Simply make one local copy and use it in selector drawable for both themes.
Now, you'll need to edit downloaded nine-patches to your need (i.e. changing blue color to red one). You can take a look at file using draw 9-patch tool to check if it is correctly defined after your edit.
I've edited files using GIMP with one-pixel pencil tool (pretty easy) but you'll probably use the tool of your own. Here's my customized 9-patch for focused state:
NOTE: For simplicity, I've used only images for mdpi density. You'll have to create 9-patches for multiple screen densities if, you want the best result on any device. Images for Holo SearchView
can be found in mdpi, hdpi and xhdpi drawable.
Now, we'll need to create drawable selector, so that proper image is displayed based on view state. Create file res/drawable/texfield_searchview_holo_light.xml
with following content:
<?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>
We'll use the above created drawable to set background for LinearLayout
view that holds text field within SearchView
- its id is android:id/search_plate
. So here's how to do this quickly in code, when creating options menu:
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
// Getting SearchView from XML layout by id defined there - my_search_view in this case
SearchView searchView = (SearchView) menu.findItem(R.id.my_search_view).getActionView();
// Getting id for 'search_plate' - the id is part of generate R file,
// so we have to get id on runtime.
int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
// Getting the 'search_plate' LinearLayout.
View searchPlate = searchView.findViewById(searchPlateId);
// Setting background of 'search_plate' to earlier defined drawable.
searchPlate.setBackgroundResource(R.drawable.textfield_searchview_holo_light);
return super.onCreateOptionsMenu(menu);
}
}
Final effect
Here's the screenshot of the final result:
How I got to this
I think it's worth metioning how I got to this, so that this approach can be used when customizing other views.
Checking out view layout
I've checked how SearchView
layout looks like. In SearchView contructor one can find a line that inflates layout:
inflater.inflate(R.layout.search_view, this, true);
Now we know that SearchView
layout is in file named res/layout/search_view.xml
. Looking into search_view.xml we can find an inner LinearLayout
element (with id search_plate
) that has android.widget.SearchView$SearchAutoComplete
inside it (looks like ours search view text field):
<LinearLayout
android:id="@+id/search_plate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:orientation="horizontal"
android:background="?android:attr/searchViewTextField">
Now, we now that the background is set based on current theme's searchViewTextField
attribute.
Investigating attribute (is it easily settable?)
To check how searchViewTextField
attribute is set, we investigate res/values/themes.xml. There's a group of attributes related to SearchView
in default Theme
:
<style name="Theme">
<!-- (...other attributes present here...) -->
<!-- SearchView attributes -->
<item name="searchDropdownBackground">@android:drawable/spinner_dropdown_background</item>
<item name="searchViewTextField">@drawable/textfield_searchview_holo_dark</item>
<item name="searchViewTextFieldRight">@drawable/textfield_searchview_right_holo_dark</item>
<item name="searchViewCloseIcon">@android:drawable/ic_clear</item>
<item name="searchViewSearchIcon">@android:drawable/ic_search</item>
<item name="searchViewGoIcon">@android:drawable/ic_go</item>
<item name="searchViewVoiceIcon">@android:drawable/ic_voice_search</item>
<item name="searchViewEditQuery">@android:drawable/ic_commit_search_api_holo_dark</item>
<item name="searchViewEditQueryBackground">?attr/selectableItemBackground</item>
We see that for default theme the value is @drawable/textfield_searchview_holo_dark
. For Theme.Light
value is also set in that file.
Now, it would be great if this attribute was accessible through R.styleable, but, unfortunately it's not. For comparison, see other theme attributes which are present both in themes.xml and R.attr like textAppearance or selectableItemBackground. If searchViewTextField
was present in R.attr
(and R.stylable
) we could simply use our drawable selector when defining theme for our whole application in XML. For example:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:searchViewTextField">@drawable/textfield_searchview_holo_light</item>
</style>
</resources>
What should be modified?
Now we know, that we'll have to access search_plate
through code. However, we still don't know how it should look like. In short, we search for drawables used as values in default themes: textfield_searchview_holo_dark.xml and textfield_searchview_holo_light.xml. Looking at content we see that the drawable is selector
which reference two other drawables (which occur to be 9-patches later on) based on view state. You can find aggregated 9-patch drawables from (almost) all version of Android on androiddrawables.com
Customizing
We recognize the blue line in one of the 9-patches, so we create local copy of it and change colors as desired.
Solution 2
The above solutions may not work if you are using appcompat library. You may have to modify the code to make it work for appcompat library.
Here is the working solution for appcompat library.
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.main_menu, menu);
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.abc_ic_clear_normal);
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);
}
Solution 3
Your onCreateOptionsMenu
method must be:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.option, menu);
SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
ViewGroup v = (ViewGroup) searchView.findViewById(linlayId);
v.setBackgroundResource(R.drawable.searchviewredversion);
return super.onCreateOptionsMenu(menu);
}
where your search item is menu_search
off course
and here is the searchviewredversion
(this one is the xhdpi version): http://img836.imageshack.us/img836/5964/searchviewredversion.png
Solution 4
The solution above doesn't work with ActionBarSherlock 4.2 and therefore it's not backward compatible to Android 2.x. Here is working code which setups SearchView background and hint text on ActionBarSherlock 4.2:
public static void styleSearchView(SearchView searchView, Context context) {
View searchPlate = searchView.findViewById(R.id.abs__search_plate);
searchPlate.setBackgroundResource(R.drawable.your_custom_drawable);
AutoCompleteTextView searchText = (AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
searchText.setHintTextColor(context.getResources().getColor(R.color.your_custom_color));
}
Solution 5
I've tired to do this as well and I'm using v7.
The application was crashed when I tried to grab the searchPlate
via the getIdentifier()
so I done it this way:
View searchPlate = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
Martyn
Mobile developer - currently working at Facebook. Ex Meetup, Mozilla.
Updated on June 29, 2020Comments
-
Martyn almost 4 years
I'm trying to change the drawable that sits in the Android actionbar searchview widget.
Currently it looks like this:
but I need to change the blue background drawable to a red colour.
I've tried many things short of rolling my own search widget, but nothing seems to work.
Can somebody point me in the right direction to changing this?
-
vArDo almost 12 years@shkschneider IMHO it won't work, because background has to be set on an element inside
SearchView
(namedsearch_plate
), not onSearchView
itself. See my answer for more details. However, I have to admit, I haven't tried to use @(baba tenor)'s answer. -
VinceFR almost 12 yearsYour java code will not work, his SearchView is in the ActionBar and can't be found with the findViewById method. But the rest is correct!
-
vArDo almost 12 years@VinceFR Thanks for pointing that out. Haven't noticed it (I've focused on
SearchView
itself). Is it OK if I merge your answer (overriding onCreateOptionsMenu) into mine? -
vArDo almost 12 years@VinceFR I've moved my code from
onCreate()
method toonCreateOptionsMenu()
method as you suggested. Voted your answer up. -
Erol almost 12 yearsDidn't notice the SearchView was in ActionBar. Now it should work.
-
vArDo almost 12 years@babatenor This won't work because background for
SearchView
itself will always be below background for elements that are insideSearchView
. There's aLinearLayout
view insideSearchView
that has idsearch_plate
, that sets has this blue underline element as background. See my answer for details. So with your solution the result is blue background for the whole widget with blue underline still visible. I've tested on Jelly Bean, but I don't think SDK target version matters here. -
Erol almost 12 yearsThank you vArDo. I knew the layered structure of SearchView but I just assumed this would work (it looked logical to me at least).
-
vArDo almost 12 years@babatenor Would be great if it worked, so that all of this hackery is not necessary :)
-
Harsha M V over 11 yearswhere should i put this code ? i am trying to do this in 4.2 version of the action bar. my question stackoverflow.com/questions/13992424/…
-
Harsha M V over 11 yearsThanks a lot :D is there any way i can change the Mag icon and the Close Icon in a similar way ?
-
Harsha M V over 11 yearsis there any way to change the Search icon and the Close button in a similar way ?
-
David Vávra over 11 yearsHi, call it from onCreateOptionsMenu method. Find searchView and pass it to this method.
-
Harsha M V over 11 yearsThank you. Any idea how to remove that inline Mag symbol as shown here i.imgur.com/YvBz2.png
-
VinceFR over 11 yearsI don't know about the SherlockActionBar 4.2 But yes you can change the search icon and the close button in the same way!
-
NKijak over 11 yearsWith ABS you will be extending Theme.Sherlock or Theme.Sherlock.Light not the android themes. This means all you have to do is add an item named searchViewTextField to your apps theme definition. All done in XML no code required.
-
NKijak over 11 yearsActionbarSherlock has it's own themes and defines its own SearchView. This means you can just add an item to your theme named searchViewTextField and using the drawable definition and 9 patches above.
-
Jovan about 11 yearsHow can we change a magnifier icon? I try everything, but i can't change it... Thanks... and how to do this in sherlock action bar?
-
vArDo about 11 years@Jovan Have you created separate question for your problem?
-
Jovan about 11 yearsNo, but I figured it out...it was in xml :) Thanks anyway... But is there any way to set some image over action bar? As a tutorial (press this for sending to friends or something similar)... If you know how I will open a question... I think that this can help to others to... :)
-
vArDo about 11 years@Jovan Why don't you just create additional overlay view with that information and show it? You pretty much always know where action bar is on the screen.
-
vArDo about 11 years@Jovan BTW: asking questions as separate postings is always encouraged on SO. They have more visibility than discussions in comment :)
-
Jovan about 11 yearsI opened a new question regarding this. Here is a link: stackoverflow.com/questions/15618537/… But how to set an overlay when action bar uses the top space on layout and a fragment is displayed on the rest?!
-
vArDo about 11 years@Jovan Checkout my answer in that question.
-
Chris almost 11 yearsHi, great answer! I've a bit of trouble with that solution in landscape for a condensed ActionBar. It would be great, if you could give me some input on this: stackoverflow.com/questions/17210496/…. Thx!
-
Etienne Lawlor almost 11 yearsHey @vArDo, how come when you set the background drawable
searchPlate.setBackgroundResource(R.drawable.textfield_searchview_holo_light);
then the Holo underline appears further from the bottom of theActionBar
then the default styling? -
vArDo almost 11 years@toobsco42 Can you provide some screenshots comparing both? If 9-patches have the same dimensions there should not be any difference.
-
Etienne Lawlor almost 11 yearsI just opened the 9 patch in Gimp and realized that there is additional space underneath the underline. I cut out this area of the 9 patch and now the underline appears lower in the
ActionBar
. The 9 patch was generated with this toolhttp://android-holo-colors.com/
. -
vArDo almost 11 years@Chris I'll try to look at your questions as soon as I can. Looks interesting.
-
chuky over 10 yearsGreat answer and very well explained, +1 for that. For anyone running into the same small problem I was left over with after applying your solution, here's the hint to solve it: When using voice-search the right part of the EditText is still colored in standard Holo-blue. The ID of the LinearLayout is "submit_area" and the 9-patch-images used for that are called "textfield_search_right_selected_holo_light.9.png" and so on. So with these information one can use your solution for that as well.
-
Maveňツ about 10 yearsnice explanation buddy :) it solved my problem of hiding the searchview with colapse menu items
-
Jared Burrows over 9 yearsCheck out: stackoverflow.com/questions/8211929/… for another LayerList example.
-
1owk3y over 9 yearsDon't forget to rename file to searchviewredversion.9.png to indicate to export asset as 9-patch
-
Zen over 9 years@Jovan how did you change the mag-icon in the EditText? Could you please add an answer here explaining that as well?
-
Lavanya over 9 yearsthis doesn't work for search_mag_icon. It gives "Style contains key with bad entry: 0x01010479"
-
guy_m over 8 yearsthe search plate doesn't work for me (it does something but I can't see any change to the bottom line), but the general idea for AppCompat is very helpful