SearchView in OptionsMenu not full width

Question

I have a working SearchView which expands in my OptionsMenu when the user taps on the search icon. However it only expands within the available space among the other OptionsMenu icons. On a wide screen this is fine, but with a narrow space there is only room to show 5-10 charaters in the search box. I want it to overlay the other icons such as it does for the Android Contacts app. Currently, I'm building with targetSdkVersion = 17. Hopefully I'm missing something simple :)

(Note added later: the only solution I've found workable so far is to hide all the menu icons when I want to expand the search icon. This is conceptually simple. But it is messy because when restoring hidden icons, one has to go through a bunch of logic to figure out which ones to restore, or keep state variables around, etc.)

Here's my item xml in for the OptionsMenu:

<item
  android:id="@+id/menu_search_shallow"
  android:title="Search Current Folder"
  android:icon="@drawable/ic_btn_search"
  android:showAsAction="always|collapseActionView"
  android:actionViewClass="android.widget.SearchView" />

I also have in my main activity code:

@Override
public boolean onCreateOptionsMenu (Menu menu)
{
  getMenuInflater().inflate(R.menu.nav_menu, menu);
  this.optionsMenu = menu;

  MenuItem searchItem = menu.findItem (R.id.menu_search_shallow);
  searchItem.setOnActionExpandListener (this);
  SearchView searchView = (SearchView) searchItem.getActionView();
  searchView.setQueryHint (getString (R.string.search_shallow_hint));

  searchItem = menu.findItem (R.id.menu_search_deep);
  searchItem.setOnActionExpandListener (this);
  searchView = (SearchView) searchItem.getActionView();
  searchView.setQueryHint (getString (R.string.search_deep_hint));
}

and

@Override
public boolean onMenuItemActionExpand(MenuItem item) 
{
  SearchView searchView = (SearchView) item.getActionView();
  searchView.setOnQueryTextListener (this);
  return true;
}

@Override
public boolean onMenuItemActionCollapse(MenuItem item) 
{
  SearchView searchView = (SearchView) item.getActionView();
  searchView.setQuery ("", false);
  return true;
}

Luce

Answer 1

I had a similar issue, that the search bar did not fill the whole width,( but I had no other icons). I solved it by adding in item:

android:actionLayout="@layout/my_search_view"

and in layout/my_search_view.xml :

<?xml version="1.0" encoding="utf-8"?>
<SearchView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Bosley

This sounds reasonable. I'm not going to change working code right now, but I'll mark this answer as correct under the assumption that you got it right! – Luce

do not work, only set MaxWidth=10000 will span the view but hide other items – Dissident

Answer 2

Instead of creating a new layout I set the MaxWidth programmatically in onCreateOptionsMenu():

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

Winsome

searchView.setMaxWidth(Integer.MAX_VALUE); solved the problem. – Decompress

android N displayed it correctly (could have been screen width) but Nexus 6 (marshmallow) exhibits this problem. This solution worked for Nexus 6 while the others didn't – Monolithic

searchView.setMaxWidth(Integer.MAX_VALUE); solved the problem – Radbun

my issue is being fixed.Thanku – Whitsuntide

Thank you, this is the only solution useful for me! – Claud

yes this solved the problem of close button coming a bit left rather to be on extreme right issue, in Galaxy Note 5 and Moto Nexus 6. Thanks – Peacetime

This trick is a OP! :) Solved also in Nexus 10 in landscape mode – Celesta

Thank you, Resolved the my problem in landscape mode. – Edmond

Thank you! This is exactly what i was looking for. – Outofdate

Answer 3

For some reason jjung's solution didn't work for me. I had to add android:maxWidth="10000dp", just a really high maxWidth, to get it to expand to the full available width.

Also, just to add, I'm using the support library (v7), and so my layout file looks like this:

<android.support.v7.widget.SearchView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxWidth="10000dp" />

And in my item, I have:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:myapp="http://schemas.android.com/apk/res-auto">
    <item
        ...
        myapp:actionLayout="@layout/searchview" />
...

Where myapp is just some arbitrary namespace for the attributes added by the support library (see Adding Action Items for more details).

Lipcombe

great this solution worked for me too. Is this 10000 an arbitary number? – Salaried

This solution worked for me, only I'm using the SearchView XML element instead of the support widget. I think this should be marked as correct solution. – Modular

@ThanosF Yes, it's arbitrary. Just some really high value is needed. – Lipcombe

Not working for me. Did you add searchview layout as a separate layout file – Kylakylah

@Kylakylah Without a layout file you have to programmatically set the width to match_parent, then it works. – Neither

it doesn't work on samsung tab4 7 but works with my nexus. weird situation :x – Malfunction

Answer 4

Maybe I am late but thought it might be helpful for someone who faced the same issue as me.

final SearchView searchView = (SearchView) myActionMenuItem.getActionView();
searchView.setMaxWidth(Integer.MAX_VALUE);//set search menu as full width

in onCreateOptionsMenu of your class may solve this problem but one thing we need to understand. If you just want to show search menu (on clicking of search button) and not any other menu items in actionbar then you need to keep the search item as a first item in menu file. Here is an example

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

<!--keeping searach as first item-->
        <item
            android:id="@+id/action_search"
            android:icon="@drawable/search_ab"
            android:title="@string/search"
            app:actionViewClass="android.support.v7.widget.SearchView"
            app:showAsAction="ifRoom" />

        <item
            android:id="@+id/itemFilter"
            android:icon="@drawable/filter"
            android:title="@string/filter"
            app:showAsAction="ifRoom" />
    </menu>

And it will be displayed as

on clicking search it will be shown as full width

And if you keep search as second or last item in menu then it will be show like this.

and on clicking search

Literality

from where did u got that filter icon? pls provide a link to be downloaded – Lancashire

cool solution searchView.setMaxWidth(Integer.MAX_VALUE);//set search menu as full width this solved – Felipe

Answer 5

As crazy as it might seem, in my case problem was this line: app:actionViewClass="android.widget.SearchView" in menu.xml:

 <item
        android:id="@+id/action_search"
        app:actionViewClass="android.widget.SearchView"
        android:icon="@drawable/ic_search"
        android:title="@string/title"
        app:actionLayout="@layout/layout_search"
        app:showAsAction="always" />

When I removed app:actionViewClass, it fully expanded as defined in my layout_search file.

<android.support.v7.widget.SearchView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxWidth="10000dp"
android:layout_centerInParent="true"
android:background="@color/colorAccent"
android:queryHint="Search me" />

Allegory

Answer 6

There are so many ways to solve this issue - I'll just add the one I've used in several apps.

I have my custom SearchView (with some other customization) which extends android.support.v7.widget.SearchView and in order to stretch to full width:

@Override
public void setLayoutParams(final ViewGroup.LayoutParams params) {
    params.width = ViewGroup.LayoutParams.MATCH_PARENT;
    super.setLayoutParams(params);
}

Irv

I tried a similar solution in Android emulator, and it didn't work. But searchView.setMaxWidth(Integer.MAX_VALUE); did. – Basham

I did the initialization inside my custom SearchView's constructor: init { maxWidth = Integer.MAX_VALUE } – Suiter