I am using an menu in action bar with a SearchView in it , the xml defined as:
<item
android:id="#+id/search"
android:orderInCategory="1"
android:showAsAction="ifRoom"
android:icon="#drawable/search"
android:onClick="search"
android:actionViewClass="android.widget.SearchView"
android:title="search"
/>
but from the attached image(the first menu and the 3rd menu has the same image), the search image which should has the white color as the left icon has another background color similiar to light gray. Could any one tell me how to solve this?
I'm not sure what the solution is, but I can tell you why it is happening. The SearchView uses its own icon to display on the action bar. So, when you set the icon in the XML it gets overriden by the default SearchView icon. I'd be interested in anyone's answer to this because this is a problem I actually ran into myself without being able to find an answer.
Related
I forked a GitHub project from https://github.com/nglauber/playground/tree/master/android/DemoSearch
I would like to set the color of the search icon to be pure white. At the moment, the search icon is gray in color, and is obviously different from the white text of "Demo Search".
Edit:
Based on some suggestions, I created a new icon using pure white (to be exact, RGB=255,255,255), and use it in place of the android:ic_menu_search. Android will tint it with a gray tone (verified with color picker tool on the screenshot), even though the original icon is in pure white.
This suggests to me that Android is tinting the icon on purpose. And I hope there is some way I can have the control to set or change the icon color in the Android Toolbar.
I found the answer to my own question. I decided to document it so it will be able to help other Android developers.
The short answer is yes, we can maintain the icon color in the Android Toolbar, and we need to do it by importing the resource through
SVG, or
PNG with icon type as Launcher Icons
The original problem that I encountered was due to
PNG with icon type as Action Bar and Tab Icons
In this setting, Android Studio Image Asset will change the icon color a little for some unknown reason when it saves to the res project folder. And Android will further change the icon color when it is finally displayed on the screen. The end result was what I described in the question, where the originally pure white icon will turn and become gray in color.
If we use SVG or PNG with icon type as Launcher Icons, there will be NO color change to the icon. The icon will be able to retain its original color. This makes me believe it is a bug in Android Studio rather than a design guideline assistance.
Similar observation is reported in this Stack Overflow post. #markj reported "the resulting images are just useless gray shapes".
The resulting Android environment screenshots
Color maintained
(SVG)
(PNG as Launcher Icons)
Color changed
(PNG as Action Bar and Tab Icons)
You have to make white icon and add it in menu_search.xmlin res/menu` file.
Currently its android:icon="#android:drawable/ic_menu_search". But you can use your own icon here. You can then write it as android:icon="#drawable/ic_menu_search" in res/menu file.
You have to use menu. Add searchView as an item in 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/menu_search"
android:title="Search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom"
android:orderInCategory="1"
android:menuCategory="secondary"
android:visible="true"
/>
</menu>
And in your activity Override this method
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
menuItem = menu.findItem(R.id.menu_search);
searchView = (SearchView) MenuItemCompat.getActionView(menuItem);
searchView.setIconifiedByDefault(true);
//get search icon View and set your drawable
ImageView icon = (ImageView)searchView.findViewById(R.id.search_button);
icon.setImageDrawable(ContextCompat.getDrawable(getActivity(), R.drawable.ic_search_white_24dp));
return true;
}
You just need to change to using SearchView class from support library
<item
android:id="#+id/action_search"
android:icon="#drawable/ic_search_white_24dp"
android:orderInCategory="2"
android:title="Search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always" />
The buttons on the action bar on this tablet, if shown with text, suffer from text warping as in the screenshot below:
I tried many possible settings combinations (ifRoom, always, withText,...). Even attempting to manipulate the actual view of the button get me nowhere (or maybe I didn't persevere enough). Setting the widths of the TextView and the parent LinearLayout had no effect unless they're fixed numbers.
Any ideas?
EDIT:
I neglected to mention that attempting to use an icon along with text only shows the icon. This is using the native action bar. Below is the xml of the action button above:
<item
android:id="#+id/itemConfig"
android:showAsAction="ifRoom|withText"
android:title="Network Config"
android:visible="true"/>
Setting the menu item in the following manner:
<item
android:id="#+id/itemConfig"
android:icon="#drawable/ic_action_networkconfig"
android:showAsAction="ifRoom|withText"
android:title="#string/network_config"
android:visible="true"/>
causes this
So in essence, the tablet doesn't like text in its action bar. Any clues?
It looks like your menu code is correct. For reference check my menu item 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/itemConfig"
android:icon="#drawable/icon"
app:showAsAction="withText|always"
android:title="#string/network_config"/>
</menu>
Device will show text with icon only if we have space. You can check with landscape mode. Here is the example
Source:
http://developer.android.com/guide/topics/ui/actionbar.html#ActionItems
If your menu item supplies both a title and an icon—with the title and icon attributes—then the action item shows only the icon by default.
If you want to display the text title, add "withText" to the showAsAction attribute.
Note: The "withText" value is a hint to the action bar that the text title should appear. The action bar will show the title when possible, but might not if an icon is available and the action bar is constrained for space.
Long story short, it couldn't be done :)
I am trying to achieve a uniform action bar across my app. I am currently trying to add a search widget. My app displays the magnifying glass, another icon, and the overflow menu icon in its actionbar.
I haven't yet added any search functionality I am just trying to get the icon to display how I want it.
The problem I have is that on my launch page the magnifying glass is displayed, and if clicked the field for entering a search term appears.
If the user then goes to another activity the magnifying glass will still appear in the action bar but if clicked nothing will happen. The only difference is that other activities display the "Up" arrow to the left of the android logo in the action bar but I don't think this is the reason the search widget isn't working.
How can I fix this so the user can enter a search term from any page?
Below is my xml code:
<item android:id="#+id/action_search"
android:icon="#drawable/ic_action_search"
android:title="#string/search_title"
android:showAsAction="collapseActionView|always"
app:showAsAction="always"
android:actionViewClass="android.widget.SearchView" />
My onPrepareOptionsMenu(), onCreateOptionsMenu() and onOptionsItemSelected() are all identical in every activity and since they work for the main page I believe the problem lies within this xml file.
I would prefer if the search would display always rather than moving into the overflow menu.
Thanks for your time
Just found a solution, I am using the support library for compatibility so I needed to use:
<item android:id="#+id/action_search"
android:icon="#drawable/ic_action_search"
android:title="#string/search_title"
android:showAsAction="collapseActionView|always"
app:showAsAction="collapseActionView|always"
app:actionViewClass="android.widget.SearchView"
android:actionViewClass="android.widget.SearchView" />
(I needed to add app:actionViewClass). I used this explanation to help me
https://stackoverflow.com/a/22829368/3707803
I'm having a problem when I try to set one item in my actionbar as always visible and 4 more icons as dropdown items with the following layout:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/search_movies"
android:icon="#drawable/action_search"
android:showAsAction="always"
android:title="Search"/>
<item
android:id="#+id/movies"
android:icon="#drawable/action_video"
android:showAsAction="collapseActionView"
android:title="Movies"/>
<item
android:id="#+id/theaters"
android:icon="#drawable/action_location_map"
android:showAsAction="collapseActionView"
android:title="Theaters"/>
<item
android:id="#+id/preferences"
android:icon="#drawable/action_settings"
android:showAsAction="collapseActionView"
android:title="Preferences"/>
<item
android:id="#+id/contact"
android:icon="#drawable/action_about"
android:showAsAction="collapseActionView"
android:title="Contact"/>
</menu>
The result is just the first item showing and the rest are not visible, not even as a dropdown. This is using ActionBarSherlock and a 2.3 Android device.
The question is, how can I get the icons to follow this layout:
EDIT:
The problem I had was because when you are using the actionbar with a device that has a "menu" hardware button the 3-dot dropdown does not shows off, the 4 other items are only displayed if you press the menu hardware button. Does anyone knows if this behaviour can be modified?
Hmmm, maybe I misunderstood, but if you wish to places those remaining four items into the overflow action menu (the 3-dot icon) then using android:showAsAction="never" instead of "collapseActionView" should do it.
...Tried a couple ways, but this did the trick:
Force overflow menu in ABS
I've met the same problem and my solution is quite simple. (I didn't use HoloEverywhere.)
The idea comes from the ABS sample project, whose drop-down menu can be displayed on pre-4.0 devices as well by using a submenu. So, my idea is using a submenu to disguise the 3-dot icon. Here's the code:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
SubMenu sub = menu.addSubMenu("More");
sub.getItem().setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
sub.getItem().setIcon(R.drawable.ic_menu);
getSupportMenuInflater().inflate(R.menu.activity_main, sub);
return true;
}
Since the "More" menu doesn't have a MenuItem.SHOW_AS_ACTION_WITH_TEXT attribute, so the word "More"(or whatever you named) will actually not be displayed on the action bar. The only displayed icon R.drawable.ic_menu can be copied from ABS source code res/drawable-xxdpi folders named "abs__ic_menu_moreoverflow_normal_holo_dark.png", which is the so-called 3-dot icon. And the R.menu.activity_main is your menu xml.
It works!
In the Gmail app, the search bar moves all the way to the left when you click on the search icon. Does anyone know how to recreate this effect? The current way I have it, the icon expands when clicked, but doesn't move to the left like the Gmail app. Here is my menu xml file:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menu_search"
android:title="Search"
android:icon="#drawable/ic_menu_search"
android:showAsAction="ifRoom"
android:actionViewClass="android.widget.SearchView"
/>
</menu>
Take a look at this SO Question and see if that is what you're referring to:
Contextual Action Bar in Honeycomb
and
Contextual Action Bar in Honeycomb
The Gmail app seems to simply have a search icon in the menu and when you click on this it will add SearchView as the current navigation view with getActionBar.setCustomView().
There are a few gotchas when doing this, for example handling when it should be removed etc but if handled well it can lead to a nice user experience. But it may not be worth the hassle though, the regular expandable SearchView should be sufficient for most applications.