I have simple question.
How I can change Toolbar's color/or theme to white when clicked on Search icon?
I want Toolbar to be White(with back arrow colored black/grey) whenever search icon is clicked. I have added SearcView (android.support.v7.widget.SearchView) in MenuItem
This
To
And then back to original Toolbar color when Back button is clicked.
In Activity/Fragment code:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.activity_menu, menu);
MenuItem searchMenuItem = menu.findItem(R.id.search);
if (searchMenuItem == null) {
return true;
}
searchView = (SearchView) searchMenuItem.getActionView();
MenuItemCompat.setOnActionExpandListener(searchMenuItem, new MenuItemCompat.OnActionExpandListener() {
#Override
public boolean onMenuItemActionExpand(MenuItem item) {
// Set styles for expanded state here
if (getSupportActionBar() != null) {
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.RED));
}
return true;
}
#Override
public boolean onMenuItemActionCollapse(MenuItem item) {
// Set styles for collapsed state here
if (getSupportActionBar() != null) {
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.BLUE));
}
return true;
}
});
return true;
}
And actual menu's xml is:
<?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/search"
android:title="#string/search_title"
android:icon="#drawable/ic_menu_search"
app:showAsAction="always|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
To change the color of back/X-buttons for expanded view add this into your styles:
<item name="colorControlNormal">#color/my_great_color</item>
To make change of the color smoother - you can animate it: Animate change of view background color on Android
I hope, it helps
Related
Solution:
The problem was due to the usage of app:showAsAction="collapseActionView|always". Replacing this with app:showAsAction="always" solved the problem.
I have a Fragment with ViewPager and the ViewPager has 3 Fragments. Each Fragment has a SearchView in its Menu Items (Displayed in the Toolbar as Menu Item). When i click on the SearchView, i get the click event in onOptionsItemSelected, but the SearchView doesn't expand. Not sure what to do.
I have set setHasOptionMenu(true) in onCreate() for all the Fragments.
Here is my current code: for each Fragment
onCreateOptionsMenu:
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
super.onCreateOptionsMenu(menu, inflater);
inflater.inflate(R.menu.menu_new, menu);
SearchManager searchManager = (SearchManager) activity.
getSystemService(Context.SEARCH_SERVICE);
searchMenuItem = menu.findItem(R.id.ic_action_search);
searchView = (SearchView) searchMenuItem.getActionView();
searchView.setSearchableInfo(searchManager.
getSearchableInfo(activity.getComponentName()));
searchView.setOnQueryTextListener(this);
}
Menu XML file:
<?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/ic_action_search"
android:icon="#drawable/ic_search_white_24dp"
android:orderInCategory="0"
android:title="Search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="collapseActionView|always" />
<item
android:id="#+id/action_list"
android:icon="#drawable/ic_action_list_white"
android:orderInCategory="1"
android:title="#string/action_list"
android:checked="true"
android:checkable="true"
app:showAsAction="never" />
<item
android:id="#+id/action_grid"
android:icon="#drawable/ic_action_grid_white"
android:orderInCategory="2"
android:title="#string/action_grid"
android:checked="false"
android:checkable="true"
app:showAsAction="never" />
<item
android:id="#+id/action_mini"
android:icon="#drawable/ic_action_grid_white"
android:orderInCategory="3"
android:title="#string/action_mini"
android:checked="false"
android:checkable="true"
app:showAsAction="never" />
</menu>
Other related code: if it helps
#Override
public boolean onQueryTextSubmit(String query) {
return false;
}
#Override
public boolean onQueryTextChange(String newText) {
mViewPagerPetitionsRecyclerViewAdapter.getFilter().filter(newText);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == R.id.action_list) {
prefs.edit().putString(Const.VIEWPAGER.VIEW_TYPE, Const.VIEWPAGER.LIST_VIEW).apply();
mStaggeredLayoutManager.setSpanCount(1);
} else if (item.getItemId() == R.id.action_grid) {
prefs.edit().putString(Const.VIEWPAGER.VIEW_TYPE, Const.VIEWPAGER.GRID_VIEW).apply();
mStaggeredLayoutManager.setSpanCount(2);
} else if (item.getItemId() == R.id.action_mini) {
prefs.edit().putString(Const.VIEWPAGER.VIEW_TYPE, Const.VIEWPAGER.MINI_VIEW).apply();
mStaggeredLayoutManager.setSpanCount(1);
}
ActivityCompat.invalidateOptionsMenu(activity);
mViewPagerPetitionsRecyclerViewAdapter.notifyDataSetChanged();
mIMainNewPetitionsListener.onLayoutChangedListener();
return super.onOptionsItemSelected(item);
}
#Override
public void onPrepareOptionsMenu(Menu menu) {
MenuItem list_item = menu.findItem(R.id.action_list);
MenuItem grid_item = menu.findItem(R.id.action_grid);
MenuItem mini_item = menu.findItem(R.id.action_mini);
String item_type = prefs.getString(Const.VIEWPAGER.VIEW_TYPE, Const.VIEWPAGER.LIST_VIEW);
if (item_type.equalsIgnoreCase(Const.VIEWPAGER.LIST_VIEW)) {
list_item.setChecked(true);
grid_item.setChecked(false);
mini_item.setChecked(false);
} else if (item_type.equalsIgnoreCase(Const.VIEWPAGER.GRID_VIEW)) {
list_item.setChecked(false);
grid_item.setChecked(true);
mini_item.setChecked(false);
} else if (item_type.equalsIgnoreCase(Const.VIEWPAGER.MINI_VIEW)) {
list_item.setChecked(false);
grid_item.setChecked(false);
mini_item.setChecked(true);
}
super.onPrepareOptionsMenu(menu);
}
I think you have to expand the action view yourself:
In onOptionsItemSelected:
if (item.getItemId() == R.id.action_search) {
item.expandActionVew();
}
I am using Appcompat v7 23.1.1. I have a fragment with ViewPager(FragmentStatePagerAdapter) loading 3 fragments. I have a SearchView with in each of these 3 fragments. When i click on the SearchView, the view didn't expand.
The problem was due to the usage of app:showAsAction="collapseActionView|always". Replacing this with app:showAsAction="always" solved the problem.
Not sure if this is a bug, but this post and this post helped me in solving this.
I don't know how to collapse a SearchView without a MenuItem and I don't know how to get a MenuItem from a ToolBar that isn't an ActionBar
It's easy enough to add a SearchView to a Toolbar:
Toolbar mToolbar = (Toolbar) toReturn.findViewById(R.id.toolbar);
mToolbar.inflateMenu(R.menu.search_menu);
menu/search_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/search"
android:icon="#drawable/ic_grey_search"
android:title="#string/filter"
app:showAsAction="always"
app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
I can get ahold of a SearchView and add an OnQueryTextListener() like so:
final SearchView searchView = (SearchView) mToolbar.findViewById(R.id.search);
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
#Override
public boolean onQueryTextSubmit(String query) {
ToastUtils.makeText("Test", Toast.LENGTH_LONG);
//MenuItemCompat.collapseActionView(searchView);
return true;
}
#Override public boolean onQueryTextChange(String newText) {return false;}
});
But, without a MenuItem I cannot call MenuItemCompat.collapseActionView(searchViewMenuItem).
Can someone let me know how to get a MenuItem from a none-ActionBar Toolbar.
EDIT
I hoped that mToolbar.collapseActionView(); was the solution, but this has no visible effect.
Hold a refrence to SearchView -> mSearchView.
Then where ever u want to collapse it just call
mSearchView.onActionViewCollapsed();
I am trying to implement a search functionality in my application.
I am trying to display search icon in toolbar, but instead of single search icon multiple icons are getting displayed. One icon is getting displayed from menu.xml file and other icon is getting displayed from the line setHasOptionsMenu(true);.
If I do not use "setHasOptionsMenu(true)" line then onOptionsItemSelectedMenu method will not get called, if I do not give search icon in menu.xml file then search icon will not get displayed. Please let me know how to come out of the issue. I am trying hard with no fruits. Please help me come out of this issue.
My current toolbar looks as shown in the image below:
My menu.xml file:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.blo.ifo.ifocusblogs.ActivityForFragments">
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
<item android:id="#+id/search"
android:title="#string/search_label"
android:icon="#mipmap/ic_menu_search"
app:showAsAction="collapseActionView|ifRoom"
app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
I had the same problem
my problem
and this was the solution that I've found:
add "menu.clear();" to "onPrepareOptionsMenu" in MainActivity
solution
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
menu.clear();
getMenuInflater().inflate(R.menu.main,menu);
MenuItem itemSearch = menu.findItem(R.id.action_search);
mSearchView = (SearchView) itemSearch.getActionView();
SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
mSearchView.setSearchableInfo( searchManager.getSearchableInfo(getComponentName()));
mSearchView.setQueryHint(getResources().getString(R.string.searchProduct));
mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
#Override
public boolean onQueryTextSubmit(String s) {
return false;
}
#Override
public boolean onQueryTextChange(String newText) {
if (TextUtils.isEmpty(newText)){
adapter.getFilter().filter("");
listview.clearTextFilter();
}else {
adapter.getFilter().filter(newText.toString());
}
return true;
}
});
return true;
}
I was trying to create an action bar search in my application, but in the expanded state the SearchView is not taking the entire action bar width( it is still showing other actions)!
So, how to make the SearchView fill the full ActionBar Area (as in GMAIL app)?
None of the above solutions worked for me. Setting the MaxWidth of the SearchView worked for me:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_search, menu);
SearchView searchView = (SearchView)menu.findItem(R.id.menu_search).getActionView();
searchView.setMaxWidth(Integer.MAX_VALUE);
Got it
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.my_swipe_tabbed, menu);
MenuItem searchViewItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) searchViewItem.getActionView();
searchView.setIconifiedByDefault(false);
ActionBar.LayoutParams params = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT);
searchView.setLayoutParams(params);
searchViewItem.expandActionView();
return true;
}
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MySwipeTabbedActivity" >
<item android:id="#+id/action_search"
android:title="Search"
android:icon="#android:drawable/ic_menu_search"
android:showAsAction="always|collapseActionView"
android:actionViewClass="android.widget.SearchView"
/>
<item android:id="#+id/action_share"
android:title="Share"
android:icon="#android:drawable/ic_menu_share"
android:showAsAction="ifRoom" />
<item android:id="#+id/action_settings"
android:title="Settings"
android:icon="#android:drawable/ic_menu_preferences"
android:showAsAction="never" />
</menu>
[Optional] Avoid the searchView from collapsing:
searchViewItem.setOnActionExpandListener(new MenuItem.OnActionExpandListener() {
#Override
public boolean onMenuItemActionExpand(MenuItem item) {
return true;
}
#Override
public boolean onMenuItemActionCollapse(MenuItem item) {
return false; //never collapse
}
});
The Answer given by #Hiep is correct i followed those steps to get my solution.but i was using ActionbarCompact lib so it take some changes to made so that i get it to work This solution is only the modified answer of Hiep if you are using appcompact
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:materialdesign="http://schemas.android.com/apk/res-auto" >
<item android:id="#+id/action_search"
android:title="search"
android:icon="#drawable/abc_ic_search_api_mtrl_alpha"
materialdesign:showAsAction="always|collapseActionView"
materialdesign:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
And in the Main Class onCreateOptionsMenu
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.my_swipe_tabbed, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
// Get the SearchView and set the searchable configuration
SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
ActionBar.LayoutParams params = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT);
searchView.setLayoutParams(params);
searchView.setIconified(false);
MenuItemCompat.expandActionView(searchItem);
return super.onCreateOptionsMenu(menu);
}
Avoid the searchView from collapsing:If u use the above method in Appcompact it will create a crash so use this solution to avoid that.
MenuItemCompat.setOnActionExpandListener(searchItem, new MenuItemCompat.OnActionExpandListener() {
/* (non-Javadoc)
* #see android.support.v4.view.MenuItemCompat.OnActionExpandListener#onMenuItemActionExpand(android.view.MenuItem)
*/
#Override
public boolean onMenuItemActionExpand(MenuItem item) {
return true;
}
/* (non-Javadoc)
* #see android.support.v4.view.MenuItemCompat.OnActionExpandListener#onMenuItemActionCollapse(android.view.MenuItem)
*/
#Override
public boolean onMenuItemActionCollapse(MenuItem item) {
return false;
}
});
Thank you
Try This Only will work and keep all other items set to ifRoom
<item
android:id="#+id/action_search"
app:actionViewClass="android.support.v7.widget.SearchView"
android:title="#string/action_search"
app:showAsAction="always"/>
Yes, I'm really late :)
But I would like to share one more alternative solution. The idea is just to hide the grouped menu items when the SearchView gets expanded.
Step 1:
Group your menu items. Please make sure showAsAction of search view item is app:showAsAction="collapseActionView|always"
<group android:id="#+id/myMenuGroup">
<item
android:id="#+id/actionSearch"
android:icon="#drawable/ic_search"
android:title="#string/search"
app:actionViewClass="android.widget.SearchView"
app:iconTint="#color/textColorVariant2"
app:showAsAction="collapseActionView|always" />
<item
android:id="#+id/actionFilter"
android:icon="#drawable/ic_filter"
android:orderInCategory="0"
android:title="#string/filter"
app:iconTint="#color/textColorVariant2"
app:showAsAction="ifRoom" />
..... </group>
Step 2: Get the menu reference in onPrepareOptionsMenu() callback
override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
super.onPrepareOptionsMenu(menu)
this.menu = menu // this.menu is a global scoped variable
return true
}
Step 3
Add MenuItem.OnActionExpandListener into your activity and implement onMenuItemActionExpand() and onMenuItemActionExpand() like below
override fun onMenuItemActionExpand(p0: MenuItem?): Boolean {
menu?.setGroupVisible(R.id.myMenuGroup, false)
return true
}
override fun onMenuItemActionCollapse(p0: MenuItem?): Boolean {
menu?.setGroupVisible(R.id.myMenuGroup, true)
return true
}
This approach will expand the SearchView completely inside the ActionBar even if there are other menu icons present
I'm having a problem with the alignment of the SearchView when it's expanded. For some reason, when collapsed it aligns rights, but when expanded it aligns left. I did everything folowing the ActionBarSherlock examples.
Here are two screenshots of the problem:
Screenshot collapsed http://img59.imageshack.us/img59/8976/.png
Screenshot expanded http://img577.imageshack.us/img577/9890/.png
I have yet to decide if I want to use ActionBar tabs. I don't want the searchView to hide them when expanded. But that's for another question. My main issue here is the alignment of the SearchView when exapanded. I want it to keep the right alignment no matter what.
Here's my onCreateOptionsMenu:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getSupportMenuInflater().inflate(R.menu.menu_main, menu);
searchMenuItem = menu.findItem(R.id.action_search);
refreshMenuItem = menu.findItem(R.id.action_refresh);
refreshMenuItem.setActionView(R.layout.refresh_progressbar);
searchMenuItem.setOnActionExpandListener(new OnActionExpandListener() {
#Override
public boolean onMenuItemActionExpand(MenuItem item) {
return true;
}
#Override
public boolean onMenuItemActionCollapse(MenuItem item) {
flightsListAdapter.getFilter().filter("");
return true;
}
});
searchView = (SearchView)searchMenuItem.getActionView();
searchView.setQueryHint(getResources().getString(R.string.search_hint));
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
#Override
public boolean onQueryTextSubmit(String query) {
searchView.clearFocus();
return true;
}
#Override
public boolean onQueryTextChange(String query) {
flightsListAdapter.getFilter().filter(query);
return true;
}
});
searchView.clearFocus();
return true;
}
And here is my menu_main.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/action_search"
android:title="#string/search"
android:icon="#drawable/ic_search"
android:showAsAction="always|collapseActionView"
android:actionViewClass="com.actionbarsherlock.widget.SearchView" />
<item
android:title="#string/date"
android:icon="#drawable/ic_compose"
android:showAsAction="always" >
<menu>
<item
android:id="#+id/menuYesterday"
android:title="Yesterday"/>
<item
android:id="#+id/menuToday"
android:title="Today"/>
<item
android:id="#+id/menuTomorrow"
android:title="Tomorrow"/>
</menu>
</item>
<item
android:id="#+id/action_refresh"
android:icon="#drawable/ic_refresh"
android:showAsAction="always"
android:title="#string/action_refresh" />
</menu>
Thank you for reading :)
Ok. Just for the sake of common knowledge, I'm answering my own question.
The trick was to remove "collapseActionView" on the SerchView. Once I removed that, the SearchView stays in place (to the right) when exanded.