Navigation Drawer Covers arrow android

Question

I am working on an app where I am using the NavigationDrawerActivity. When I tap on the hamburger icon, the navigation drawer slides in. But it covers the animation from hamburger to arrow. Is there anyway I can use my NavigationDrawer below the actionbar instead of over the actionbar.

How I want is this:

How I am getting is this:

Answer 1

It's very simple. You just need to change activity_layout.xml

If you have created Activity with NavigationDrawer use see the following:

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

<include
    layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 <android.support.design.widget.NavigationView
 ...
 />

And You need to change it to

<RelativeLayout
... 
android:fitsSystemWindows="true"
>

    <android.support.design.widget.AppBarLayout
          android:id="@+id/app_bar_layout"
    ...
    >

         <android.support.v7.widget.Toolbar
         ...
         />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.DrawerLayout
        android:layout_below="@id/app_bar_layout"
    ... 
    >

        <include
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <android.support.design.widget.NavigationView
            ...
        />

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

</RelativeLayout>