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

Question

enter image description here

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)?

Check my answer to this question: http://stackoverflow.com/questions/13660225/how-to-make-search-menu-item-to-a-full-view-in-the-action-bar-using-abs/18648708#18648708 — Szymon, Sep 11 '13 at 09:33
I am creating this app for 4.0 and above, so i don't think i need to use actionBarSherLock! Is there way to do this in normal actionBar? — user2364935, Sep 11 '13 at 09:34
"yourapp" is just an XML namespace. You can change it to something more suitable :) — Szymon, Sep 11 '13 at 09:45
I only found out that searchView.setMaxWidth(4000); will fill all the space, but it will hide other item — Hiep, Aug 01 '14 at 22:39

score 30 · Answer 1 · answered Dec 02 '15 at 19:09

30

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);

answered Dec 02 '15 at 19:09

b.lyte

6,518
4
40
51

This has the downside that even the overflow menu button disappears on API level 23. Tested in the emulator. – cgogolin Jan 30 '16 at 15:41
hm this is a weird question because I want to do the opposite, and default behavior seems to be max value for me right now.... – CQM Aug 17 '16 at 20:47
Exactly what I needed. Thanks – mihaiconst Apr 12 '21 at 07:34

Hiep · Answer 2 · 2014-08-01T23:34:39.780

Got it

enter image description here

@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
        }
    });

Your answer is working for me :) one add n for this answer is that to avoid collapsing when we use app compact lib its should be like this MenuItemCompat.setOnActionExpandListener(searchViewItem, new OnActionExpandListener() ....... otherwise the app will crash — Ramz, Jan 08 '15 at 17:06
To add to this, if you're using the new Toolbar API, you would change it to: final ActionMenuView.LayoutParams lp = new ActionMenuView.LayoutParams(ActionMenuView.LayoutParams.MATCH_PARENT, ActionMenuView.LayoutParams.MATCH_PARENT); — The Hungry Androider, Jan 19 '15 at 20:23
@Ramz It's not working for me. I tried this [in this SSCCE](http://stackoverflow.com/questions/31994512/how-to-make-the-distance-between-left-edge-of-toolbar-and-search-icon-same-as-th), but didn't work. I'll really appreciate if you can look into it. — Solace, Aug 13 '15 at 18:05
@TheHungryAndroider I tried that as well [in this problem](http://stackoverflow.com/questions/31994512/how-to-make-the-distance-between-left-edge-of-toolbar-and-search-icon-same-as-th) but did not help. Can you look into it? — Solace, Aug 13 '15 at 18:08

Ramz · Answer 3 · 2015-01-09T07:04:53.903

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

score 1 · Answer 4 · answered Feb 28 '17 at 07:21

1

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"/>

answered Feb 28 '17 at 07:21

Kishan Gohel

453
4
12

score 0 · Answer 5 · answered May 08 '20 at 12:58

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

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

5 Answers5