Search code examples
javaandroidandroid-actionbartoolbarmaterial-design

Custom layout in Toolbar


Recently I migrated from the old ActionBar to the new Toolbar.

I have a custom activity (actually a fragment inside my main activity) in which I'm allowing user to click on an icon in the toolbar, and then a search box appears (in the toolbar), using custom layout.

Problem is, it worked fine before the migration, but now once I click the button and switch to the custom action bar layout with the search box, the layout spans on all screen, instead of the normal size of the toolbar.

Here's the code I'm using to replace the toolbar:

LayoutInflater inflator = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View actionBarView = inflator.inflate(R.layout.map_action_layout, null);
    
actionBar = ((DrawerActivity)getActivity()).getSupportActionBar();
actionBar.setCustomView(actionBarView);

Here's the map action layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<AutoCompleteTextView
    android:id="@+id/autoComplete"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:ems="10"
    android:hint="@string/search_adress_hint"
    android:imeOptions="actionSearch"
    android:inputType="textAutoComplete|textAutoCorrect"
    android:paddingRight="50dp"
    android:textColor="@android:color/white"
    android:textCursorDrawable="@null" >
    <requestFocus />
</AutoCompleteTextView>

<ImageButton
    android:id="@+id/clear_address"
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="17dp"
    android:background="@drawable/ic_action_cancel"
    android:gravity="center_horizontal|center_vertical"
    android:scaleType="fitCenter" />

</RelativeLayout>

Note: no matter what value I put in the height of the above, whether it's fixed dp value or wrap_content, the layout still spans on whole screen.

Here's my toolbar layout being replaced:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ColorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_scrollFlags="scroll|enterAlways"
    android:elevation="4dp"
    app:layout_collapseMode="pin">

</android.support.v7.widget.Toolbar>

The toolbar resides inside an AppBarLayout.

What am I doing wrong? How can I achieve the result I'm looking for?


Solution

  • It is standard to have the toolbar height set to ?attr/actionBarSize.

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize" />