Extended Toolbar with Custom View not Displaying with Full Width

Question

I went through lots of answers here related to Toolbar but none of the answers could help me.

What I'm trying to achieve is to have an extended toolbar whhich will display a logo, possibly a name of the Activity/App, it will have an action button/drawer toggle to the right that will display a navigation-like drawer to the right, an overflow menu with other options like settings and also a navigation Tab at the bottom that will allow the user to move between different fragments (different days in a month).

The way I'm trying to achieve this is through toolbar. First I create the toolbar and add my custom view.

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar_actionbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/min_double_toolbar_height"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/primary"

        app:contentInsetStart="0dp"
        app:contentInsetEnd="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetRight="0dp"
        android:clipToPadding="false"
        >
        <!-- ThemeOVerlay Makes sure the text and items are using solid colors-->

        <include
            android:layout_width="match_parent"
            android:layout_height="72dp"
            android:layout_gravity="bottom"
            layout="@layout/day_navigation_tab"
            />

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

day_navigation_tab is just a horizontal with Two image views with Padding of 72dp (as by guidelines) and a text view with layout weight set to 1 so it stretches for the whole available space. And a height of 72dp.

Now in my BaseActivity XML I include the toolbar in the Framelayout of the main context (otherwise the toolbar would cover the whole screen for an unknown reason for me (took me ages to figre that out))

<...ommited>

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <include
            android:id="@+id/toolbar"
            layout="@layout/app_bar"
            />
    </FrameLayout>

    <!-- android:layout_gravity="start" tells DrawerLayout to treat
         this as a sliding drawer on the left side for left-to-right
         languages and on the right side for right-to-left languages.
         If you're not building against API 17 or higher, use
         android:layout_gravity="left" instead. -->
    <!-- The drawer is given a fixed width in dp and extends the full height of
         the container. -->
    <fragment android:id="@+id/navigation_drawer"
              android:layout_width="@dimen/navigation_drawer_width"
              android:layout_height="match_parent"
              android:layout_gravity="right"
              android:name="alterway.agency.timeentry.NavigationDrawerFragment"
              tools:layout="@layout/fragment_navigation_drawer"
              app:layout="@layout/fragment_navigation_drawer"
    />


</android.support.v4.widget.DrawerLayout>

However, when I use the toolbar I inflate the Menu on the actionBar in onCreateOptionsMenu my custom view gets shrinked and won't extend the edge of the created options. A picture below illustrates that better, It's a screenshot from a Design View in Android Studio. Yellow rectangle indicates where the option items will be placed. Purple indicates the original size in the DesignView. Black indicates the size when running the app.

Thank you for any help.

Related questions that might be useful to anybody who comes across this looking to solve a similar problem:

• design - Support Toolbars custom view not using full width
• How do I set up an extended toolbar on Android L

Answer 1

since versions 23 of the design support libraries there is a much simpler way to do it using android.support.design.widget.CoordinatorLayout

This is an example:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:popupTheme="@style/AppTheme.PopupOverlay">            
        </android.support.v7.widget.Toolbar>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/project_light_green"
            android:orientation="horizontal"
            android:paddingLeft="@dimen/activity_horizontal_margin_half"
            android:paddingRight="@dimen/activity_horizontal_margin_half"
            android:paddingTop="@dimen/activity_vertical_margin_half">

            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_margin="12dp"
                android:src="@drawable/ic_search_24dp" />

            <EditText
                android:id="@+id/search_field"
                android:layout_width="0dp"
                android:layout_height="48dp"
                android:layout_weight="1"
                android:background="@null"
                android:hint="@string/autocomplete_hint"
                android:singleLine="true"
                android:textColor="@color/project_black"
                android:textColorHint="@color/project_dark_gray"/>

            <include layout="@layout/close_button"
                android:id="@+id/clearButton"/>

        </LinearLayout>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_search_location" />

</android.support.design.widget.CoordinatorLayout>

Answer 2

So in order to achieve this and have complete control over the padding in the toolbar I created two toolbars. The first toolbar with standard height of 56dp and second with height of 72dp which together made a double layered toolbar as specified by material design.

And because I am not inflating any menu items in the second toolbar all my cusotm views inside behave as desired.

These lines still need to be used though

    app:contentInsetStart="0dp"
    app:contentInsetEnd="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetRight="0dp"
    android:clipToPadding="false"

This solved my issue so now I'm including two toolbars into my XMl.

Answer 3

From the Toolbar documentation:

One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.

So from what it look like, your custom view is behaving as it should. The options menu is taking up a certain amount of space in your toolbar, so the Toolbar is measuring the remaining space for your custom view to fit in.