Good Morning Sirs
I was able to reproduce the WhatsApp search bar as you can see in the image below:
For this I created two toolbars and two menus as shown below:
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/action_search"
android:icon="@drawable/ic_search"
android:title="@string/action_search"
app:showAsAction="always" />
</menu>
menu_search.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/action_filter_search"
android:icon="@drawable/ic_search"
android:title="Search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="collapseActionView|always" />
</menu>
Toolbar inside activity_main.xml
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
Toolbar inside search_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/searchtoolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
app:layout_scrollFlags="scroll|enterAlways"
android:background="@color/colorTextPrimary"
android:fitsSystemWindows="true"
app:collapseIcon="@drawable/ic_arrow_back"
app:titleTextColor="@color/colorPrimary"
/>
I implemented SearchRecentSuggestions however it was not working, doing some tests I saw that it was only working if I use the inflate in the menu_search directly in the onCreateMenuOptions, however,I end up losing the animation as it is shown in the image below:
Code Used
@Override
public boolean onCreateOptionsMenu(final Menu menu) {
getMenuInflater().inflate(R.menu.menu_search, menu);
SearchManager searchManager=(SearchManager)getSystemService(Context.SEARCH_SERVICE);
SearchView searchView = (SearchView) menu.findItem(R.id.action_filter_search).getActionView();
sView = searchView;
searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
searchView.setMaxWidth(Integer.MAX_VALUE);
return super.onCreateOptionsMenu(menu);
}
I tried to inflate the menu_search after the menu_items but also did not get the expected result.
@Override
public boolean onCreateOptionsMenu(final Menu menu) {
getMenuInflater().inflate(R.menu.menu_items, menu);
Toolbar searchTool = findViewById(R.id.searchtoolbar);
searchTool.inflateMenu(R.menu.menu_search);
Menu searchM = searchTool.getMenu();
SearchView itemS = (SearchView)searchM.findItem(R.id.action_filter_search).getActionView();
SearchManager searchManager=(SearchManager)getSystemService(Context.SEARCH_SERVICE);
sView = itemS;
itemS.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
itemS.setMaxWidth(Integer.MAX_VALUE);
return true;
}
Doing an analysis I could see that it is not registering what I am typing in SearchView because after I returned from the normal test, after registering a few words, they appeared in the design with the animation.
Is there any possibility that I can inflate the two menus or enable this registry in this second toolbar and achieve this?
Thanks for the help