Android search view not behaving right on toolbar

Question

there you have the video that shows how my app actually behaves: https://www.youtube.com/watch?v=81XIdEo0lks&feature=youtu.be You see that when I click the search icon, it just moves it to the left side, then I need to click it again, then i need to click the x button 2 times before I actually get out of the search view, a complete mess. Here's how I want my search view to behave: https://www.youtube.com/watch?v=sJ-Z9G0SDhc&t

MainActivity.java (only the relevant part)

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.options_menu, menu);

        MenuItem searchItem = menu.findItem(R.id.app_bar_search);

        SearchManager searchManager = (SearchManager) MainActivity.this.getSystemService(Context.SEARCH_SERVICE);

        SearchView searchView = null;
        if (searchItem != null) {
            searchView = (SearchView) searchItem.getActionView();
        }
        if (searchView != null) {
            searchView.setSearchableInfo(searchManager.getSearchableInfo(MainActivity.this.getComponentName()));
        }

        return super.onCreateOptionsMenu(menu);
    }

options_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/app_bar_search"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="Search"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="android.widget.SearchView" />
    <item
        android:id="@+id/logout_btn"
        android:title="Log Out" />
</menu>

I want my search view to behave like the search view in that video, click on the search, the keyboard appears, you can type, you can exit. I also want to make this 3 vertical dots icon disappear when I enter the search view.

Answer 1

First declare a state variable to determine when menu item(s) needs to be hidden

boolean isHideMenuState = false;

Then reference the item(s) needed to be hidden inside onCreateOptionsMenu block

MenuItem logoutItem = menu.findItem(R.id.logout_btn);
//... initialize other menu items here

//use hidden state to define when to hide item(s)
if(isHideMenuState){
   logoutItem.setVisible(false);
  //by now the ellipses(...) should go off
  //if not try using setShowAsAction passing (SHOW_AS_ACTION_NEVER)
 }
else{ 
   logoutItem.setVisible(true);
 }

Next: Add focus change listener to your searchView

searchView.setOnQueryTextFocusChangeListener(new View.OnFocusChangeListener() { 
  @Override
public void onFocusChange(View v, boolean hasFocus) {
    // Toggle isHideMenuState when search widget has focus/no focus 
        isHideMenuState = hasFocus  
    //Tell menu to re-create itself
    invalidateOptionsMenu(); // onCreateOptionsMenu(...) is called again
    }         
 });

And lastly for the UI try changing the actionViewClass of your searchView item

 app:actionViewClass="android.support.v7.widget.SearchView"