How do I change the Android search view icon color? By default color is white, is it possible to change the icon color.
I have tried:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
<item
android:id="#+id/action_search"
android:actionViewClass="android.widget.SearchView"
android:icon="#drawable/ic_theme_blue_menu"
android:showAsAction="always"
android:title="#string/search_actionbar"/>
<item
android:id="#+id/slider_menu"
android:icon="#drawable/ic_slider_menu"
android:orderInCategory="100"
android:showAsAction="always"/>
</menu>
But I need to change it in code, not in the layout file. Is it possible?
Unfortunately, there is no easy way to change the SearchView icon to a custom drawable, since the theme attribute searchViewSearchIcon is not public. Check this answer for details.
Please use android:Theme.Holo.Light.DarkActionBar as the base for your theme. Then the default icons on the action bar should have a light color.
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
...
</style>
What I do, I have create a method to change any drawable color
public Drawable changeDrawableTint(Drawable drawable, int color){
final Drawable wrappedDrawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTintList(wrappedDrawable, ColorStateList
.valueOf(color));
return wrappedDrawable;
}
, even in android versions pre lollipop, then I get the search view menu item, and call the method with the desired color
#Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
/**
* We inflate the correct activity menu
*/
getMenuInflater().inflate(R.menu.menu_partner_list, menu);
searchViewMenuItem = menu.findItem(R.id.action_search);
if(searchViewMenuItem!=null && searchViewMenuItem.getIcon()!=null){
searchViewMenuItem.setIcon(Utils.getInstance()
.changeDrawableTint(searchViewMenuItem.getIcon(),
Color.WHITE));
}
setUpSearchView(menu);
shouldHideMenuActions();
return true;
}
here is the menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView"
android:icon="#drawable/ic_search"
android:title="#string/search" />
</menu>
you could use the following code in your java class:
mView.getBackground().setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.LIGHTEN);
This line above changes the color of the view to to a share of color you suggest in Color.parseColor() and a shade like how you define it using PorterDuff.Mode. Call the above code on click of a button to check if the color change is taking effect.
Related
I can increase the ActionBar's height to its double size (by Default is action_bar_default_height = 48dp standard ActionBarSize), so, 96dp but the Icons of my ActionBarare just as little as with standard height.
In order to acquire a better understanding, I illustrate with a Picture.
Can anyone tell me, why I get left Icons properly but the associated Icons to Actions not?
How could I solve it?
That's my code
First, I define the proper ActionBarSize Height and set the proper Size through Themes-Styles of my Activity in my styles.xml like this
<style name="Theme.ActionBarSize" parent="android:Theme.Holo.Light">
<item name="android:actionBarSize">96dp</item>
</style>
Second, I declare that Theme in the proper Activity in my Manifest File
<activity android:name="com.nutiteq.advancedmap.activity.WmsMapActivity"
android:theme="#style/Theme.ActionBarSize" >
Third, I create an ActionBar Instance and I initialize it properly in onCreate Method of my Activity
...
ActionBar actionBar = getActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
actionBar.show();
...
Fourth and last one, I inflate the associated Action-Items of ActionBar in onCreateOptions(...) Method like this
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.wms_context_menu, menu);
return true;
}
My ActionBar Items are defined in the file wms_menu.xml which looks like as follows
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/videonotes"
android:showAsAction="ifRoom"
android:title="#string/vid_description"
android:icon="#drawable/ic_action_video_96" >
</item>
<item android:id="#+id/textnotes"
android:showAsAction="ifRoom"
android:title="#string/txt_description"
android:icon="#drawable/ic_action_edit_96" >
</item>
<item android:id="#+id/picnotes"
android:showAsAction="ifRoom"
android:title="#string/pic_description"
android:icon="#drawable/ic_action_camera_96" >
</item>
<item android:id="#+id/audionotes"
android:title="#string/aud_description"
android:showAsAction="ifRoom"
android:icon="#drawable/ic_action_pic_96">
</item>
<item android:id="#+id/right_drawer"
android:title="#string/right_slide_description"
android:showAsAction="ifRoom"
android:icon="#drawable/ic_drawer_96" >
</item>
</menu>
I am using appcompat library with a toolbar and I have implemented a search view in my app. But i want to remove the search view icon when its expanded.
here is my menu xml file:
<item
android:id="#+id/action_search"
android:icon="#drawable/ic_search"
android:title="#string/action_search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom|collapseActionView"/>
and this is how I inflate the menu:
getMenuInflater().inflate(R.menu.main, menu);
SearchView searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.action_search));
searchView.setQueryHint(getString(R.string.search_hint));
return super.onCreateOptionsMenu(menu);
this is what i want to remove:
This helped me to remove Search icon
searchView.setIconified(false);
If you want searchView always expanded use just this:
searchView.onActionViewExpanded();
Try this:
In your app theme, add the following line:
<item name="searchViewStyle">#style/MySearchViewStyle</item>
Add define the style at below:
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="searchHintIcon">#null</item>
</style>
try {
Field mDrawable = SearchView.class.getDeclaredField("mSearchHintIcon");
mDrawable.setAccessible(true);
Drawable drawable = (Drawable) mDrawable.get(searchView);
drawable.setBounds(0, 0, 0, 0);
} catch (Exception e) {
e.printStackTrace();
}
setBounds does the magic
The simplest way is Here... In case of AppCompat
app:iconifiedByDefault="false"
app:searchIcon="#null"
OR in other case
android:iconifiedByDefault="false"
android:searchIcon="#null"
<item android:id="#+id/menu_search"
android:icon="#drawable/action_search"
app:actionLayout="#layout/xx_layout"
app:showAsAction="always"/>
and in xx_layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.SearchView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/search_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:searchHintIcon="#null"
android:iconifiedByDefault="true" />
In your onCreateOptionsMenu
int searchPlateId = searchView.getContext().getResources()
.getIdentifier("android:id/search_src_text", null, null);
EditText searchPlate = (EditText) searchView
.findViewById(searchPlateId);
searchPlate.setHint("");
If you look at the android source code for the layout of SearchView , you will see that the search icon has a id search_mag_icon. So in onCreateOptionsMenu,
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_search,menu);
MenuItem searchViewItem = menu.findItem(R.id.search);
SearchView searchView = (SearchView)searchViewItem.getActionView();
searchView.findViewById(R.id.search_mag_icon).setVisibility(View.GONE);
}
Just find the view by id and set its visibility to gone.
For androidx and new version of SearchView:
If you add SearchView from code, it's effective for that.
Add new style in styles.xm
<style name="SearchViewMy" parent="Widget.AppCompat.Light.SearchView">
<item name="searchHintIcon">#null</item>
</style>
and applied that style in your app theme:
<style name="Theme.App" parent="Theme.AppCompat.Light.NoActionBar.FullScreen">
<item name="searchViewStyle">#style/SearchViewMy</item>
</style>
Or if you add SearchView from xml, then add this line in your layout:
app:searchHintIcon="#null"
Look into SumeetP's answer in this question. Not sure if that works because I never used it. He gets Search icon as an ImageView. So I guess you can just set image to android.R.color.transparent so that it won't be visible.
If you have a customized search view just add this in your .xml layout
app:searchIcon="#null"
app:iconifiedByDefault="false"
That's an old question, but this helped me a lot in my case: If you are trying to hide inside a menu, none of the questions posted here worked perfectly for me (Greetings for AK5T that almost solved my problem). What solved the problem was:
Instead of putting
app:actionViewClass="android.widget.SearchView"
inside the item in menu, you can change for:
app:actionLayout="#layout/search_layout"
And, inside this layout, you can add this piece of code:
<?xml version="1.0" encoding="utf-8"?>
<android.widget.SearchView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/search_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:searchHintIcon="#drawable/nothing_drawed"/>
And, finally, inside the drawable you just create it with nothing inside, example:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>
Only this method worked for me. When I tried to hide the searchHintIcon, setting to #null or anything else, it remained the same thing as if I had written no code.
I have a menu item that is showing up on android 4.x but not on 2.x. Here is my menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<item
android:id="#+id/menu_filter"
android:title="Filter"
app:showAsAction="always"/>
</menu>
This is my actionbar style
<style name="style1_actionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/blue_dark</item>
<item name="android:textColor">#color/white</item>
<item name="actionMenuTextAppearance">#color/white</item>
<item name="background">#color/blue_dark</item>
</style>
Any ideas?
Edit: removed double quote typo
Could it be the fact that I am showing only text, no icons? I'm kind of stuck here.
Whew, thanks for your help guys but I managed to figure it out. It wasn't a problem with the xml, it was a problem with the onCreateOptionsMenu function.
I was using this
new MenuInflater(getApplication()).inflate(R.menu.activity_wentry_editor, menu);
instead of this
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.activity_wentry_editor, menu);
Not entirely sure why this works but it does.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
**xmlns:yourapp="http://schemas.android.com/apk/res-auto"** >
<item android:id="#+id/action_search"
android:icon="#drawable/ic_action_search"
android:title="#string/action_search"
**yourapp**:showAsAction="ifRoom" />
</menu>
Please refer to the documentation. http://developer.android.com/guide/topics/ui/actionbar.html
Using XML attributes from the support library
Notice that the showAsAction attribute above uses a custom namespace defined in the tag. This is necessary when using any XML attributes defined by the support library, because these attributes do not exist in the Android framework on older devices. So you must use your own namespace as a prefix for all attributes defined by the support library.
In my case I had to add a few lines to onCreateOptionsMenu.
Android Studio didn't let me use android:showAsAction="ifRoom" while using appCompat.
app:showAsAction="ifRoom" wasn't working and I removed it without problems.
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu, menu);
for (int i = 0; i < menu.size(); i++) {
menu.getItem(i).setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
}
return super.onCreateOptionsMenu(menu);
}
If you want your app to support action bar below 3.0 you need to use app compact v7 from the support library.
Also check the link
Using the menu in an activity that extends the AppCompact it is necessary import the app context in the XML and use it:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- "Mark Favorite", should appear as action button if possible -->
<item
android:id="#+id/action_favorite"
android:icon="#drawable/ic_favorite_black_48dp"
android:title="#string/action_favorite"
app:showAsAction="ifRoom"/>
<!-- Settings, should always be in the overflow -->
<item android:id="#+id/action_settings"
android:title="#string/action_settings"
app:showAsAction="never"/>
</menu>
What you need to do basically is add xmlns:app="http://schemas.android.com/apk/res-auto"to the menu element in yout XML and use the showAsAction in the following format: app:showAsAction="ifRoom".
This will show the icon in the action bar, if possible.
I'm using ActionBarSherlock. I have a MenuItem, and I want to use a custom selector with only that MenuItem, not the others in the ActionBar. This is the menu code:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/menu_include_location"
android:icon="#drawable/icon_place_selector"
android:showAsAction="always"
android:title="#string/menu_include_location"/>
<item
android:id="#+id/menu_send"
android:icon="#drawable/ic_send"
android:showAsAction="ifRoom|withText"
android:title="#string/menu_send"/>
</menu>
Here is the icon_place_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/location_place" android:state_pressed="false"/>
<item android:drawable="#drawable/location_no_gradient" android:state_pressed="true"/>
</selector>
The issue is that in the MenuItem, the icon is only a small part of it. Here's a screenshot of what shows up. The entire background should change, and not just the icon. How do I do that?
You can change the selector of a particular action bar item by setting a custom ActionView in the code:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getSupportMenuInflater().inflate(R.menu.activity_main, menu);
MenuItem menuItem = menu.findItem(R.id.menu_include_location);
ImageView image = new ImageView(this);
image.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT));
image.setPadding(16, 0, 16, 0);
image.setImageResource(R.drawable.ic_launcher);
image.setBackgroundResource(R.drawable.icon_place_selector);
image.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// ...
}
});
menuItem.setActionView(image);
return true;
}
Apply these styles if you want to change the selector for all action bar items:
<style name="AppTheme" parent="#style/Theme.Sherlock">
<item name="android:selectableItemBackground">#drawable/icon_place_selector</item>
<item name="android:actionBarItemBackground">#drawable/icon_place_selector</item>
</style>
Use Actionbar style generator, to style your style and download zip file
In downloaded zip file open selectable_background_xxxx.xml (xxxx -> name given to your own style) file in "drawables" folder and change the drawable to nine-patch img or color code you want when pressed state is true.
<item android:state_pressed="true" android:drawable="#color/your_color" />
first you shall know, if you set android:selectableItemBackground in your holo style, the whole widget, i.e. a button, will have that background selector.
if you just need to change your actionbar menuitem' s icon selector background, Here is a simple answer!
just set android:actionBarItemBackground in your holo style!
<style name="AppTheme.Dark" parent="android:Theme.Holo">
<item name="android:actionBarItemBackground">#drawable/item_background_holo_light</item>
</style>
hope it helpful:-)
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?
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.
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);
}
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
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));
}
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);
Update
If you are using AndroidX then you can do it like this
View searchPlate = svSearch. findViewById(androidx.appcompat.R.id.search_plate);
if (searchPlate != null) {
AutoCompleteTextView searchText = searchPlate.findViewById(androidx.appcompat.R.id.search_src_text);
if (searchText != null){
searchText.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources().getDimension(R.dimen.edittext_text_size));
searchText.setMaxLines(1);
searchText.setSingleLine(true);
searchText.setTextColor(getResources().getColor(R.color.etTextColor));
searchText.setHintTextColor(getResources().getColor(R.color.etHintColor));
searchText.setBackground(null);
}
}
I also faced same problem.I used appcompat v7 library and defined custom style for it.
In drawable folder put bottom_border.xml file which looks like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape >
<solid android:color="#color/blue_color" />
</shape>
</item>
<item android:bottom="0.8dp"
android:left="0.8dp"
android:right="0.8dp">
<shape >
<solid android:color="#color/background_color" />
</shape>
</item>
<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="2.0dp">
<shape >
<solid android:color="#color/main_accent" />
</shape>
</item>
</layer-list>
In values folder styles_myactionbartheme.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppnewTheme" parent="Theme.AppCompat.Light">
<item name="android:windowBackground">#color/background</item>
<item name="android:actionBarStyle">#style/ActionBar</item>
<item name="android:actionBarWidgetTheme">#style/ActionBarWidget</item>
</style>
<!-- Actionbar Theme -->
<style name="ActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/main_accent</item>
<!-- <item name="android:icon">#drawable/abc_ic_ab_back_holo_light</item> -->
</style>
<style name="ActionBarWidget" parent="Theme.AppCompat.Light">
<!-- SearchView customization-->
<!-- Changing the small search icon when the view is expanded -->
<!-- <item name="searchViewSearchIcon">#drawable/ic_action_search</item> -->
<!-- Changing the cross icon to erase typed text -->
<!-- <item name="searchViewCloseIcon">#drawable/ic_action_remove</item> -->
<!-- Styling the background of the text field, i.e. blue bracket -->
<item name="searchViewTextField">#drawable/bottom_border</item>
<!-- Styling the text view that displays the typed text query -->
<item name="searchViewAutoCompleteTextView">#style/AutoCompleteTextView</item>
</style>
<style name="AutoCompleteTextView" parent="Widget.AppCompat.Light.AutoCompleteTextView">
<item name="android:textColor">#color/text_color</item>
<!-- <item name="android:textCursorDrawable">#null</item> -->
<!-- <item name="android:textColorHighlight">#color/search_view_selected_text</item> -->
</style>
</resources>
I defined custommenu.xml file for displaying menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:com.example.actionbartheme="http://schemas.android.com/apk/res-auto" >
<item android:id="#+id/search"
android:title="#string/search_title"
android:icon="#drawable/search_buttonn"
com.example.actionbartheme:showAsAction="ifRoom|collapseActionView"
com.example.actionbartheme:actionViewClass="android.support.v7.widget.SearchView"/>
Your activity should extend ActionBarActivity instead of Activity.
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
// Inflate the menu; this adds items to the action bar if it is present.
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.custommenu, menu);
}
In manifest file:
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppnewTheme" >
For more information see here:
Here http://www.jayway.com/2014/06/02/android-theming-the-actionbar/
First, let's create an XML file called search_widget_background.xml, to be used as a drawable, i.e. under drawable directory.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/red" />
</shape>
This drawable will be used as the background for our search widget. I set the color to red because that's what you asked for, but you can set it to any color defined by #color tag. You can even modify it further using the attributes defined for shape tag (make rounded corners, do an oval background, etc.).
Next step is to set the background of our search widget to this one. This can be accomplished by the following:
public boolean onCreateOptionsMenu(Menu menu) {
SearchView searchView = (SearchView)menu.findItem(R.id.my_search_view).getActionView();
Drawable d = getResources().getDrawable(R.drawable.search_widget_background);
searchView.setBackground(d);
...
}
public boolean onCreateOptionsMenu(Menu menu) {
........
// Set the search plate color
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 );
........
}
and this is the searchablecolor.xml file
<?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="18.0dp">
<shape >
<solid android:color="#2c4d8e" />
</shape>
</item>
</layer-list>
I was digging about that a lot and finally I found this solution and it works for me!
You can use this
If you use appcompat try this:
ImageView searchIconView = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
searchIconView.setImageResource(R.drawable.yourIcon);
If you use androidx try this:
ImageView searchIconView = (ImageView) searchView.findViewById(androidx.appcompat.R.id.search_button);
searchIconView.setImageResource(R.drawable.yourIcon);
It will change the default serchview icon.
Hope it helps!
I explained in the end of this post with images
this is apply for xamarin forms. But i think you can understand it, because it is based on the source code of searchview of android
How to change searchbar cancel button image in xamarin forms
If you are inflating Searchview like this "getMenuInflater().inflate(R.menu.search_menu, menu);". Then you can customize this searchview via style.xml like below.
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="searchViewStyle">#style/SearchView.ActionBar</item>
</style>
<style name="SearchView.ActionBar" parent="Widget.AppCompat.SearchView.ActionBar">
<item name="queryBackground">#drawable/drw_search_view_bg</item>
<item name="searchHintIcon">#null</item>
<item name="submitBackground">#null</item>
<item name="closeIcon">#drawable/vd_cancel</item>
<item name="searchIcon">#drawable/vd_search</item>
</style>