Extended toolbar with custom view not showing full width

Question

I looked through a lot of answers related to the toolbar, but none of the answers helped me.

What I'm trying to achieve is to have an extended toolbar on which the logo will be displayed, possibly the name Activity / App, it will have an action / slide switch button on the right that will display the navigation box on the right, the overflow menu with other parameters, such as settings, as well as a navigation tab at the bottom, which will allow the user to navigate between different fragments (different days per month).

The way I'm trying to achieve this is the toolbar. First I create a toolbar and add my own 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 image with two images labeled 72dp (as per instructions) and a text view with the layout weight set to 1, so it stretches for all available space. And the height is 72dp.

Now, in my XML BaseActivity, I include the toolbar in the Framelayout of the main context (otherwise the toolbar would cover the entire screen for an unknown reason to me) (

)

 <...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 user view becomes compressed and does not extend the boundaries of the created parameters. The picture below shows that this is better, this is a screenshot from the design in Android Studio. A yellow rectangle indicates where option elements will be placed. Purple indicates the original size in the DesignView. Black indicates size at application startup.

Thanks for any help.

Related questions that may be helpful to anyone who comes across this to solve a similar problem:

• design - custom support toolbar view does not use full width
• How to set up an advanced toolbar on Android L

Answer 1

So, in order to achieve this and have full control over filling in the toolbar, I created two toolbars. The first toolbar with a standard height of 56dp and a second with a height of 72dp, which together create a two-layer toolbar, as indicated in the material design.

And since I am not inflating any menu items in the second toolbar, all of 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 problem, so now I have included two toolbars in my XMl.

Answer 2

since in versions 23 of the design support libraries there is a much easier way to do this 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 3

From the Toolbar documentation:

One or more user views. An application can add an arbitrary child to the toolbar. They will appear in this position within the layout. If the child view of Toolbar.LayoutParams indicates the gravity value is CENTER_HORIZONTAL, the point will try to center the remaining space on the toolbar after all other elements have been measured.

So, from what it looks like, your custom view behaves as it should. The options menu takes up some space on the toolbar, so the toolbar measures the remaining space for your custom view.