Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Actionbar - hiding all menu items except search field

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: search closed

Actionbar with search view opened: search open

I tried also:

app:showAsAction="collapseActionView|ifRoom"

But in this case I have:

collapseActionView

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.

like image 308
Bakus123 Avatar asked Sep 29 '15 09:09

Bakus123


2 Answers

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:

SS1

SS2

SS3

like image 164
Anmol Avatar answered Oct 06 '22 00:10

Anmol


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
like image 36
Ahmad Sanie Avatar answered Oct 05 '22 23:10

Ahmad Sanie