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

Boyla

How are you adding the toolbar to the activity? Are you using setSupportActionBar(Toolbar)? – Stereotropism

@Lady_ari: Yes I am doing that. Is there an another way? Also, if I want to add a Title and icon, etc., should I do it before I set the Toolbar or should I be modifying the Object I get when I call getSupportActionBar()? – Boyla

I think it's better to use getSupportActionBar() to modify the toolbar title, etc. – Stereotropism

By the way, the FrameLayout that your toolbar is in looks like it has a height of match_parent. Why? I would think that would make the toolbar fit the entire screen, no? Unless it's inside of another layout – Stereotropism

@Stereotropism It's inside Drawer Layout. When the toolbar was outside of the frame layout it actually fit the whole screen which I couldn't figure out why for ages and I just randomly added it to the Frame Layout. Then all worked as expected. I suspect the Drawer Layout has to do something with that. – Boyla

Any reason you put your toolbar in the drawerlayout? – Stereotropism

Answer 1

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.

Boyla

This was the only thing that worked for me. Thanks for the brilliant idea - set one ToolBar as supportActionBar(), and use another for our custom layouts. – Ultrasonic

Answer 2

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>

Liter

The most useful answer there. – Braeunig

Some explanation: <include layout="@layout/content_search_location" /> <- basically this is where the main content of the app can be included – Vogeley

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.

Stereotropism

Yea, all right. That makes sense. I thought of a way to get around it. I'll try it out and let you know. And unf I can't upvote at the moment as I don't have enough rep :/ – Boyla

@JoeSovcik Were you able to figure out this problem. I have been breaking my head on this problem since hours now! – Lashay