CODEWITHSUNDEEP
androidandroid-fragmentsandroid-navigation
Ryan Sayles
Ryan Sayles

Reputation: 3431

Android nav drawer over toolbar

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!

Upvotes: 1

Views: 1030

Answers (1)

natario
natario

Reputation: 25194

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>

Upvotes: 3

Related Questions