How to make the Action Bar SearchView fill Entire action bar?

Question

I was trying to create an action bar search in my application, but in the expanded state the SearchView is not taking the entire action bar width( it is still showing other actions)!

So, how to make the SearchView fill the full ActionBar Area (as in GMAIL app)?

Answer 1

Yes, I'm really late :) But I would like to share one more alternative solution. The idea is just to hide the grouped menu items when the SearchView gets expanded.

Step 1: Group your menu items. Please make sure showAsAction of search view item is app:showAsAction="collapseActionView|always"

<group android:id="@+id/myMenuGroup">
    <item
        android:id="@+id/actionSearch"
        android:icon="@drawable/ic_search"
        android:title="@string/search"
        app:actionViewClass="android.widget.SearchView"
        app:iconTint="@color/textColorVariant2"
        app:showAsAction="collapseActionView|always" />

    <item
        android:id="@+id/actionFilter"
        android:icon="@drawable/ic_filter"
        android:orderInCategory="0"
        android:title="@string/filter"
        app:iconTint="@color/textColorVariant2"
        app:showAsAction="ifRoom" />

        ..... </group>

Step 2: Get the menu reference in onPrepareOptionsMenu() callback

override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
    super.onPrepareOptionsMenu(menu)
    this.menu = menu // this.menu is a global scoped variable
    return true
}

Step 3 Add MenuItem.OnActionExpandListener into your activity and implement onMenuItemActionExpand() and onMenuItemActionExpand() like below

override fun onMenuItemActionExpand(p0: MenuItem?): Boolean {
    menu?.setGroupVisible(R.id.myMenuGroup, false)
    return true
}

override fun onMenuItemActionCollapse(p0: MenuItem?): Boolean {
    menu?.setGroupVisible(R.id.myMenuGroup, true)
    return true
}

This approach will expand the SearchView completely inside the ActionBar even if there are other menu icons present

Answer 2

Try This Only will work and keep all other items set to ifRoom

<item
    android:id="@+id/action_search"
    app:actionViewClass="android.support.v7.widget.SearchView"
    android:title="@string/action_search"
    app:showAsAction="always"/>

Answer 3

None of the above solutions worked for me. Setting the MaxWidth of the SearchView worked for me:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu_search, menu);
    SearchView searchView = (SearchView)menu.findItem(R.id.menu_search).getActionView();
    searchView.setMaxWidth(Integer.MAX_VALUE);

Answer 4

The Answer given by @Hiep is correct i followed those steps to get my solution.but i was using ActionbarCompact lib so it take some changes to made so that i get it to work This solution is only the modified answer of Hiep if you are using appcompact

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:materialdesign="http://schemas.android.com/apk/res-auto" >

<item android:id="@+id/action_search"
      android:title="search"
      android:icon="@drawable/abc_ic_search_api_mtrl_alpha"
      materialdesign:showAsAction="always|collapseActionView"
      materialdesign:actionViewClass="android.support.v7.widget.SearchView" />

</menu>

And in the Main Class onCreateOptionsMenu

  @Override
public boolean onCreateOptionsMenu(Menu menu) {

    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.my_swipe_tabbed, menu);

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

    SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);



    // Get the SearchView and set the searchable configuration
    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);

    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));


    ActionBar.LayoutParams params = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT);
    searchView.setLayoutParams(params);
    searchView.setIconified(false);

     MenuItemCompat.expandActionView(searchItem);

   return super.onCreateOptionsMenu(menu);
}

Avoid the searchView from collapsing:If u use the above method in Appcompact it will create a crash so use this solution to avoid that.

      MenuItemCompat.setOnActionExpandListener(searchItem, new MenuItemCompat.OnActionExpandListener() {

        /* (non-Javadoc)
         * @see android.support.v4.view.MenuItemCompat.OnActionExpandListener#onMenuItemActionExpand(android.view.MenuItem)
         */
        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {

            return true;
        }

        /* (non-Javadoc)
         * @see android.support.v4.view.MenuItemCompat.OnActionExpandListener#onMenuItemActionCollapse(android.view.MenuItem)
         */
        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {

            return false;
        }
    });

Thank you

Answer 5

Got it

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.my_swipe_tabbed, menu);

    MenuItem searchViewItem = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) searchViewItem.getActionView();
    searchView.setIconifiedByDefault(false);
    ActionBar.LayoutParams params = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT);
    searchView.setLayoutParams(params);
    searchViewItem.expandActionView();
    return true;
}


<menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".MySwipeTabbedActivity" >
    <item android:id="@+id/action_search"
            android:title="Search"
            android:icon="@android:drawable/ic_menu_search"
            android:showAsAction="always|collapseActionView"
            android:actionViewClass="android.widget.SearchView"
            />
    <item android:id="@+id/action_share"
            android:title="Share"
            android:icon="@android:drawable/ic_menu_share"
            android:showAsAction="ifRoom" />
    <item android:id="@+id/action_settings"
            android:title="Settings"
            android:icon="@android:drawable/ic_menu_preferences"
            android:showAsAction="never" />
</menu>

[Optional] Avoid the searchView from collapsing:

    searchViewItem.setOnActionExpandListener(new MenuItem.OnActionExpandListener() {
        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            return true;
        }

        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            return false; //never collapse
        }
    });