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?

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

Answer 1

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