Using SearchView with AppCompatActivity Crashes UI

Question

I am trying to create an Android application with a search button in the action bar, and when the user clicks the search button, a search text box appears in the action bar, for example, in the Google Messenger application (see below).

I tried to implement it as shown below, but my application looks like this:

There are several issues with this. For example, the text reads “Search ...” using elipsis, unlike a simple “search” without elipsis, but, of course, the most important thing is that the toolbar does not have a back button, the search button is pressed too far to the left and the overflow button on the right is pushed to the side. In addition, pressing the physical return button on my device does not minimize the search, it just exists for the application.

Below is the code I used to implement the search bar. I tried installing SearchViewExpandListener as shown below so that the return button appears when the search view is expanded, however it does not work.

EDIT: I also ran the application with breakpoints in my onMenuItemActionExpand and onMenuItemActionCollapsed , and I found out that these methods are never actually called.

MainActivity.java

 import android.content.Context; import android.support.v4.view.MenuItemCompat; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.SearchView; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem; import android.widget.Toast; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayShowHomeEnabled(false); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu, menu); MenuItem searchItem = menu.findItem(R.id.action_search); SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem); // See above MenuItemCompat.setOnActionExpandListener(searchItem, new SearchViewExpandListener(this)); MenuItemCompat.setActionView(searchItem, searchView); searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String s) { Toast.makeText(MainActivity.this, "You searched " + s, Toast.LENGTH_SHORT).show(); return false; } @Override public boolean onQueryTextChange(String s) { return false; } }); return true; } // See above private class SearchViewExpandListener implements MenuItemCompat.OnActionExpandListener { private Context context; public SearchViewExpandListener (Context c) { context = c; } @Override public boolean onMenuItemActionExpand(MenuItem item) { ((AppCompatActivity) context).getSupportActionBar().setDisplayShowHomeEnabled(true); return false; } @Override public boolean onMenuItemActionCollapse(MenuItem item) { ((AppCompatActivity) context).getSupportActionBar().setDisplayShowHomeEnabled(false); return false; } } } 

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/action_search" android:title="Search" app:actionViewClass="android.support.v7.widget.SearchView" app:showAsAction="ifRoom"/> <item android:id="@+id/action_about" android:title="About" app:showAsAction="never"/> </menu> 

It also seems that it is not only I have this problem. This SearchView implementation guide has similar issues.

So what is the right way to implement the search bar in AppCompatActivity, which leads to the creation of such a search bar in Google Material Design and the like in applications like Google Messenger? I feel like I endlessly google in the past, but I can’t find anything that would help me.

Answer 1

Use the collapseActionView flag together with always in showAsAction in the View menu item

 app:showAsAction="always|collapseActionView" 

The collapseActionView flag indicates how to display the widget when the user is not interacting with it: if the widget is in the application panel, the application should display the widget as an icon. If the widget is in the overflow menu, the application should display the widget as a menu item. When a user interacts with an action view, it expands to populate the application panel.