Center SearchView in Action Bar

Question

How can I center an ActionView (a SearchView in particular) inside of a Action Bar?

As seen in the Google Books app:

My current layout setup (search_layout.xml):

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

My Action Bar XML file (menu.xml):

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:icon="@+android:drawable/ic_menu_search"
        android:title="@string/search"
        android:showAsAction="always|collapseActionView"
        android:id="@+id/searchMenuItem"
        android:actionLayout="@layout/search_layout" />
</menu>

Is there a way to mimic the behaviour of the Books' SearchView?

You could try if setting `ActionBar.LayoutParams` for the `SearchView` in code works for you: http://stackoverflow.com/a/20146626/56285 — Jonik, Nov 22 '13 at 14:53

score 17 · Answer 1 · edited May 23 '17 at 11:53

A View centered in the ActionBar can't be achieved with Action Items in an xml menu, as far as I can tell. However it can be implemented by setting a custom layout to the ActionBar. A basic example:

An Activity:

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ActionBar actionBar = getActionBar();
        actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); 
        actionBar.setDisplayShowHomeEnabled(true);
        actionBar.setCustomView(R.layout.actionbar_layout);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

}

where actionbar_layout is:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <SearchView
        android:id="@+id/mySearchView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:iconifiedByDefault="false" />
</RelativeLayout>

creates this on a 7'' tablet:

enter image description here

Note the iconifiedByDefault attribute set to false on the SearchView which forces it to appear expanded and not just as an icon. This may require that you hide the softkeyboard programmatically or it will be launched open when the Activity starts.

I know it's not visible from the image I have in the question, but the `SearchView` in the Books app is iconified by default, and then centers itself in the Action Bar on expansion. Is this doable with a custom view? — Whymarrh, Dec 14 '12 at 15:59
With the layout in my answer, if you start with iconifiedByDefault=true and then tap the icon, it will center itself in the ActionBar. But I don't know where you would like the starting position of the non-expanded icon to be. Try this example, set iconifiedByDefault to true and see if it's what you want. If not, and if for example you want the icon to the far right to start with and then move center on click as it's expanded, you'd have to listen for the click event and set the layout parameters of the custom layout dynamically from alignParentRight to centerInParent. — onosendai, Dec 14 '12 at 16:37

score -1 · Answer 2 · answered Dec 13 '12 at 17:48

Have a look here. You can just use the android:actionViewClass="android.widget.SearchView" attribute, and that should work just fine (keep in mind that you can get a reference to the searchView in Java, and change the hint there if that's what you want).

Center SearchView in Action Bar

2 Answers2

Linked