Android nav drawer over toolbar

Question

I'm creating an application with a transparent Toolbar and I want the Navigation Drawer to appear on top of that. Right now my main layout is:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Main layout -->
        <FrameLayout
            android:id="@+id/main_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- Toolbar -->
        <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"
            app:theme="@style/ToolbarTheme"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/transparent"/>

        <!-- Nav drawer -->
        <fragment
            android:id="@+id/fragment_drawer"
            android:name="rsay.android.scrollbanner.NavigationDrawerFragment"
            android:layout_width="@dimen/navigation_drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="left|start"
            tools:layout="@layout/fragment_navigation_drawer"/>

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

<!--<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"-->
    <!--app:theme="@style/ToolbarTheme"-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="?attr/actionBarSize"-->
    <!--android:background="@android:color/transparent"/>-->

</FrameLayout>

Right now this gives my navigation drawer the correct animation I need, however my content (which is in another layout) does not scroll. If I comment out my current Toolbar inside of the Navigation Drawer and uncomment the one at the bottom, my content scrolls, and the navigation drawer is the correct height, except the tool bar is on top of the navigation drawer, so the drawer icon is visible in the drawer itself. I tried removing the toolbar all together and placed it in my content layout but I received a null reference error. I also tried placing my Toolbar inside of the main_fragment_container and this placed the Toolbar behind my content so it was not visible. Any help on this would be appreciated!

Have a look at this [link](http://stackoverflow.com/questions/26440879/how-do-i-use-drawerlayout-to-display-over-the-actionbar-toolbar-and-under-the-st)...Hope it helps — Hardik Amal, Dec 30 '14 at 15:41

natario · Accepted Answer · 2014-12-30T15:21:33.580

3

You should:

get rid of the root FrameLayout;
place Toolbar inside main_fragment_container as you said. This though has to be transformed into a LinearLayout (for example), to show vertically your toolbar at the top and then your content (that you can nest into a new FrameLayout).

You were seeing the toolbar behind the content because FrameLayout childs overlap.

<android.support.v4.widget.DrawerLayout>

    <LinearLayout>
        android:orientation="vertical"

        <android.support.v7.widget.Toolbar /> <!-- toolbar code here -->
        <RelativeLayout /> <!-- main layout here -->

    </LinearLayout>

    <fragment>  <!-- drawer stuff -->
        android:layout_gravity="start"
    </fragment>

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

edited Dec 30 '14 at 15:21

answered Dec 30 '14 at 13:26

natario

24,954
17
88
158

I did that, and now my content isn't showing, it's just a blank background. But the toolbar and nav drawer are working fine – Ryan Sayles Dec 30 '14 at 15:13
@Ryan that might be a android:layout_height issue. I edited with some code to make sure I was clear. – natario Dec 30 '14 at 15:22
Ok I did that, and now everything works except the content is below the toolbar. It's still transparent but just with the default background followed by the content – Ryan Sayles Dec 30 '14 at 16:31
@Ryan either the toolbar is separated from the content or they overlap. If you want them to overlap, use a FrameLayout. In FrameLayouts XML order counts; last items will appear on top, so you might want to put first and then <..Toolbar>. – natario Dec 30 '14 at 16:38

Android nav drawer over toolbar

1 Answers1