Search code examples
androidandroid-layoutandroid-custom-viewandroid-toolbarandroid-actionbaractivity

Extended Toolbar with Custom View not Displaying with Full Width

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.

Design View of the toolbar

Thank you for any help.

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

Solution

  • 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.