How to make Search Dialog size of a toolbar

Question

So I learned how to make Search dialog with this tutorial but it doesn't look pretty and I'm looking for proper way to fix it. As you can see search widget doesn't cover fully the toolbar and I think making it shorter by using constant dp values is not a good way(isn't it?). Second thing is I'm not quite sure why half of toolbar is white and half of it is blue?

before after pressing magnifier button

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFF"
        android:minHeight="?attr/actionBarSize">

        <ImageButton
            android:id="@+id/search_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:background="@drawable/ic_action_search" />
    </android.support.v7.widget.Toolbar>

    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar">

        <FrameLayout
            android:id="@+id/frame_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/hello_world" />

        </FrameLayout>

        <ListView
            android:id="@+id/left_drawer_list"
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#2196F3"
            android:choiceMode="multipleChoice"
            android:dividerHeight="0dp" />
    </android.support.v4.widget.DrawerLayout>


</RelativeLayout>

Styles:

<resources>

    <!-- Base application theme. -->
    <style name="Theme.AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowActionBar">false</item>
    </style>

</resources>

EDIT

Thanks to Shujito answer and documentation I made it work. Here is the modified code if someone was interested:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);

    // retrieve the searchview here
    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
    SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
    // Assumes current activity is the searchable activity
    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
    searchView.setIconifiedByDefault(false); // Do not iconify the widget; expand it by default

    return true;
}

score 0 · Accepted Answer · answered Jun 11 '15 at 16:52

0

You can use a SearchView instead of a Search dialog, it is more flexible and it can be easily embedded into a xml menu, and it will fit the height of the action bar, try this:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >

<item
    android:id="@+id/menu_search"
    android:icon="@drawable/ic_action_search"
    android:title="@string/desc_search"
    app:actionViewClass="android.support.v7.widget.SearchView"
    app:showAsAction="ifRoom|collapseActionView"/>
</menu>

Inflate this into your activity or fragment, here's an example for a fragment. Then you can retrieve the SearchView with the item's getActionView() method

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater)
{
    super.onCreateOptionsMenu(menu, inflater);
    inflater.inflate(R.menu.workload, menu);
    MenuItem item = menu.findItem(R.id.menu_search);
    // retrieve the searchview here
    this.mSearchView = (SearchView) item.getActionView();
}

answered Jun 11 '15 at 16:52

Shujito

3,083
2
17
18

this is almost great! however when I try to request search nothing happens. SearchableActivity doesn't open ?? – Tomasz Mularczyk Jun 11 '15 at 17:17
1

unless you specifically need a searchable interface, you can try using a ´OnQueryTextListener´ on the searchview and capture the query on the receiving method, there are other listeners, check the docs: http://developer.android.com/reference/android/widget/SearchView.html also, I prefer using searchviews because they are more flexible than search interfaces, they don't have as much outside integration as a search interface, but because I don't need outside access it works for me. – Shujito Jun 11 '15 at 17:27
1

Thanks! I made it work by looking to documentation again(see my edit). Somehow I missed your solution when reading documentation. There was suggestion to use search widget instead dialog if you have already `toolbar` or `actionbar` in your layout but I was sure that I will need some extra work. – Tomasz Mularczyk Jun 11 '15 at 17:50

How to make Search Dialog size of a toolbar

1 Answers1