Actionbar - hiding all menu items except search field

Question

I have a menu in my actionbar with two items. After opening search view "a piece of pen" is still displayed. How can I hide it?

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:title="@string/search"
        android:icon="@drawable/ic_search"
        app:actionViewClass="android.widget.SearchView"
        app:showAsAction="ifRoom|withText" />

    <item
        android:id="@+id/edit"
        android:icon="@drawable/ic_edit"
        android:title="@string/edit"
        app:showAsAction="ifRoom|withText" />

</menu>

Actionbar:

Actionbar with search view opened:

I tried also:

app:showAsAction="collapseActionView|ifRoom"

But in this case I have:

I want to get the same what is presented in the second picture. But edit icon should be hidden or eventually displayed but as a whole.

EDIT

Based @Ahmad Alsanie answer I wrote sth like this:

SearchView view = (SearchView) menu.findItem(R.id.search).getActionView();
view.setOnQueryTextFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
    if (hasFocus) 
        menu.findItem(R.id.edit).setVisible(false);
});

And it works, but how can I restore edit icon after closing search view? I tried setOnCloseListener but unsuccessfully.

Answer 1

I did tried all the above solution's but none worked for me.The closest i got was with @ysfcyln solution but still not perfect.

So i will give my version of solution with step by step explanation

Step 1:

crucial Issue's i faced:

• searchView was not covering the whole action bar
• actionUp button was not displayed

And once i declared app:showAsAction= collapseActionView it did all the magic, i.e covered the whole action bar and gave a back button.

Note:Still other actionMenuItem's were visible. (Problem 2)

menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_add"
        android:icon="@drawable/ic_baseline_note_add_24px"
        android:title="@string/add_note"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_setting"
        android:icon="@drawable/ic_icons_settings"
        android:title="@string/action_settings"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search_24px"
        android:title="@string/search_hint"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        app:showAsAction="always|collapseActionView" />

</menu>

Step 2:

To Solve the Problem 2(Hide other menuItem's in overflow) i used MenuItem. setOnActionExpandListener.

The Code is from my project just to give idea, change according to you project's.

Activity/Fragment(below code is from a fragment):

 override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
    super.onCreateOptionsMenu(menu, inflater)
...
...
   //get all menuItem using the id in onCreateOptionsMenu()
   val searchActionMenuItem = menu.findItem(R.id.action_search)
   val settingActionMenuItem = menu.findItem(R.id.action_setting)
   val addActionMenuItem = menu.findItem(R.id.action_add)

   if (searchActionMenuItem is MenuItem) {
       searchActionMenuItem.setOnActionExpandListener(object :
       MenuItem.OnActionExpandListener {
       override fun onMenuItemActionExpand(p0: MenuItem?): Boolean {
          settingActionMenuItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_NEVER)
          addActionMenuItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_NEVER)
          return true
       }

      override fun onMenuItemActionCollapse(p0: MenuItem?): Boolean {
          activity?.invalidateOptionsMenu()
          return true
       }
      })
   }
...
...
}

Point's to be noted are:

• Use setOnActionExpandListener to check the change of SearchView state not the searchView's Listener as declared below.

  searchView.setOnSearchClickListener {  }  // Work's as expected
  searchView.setOnCloseListener {  }        // Doesn't get triggered as expected 
  

• Set the ShowAsAction of other MenuItem's to MenuItem.SHOW_AS_ACTION_NEVER inside onMenuItemActionExpand() as it will force other item's to OverFlow Menu once SearchView is expanded.(Changing Visibility of MenuItem will not do the job)

   settingActionMenuItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_NEVER)  
   addActionMenuItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_NEVER)
  

• onMenuItemActionCollapse() call's activity's invalidateOptionsMenu().The reason is to reset the Action Menu bar Back to it's original state.

That's it from me, comment below if i missed any case.

ScreenShot's:

Answer 2

@Ahmed Awad answer nice but searchView.setOnCloseListener not work so use MenuItemCompat.setOnActionExpandListener

menu_items.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"
        android:icon="@drawable/ic_action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always|collapseActionView"/>

    <item
        android:id="@+id/action_sort"
        android:title="Sort"
        android:icon="@drawable/ic_action_sort_alphabetically"
        app:showAsAction="always"/>

</menu>

Activity

@Override
    public boolean onCreateOptionsMenu(final Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_items, menu);
        MenuItem menuItem = menu.findItem(R.id.action_search);
        SearchView searchView = (SearchView) MenuItemCompat.getActionView(menuItem);
        searchView.setMaxWidth(Integer.MAX_VALUE);
        searchView.setOnQueryTextListener(this);

/*        // Hide other menu items when searchView clicked
        searchView.setOnSearchClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                menu.findItem(R.id.action_sort).setVisible(false);
            }
        });

        // Show other menu items when SearchView closed
        searchView.setOnCloseListener(new SearchView.OnCloseListener() {
            @Override
            public boolean onClose() {
                menu.findItem(R.id.action_sort).setVisible(true);
                return false;
            }
        });*/

        MenuItemCompat.setOnActionExpandListener(menuItem, new MenuItemCompat.OnActionExpandListener() {
            @Override
            public boolean onMenuItemActionCollapse(MenuItem item) {
                // Do something when collapsed
                menu.findItem(R.id.action_sort).setVisible(true);
                return true;  // Return true to collapse action view
            }

            @Override
            public boolean onMenuItemActionExpand(MenuItem item) {
                // Do something when expanded
                menu.findItem(R.id.action_sort).setVisible(false);
                return true;  // Return true to expand action view
            }
        });

        return super.onCreateOptionsMenu(menu);
    }

Answer 3

I had the same problem where I could not show the other icons correctly after hiding them. The below changes worked for me. You can give it a try.

1- Try to change the ShowAsAction to "always"

<item
        android:id="@+id/search"
        android:title="@string/search"
        android:icon="@drawable/ic_search"
        app:actionViewClass="android.widget.SearchView"
        app:showAsAction="always" />
<item
        android:id="@+id/edit"
        android:icon="@drawable/ic_edit"
        android:title="@string/edit"
        app:showAsAction="always" />

2- Use the "setOnSearchClickListener" to hide the edit control as:

SearchView searchView = (SearchView) menu.findItem(R.id.search).getActionView();
searchView.setOnSearchClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        menu.findItem(R.id.edit).setVisible(false);
    }
});

3- Use the "setOnCloseListener" to restore the hidden control as:

// Detect SearchView close
searchView.setOnCloseListener(new SearchView.OnCloseListener() {
    @Override
    public boolean onClose() {
        menu.findItem(R.id.edit).setVisible(true);
        return false;
    }
});

You will not need to call invalidate for this to work

Answer 4

First inside your onCreateOptionsMenu use this:

MenuInflater inflater = getSupportMenuInflater();
inflater.inflate(R.menu.edit, menu);
if (menu.getItem(1).isFocused()) //detect if search view has focus 
    {
        //hide only option 2 which is in this case edit pen
            menu.getItem(2).setVisible(false);
    }else{
    menu.getItem(2).setVisible(true);
    }

then use :

invalidateOptionsMenu();//to call onCreateOptionMenu again

Answer 5

Try to use for second menu app:showAsAction="never"