I want to disable the Mag icon displayed inside the search view component. Any idea how to reference it and remove it or replace it with another drawable ?
-
3Wonders why would some one down vote the question ?– Harsha M VDec 22, 2012 at 20:40
-
what about white line below SearchView icon - how to customize it?– AndrewSDec 13, 2013 at 13:39
-
Did you ever figure this out?– theblangAug 11, 2014 at 19:29
-
@mattblang yeah. please email me i will try to pull the code and share it– Harsha M VAug 12, 2014 at 4:55
10 Answers
Since the wording of the question does not contain any mention of ActionBarSherlock
(except for the tag) and comments have been added that the accepted answer does not work for standard and/or support library action bar, I'm posting another answer. Here is the Java code for onCreate
:
// obtain action bar
ActionBar actionBar = getSupportActionBar();
// find SearchView (im my case it's in a custom layout because of left alignment)
View v = actionBar.getCustomView();
SearchView searchView = (SearchView)v.findViewById(R.id.search_view);
ImageView icon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
// method 1: does not work persistently, because the next line
// should be probably called after every manipulation with SearchView
// icon.setVisibility(View.GONE);
// method 2: working code
icon.setAdjustViewBounds(true);
icon.setMaxWidth(0);
icon.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
icon.setImageDrawable(null);
According to this post, while using a SearchView
from the support library (android-support-v7-appcompat
in my case) with setIconifiedByDefault(false)
the icon is displayed outside edit textbox (SearchAutoComplete
). Otherwise (setIconifiedByDefault(true)
) it's displayed inside the box. The presented code is used for disabled "iconification" by default, and may require some changes to work with "iconified" search view. I don't know if the same applies to ActionBarSherlock
.
Hope this helps.
-
i'm using appcompat SearchView and i have that icon inside edit textbox and i can't make it gone. do you have some other ideas?– AndrewSJan 13, 2014 at 12:15
-
You should probably check which version your library is and look at its sources, specifically at layout file. For example, if you look at this Android sources you'll see that
search_mag_icon
is outsidesearch_plate
. With the source you can deduce which elements to "find" in your layout.– StanJan 13, 2014 at 12:36 -
i have the last version of SupportLibrary and in resources search_mag_icon is outside everywhere. may be that icon is not search_mag_icon but some icon inside SearchAutoComplete ? How can i find resources for that?– AndrewSJan 13, 2014 at 13:54
-
Well, I updated the library yesterday as well, and the code above worked for me. I suppose there can be something else specific in your project. Can you post some code and detailed explanation on what goes wrong, probably in a separate question?– StanJan 13, 2014 at 14:10
-
1
This icon is hint. So you can simply set new hint text.
int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
EditText searchPlate = (EditText) searchView.findViewById(searchPlateId);
searchPlate.setHint("Search");
If you want icon as hint text use spanable string with ImageSpan
int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
EditText searchPlate = (EditText) searchView.findViewById(searchPlateId);
searchPlate.setTextColor(getResources().getColor(R.color.search_text_color));
SpannableString string = new SpannableString(" ");
Drawable d = getResources().getDrawable(R.drawable.ic_search);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BOTTOM);
string.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
searchPlate.setHint(string);
In your theme:
<style name="Theme" parent="Your parent theme">
<item name="android:searchViewSearchIcon">@android:drawable/ic_search</item>
</style>
Edit:
searchViewSearchIcon
is a private attribute. This answer therefore does not work (on the native ActionBar).
-
3Set it to
@android:color/transparent
to remove it, or change it to what you would like. Dec 22, 2012 at 20:31 -
2omg. this is awesome. Thanks a lot. I wont have to post anymore question related to Action bar Styling :D Dec 22, 2012 at 20:43
-
1Hi @Ahmad I am using <style name="AppBaseTheme" parent="android:Theme.Holo"> <item name="android:searchViewSearchIcon">@android:color/transparent</item> </style> but it give me "No resource found that matches the given name: attr 'android:searchViewSearchIcon'"– HimanshuSep 25, 2013 at 13:17
-
33
android:searchViewSearchIcon
is private. This answer does not work at all. Nov 15, 2013 at 3:26 -
1
You have to add this line in your MenuItem android:iconifiedByDefault="@android:color/transparent"
<item
android:id="@+id/activity_home_action_search"
android:icon="@drawable/ic_action_search"
android:title="@string/activity_home_search_title"
android:iconifiedByDefault="@android:color/transparent"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always|collapseActionView" />
Or you can make programatically searchView.setIconifiedByDefault(true);
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
super.onCreateOptionsMenu(menu, inflater);
getMenuInflater().inflate(R.menu.home, menu);
MenuItem searchMenuItem = menu.findItem(R.id.activity_home_action_search);
SearchView searchView = (SearchView) searchMenuItem.getActionView();
searchView.setIconifiedByDefault(true);
}
To remove the hint search button:
mNearMeSearchBar = (SearchView) mView.findViewById(R.id.nearme_search_component_nearme_edittext);
mNearMeSearchBar.setIconifiedByDefault(false); //Removes Search Hint Icon
To change the search button drawable:
int searchImgId = getResources().getIdentifier("android:id/search_mag_icon", null, null);
ImageView v = (ImageView) mNearMeSearchBar.findViewById(searchImgId);
v.setImageResource(R.drawable.ic_compass);
You have to customize the SearchView
style like this:
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
<!-- Search button icon -->
<item name="searchIcon">@drawable/ic_arrow_back</item>
</style>
And then add it in your AppTheme
.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- your other colors and styles -->
<item name="searchViewStyle">@style/MySearchViewStyle</item>
</style>
And apply it to your search view using the tag style
:
<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/searchView"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:queryHint="@string/search_hint"
android:focusable="true"
android:focusableInTouchMode="true"
style="@style/MySearchViewStyle"
app:iconifiedByDefault="false" />
Hope it helps!
If you are using the v7 app compat library you can easily change this in the theme. In your theme that extends from an AppCompat theme just add a line like:
<item name="searchViewSearchIcon">@drawable/ic_search</item>
These lines removed the magnifying glass:
//remove search icon
mSearchView.setIconifiedByDefault(false);
ImageView icon = (ImageView) mSearchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
icon.setVisibility(View.GONE);
In your theme style include this:
<style name="YourTheme.Toolbar">
<item name="searchViewStyle">@style/YourActionBarSearch</item>
<item name="editTextColor">@color/your_ab_text_color</item>
<item name="android:textColorHint">@color/your_ab_hint_color</item>
</style>
You can now define the style of the SearchView with searchViewStyle
, and editTextColor
will set the color of the text in the search box. By setting android:textColorHint
you will also set the color of the hint, e.g. "Search...".
<style name="YourActionBarSearch" parent="@style/Widget.Holo.SearchView">
<item name="searchIcon">@drawable/ic_ab_search</item>
<item name="queryBackground">@null</item>
<item name="submitBackground">@null</item>
<item name="searchHintIcon">@null</item>
<item name="defaultQueryHint">@null</item>
<item name="closeIcon">@drawable/ic_ab_small_search_close</item>
</style>
This will style your search view as you like, more or less. The field searchIcon
is the icon in the action bar. The field searchHintIcon
is the small icon to the left of the hint in the search field, which you are asking for in your question; set it to @null
to remove the icon. The field closeIcon
is the close icon at the right side of the search field.