Using AppCompat Toolbar with FrameLayout

Question

So my XML goes like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_height="56dp"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

    <FrameLayout
        android:id="@+id/main_frag"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- ListView here -->

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

What is happening, even though I set my height explicitly as 56dp, the toolbar is acting like match_parent and wills the entire height of the screen? Is there a better way of doing this?

Or should I be putting the toolbar in side the layouts that my FragementTransactions fill the FrameLayout with? Which doesn't seem efficient because I have several of those.

score 10 · Accepted Answer · edited May 23 '17 at 12:33

10

DrawerLayout takes two children views: the first for the main content and the second for the drawer: both are always set to match_parent. Therefore your Toolbar and FrameLayout should be wrapped in a vertical LinearLayout which is set to match_parent as per the canonical example from the maker of AppCompat:

<!-- The important thing to note here is the added fitSystemWindows -->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Your normal content view -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- We use a Toolbar so that our drawer can be displayed
             in front of the action bar -->
        <android.support.v7.widget.Toolbar  
            android:id="@+id/my_toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:background="?attr/colorPrimary" />

        <FrameLayout
            android:id="@+id/main_frag"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

    </LinearLayout>

    <!-- Your drawer view. This can be any view, FrameLayout
         is just an example. As we have set fitSystemWindows=true
         this will be displayed under the status bar. -->
    <FrameLayout
        android:layout_width="304dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:fitsSystemWindows="true">

        <!-- ListView here -->

    </FrameLayout>

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

edited May 23 '17 at 12:33

Community

1
1

answered Oct 29 '14 at 16:23

ianhanniballake

191,609
30
470
443

1

I dont understand why you would go this route instead of wrapping everything in a linearlayout then having the toolbar above the drawer layout – tyczj Oct 29 '14 at 16:27
@tyczj I always thought the `DrawerLayout` had to bookend the xml file. – TheLettuceMaster Oct 29 '14 at 16:30
1

@tyczj - you did read the post I linked to right? You won't get the correct implementation of the drawer (above the Toolbar and showing through the status bar as per the [material design guidelines](http://android-developers.blogspot.com/2014/10/material-design-on-android-checklist.html) - see the Navigation Drawer section) if you don't put the `Toolbar` within the `DrawerLayout`. – ianhanniballake Oct 29 '14 at 16:31
@KickingLettuce no I have it wrapped in a LinearLayout in several of my projects and works perfect – tyczj Oct 29 '14 at 16:31
@ianhanniballake the material guidelines also so that if you are using the home button as up navigation to display the toolbar below the nav drawer – tyczj Oct 29 '14 at 16:33
@tyczj - link please? – ianhanniballake Oct 29 '14 at 16:34
@ianhanniballake the same like you just posted it says `Optionally, on earlier versions of the platform, if the app has a drawer, the top-left icon can remain the app icon and narrower drawer indicator, as in Android 4.0.` unless I am misunderstanding what it is saying. What would be the point of the nav icon animation then. either way you can also just use a Relativelayout to achieve the same thing and keeping the drawer layout nice and clean – tyczj Oct 29 '14 at 16:50
@tyczj - you're misunderstanding - that's only saying switching to the new v7 `ActionBarDrawerToggle` is optional on older devices. The Navigation Drawer always goes over the toolbar and transparent through the status bar. You won't get the z-ordering of elements correct if the `Toolbar` is not within the content panel of the `DrawerLayout`. – ianhanniballake Oct 29 '14 at 17:00
@ianhanniballake someone better tell google then because several of their apps do this (google play store included) not that its that surprising though I guess – tyczj Oct 29 '14 at 17:04
@tyczj - please join and follow along on the discussion in the [official Android App Design Google+ community](https://plus.google.com/u/0/communities/116667001535376136065) where the discussion has come up multiple times and Googlers have repeatedly mentioned that all apps are converging on the correct design. – ianhanniballake Oct 29 '14 at 17:06
@ianhanniballake Quick fyi, you have the wrong ending tag for the drawer view. – drumonii Nov 01 '14 at 23:38
Don't forget to add the fragment instance inside the correct `View`. For example,`FragmentTransaction.add(R.id.frame_layout_id, myFragmentInstance, "fragment_tag_string")` Sadly I did not notice I had added my fragment under the parent layout, thus ended up with the same issue in here. – ArtiomLK Apr 07 '18 at 05:03

Using AppCompat Toolbar with FrameLayout

1 Answers1

Linked