Navigation Box: Gmail vs AppCompatv7 v21

Question

I’m trying to change my navigation box to look like a new Gmail application. I am using AppCompatv7 - v21 and have updated sdk. What am I missing? See Images below.

Gmail Navigation:

The navigation box moves around the toolbar.

My current Navigation:

Navigation box, located under the toolbar.

[EDIT]

This was my early XML code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <include android:id="@+id/toolbar" layout="@layout/toolbar_with_spinner" /> <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" > <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" > </FrameLayout> <ListView android:id="@+id/listview_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="@color/dark_grey" android:choiceMode="singleChoice" android:divider="@drawable/drawer_list_divider" android:dividerHeight="2dp" /> </android.support.v4.widget.DrawerLayout> </LinearLayout> 

Now, as suggested by pedro, I tried moving the toolbar to drawerlayout.

Here is my new xml:

 <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" > <include android:id="@+id/toolbar" layout="@layout/toolbar_with_spinner" /> <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" > </FrameLayout> <ListView android:id="@+id/listview_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="@color/white" android:choiceMode="singleChoice" android:divider="@drawable/drawer_list_divider" android:dividerHeight="2dp" /> </android.support.v4.widget.DrawerLayout> 

This is my current code in onCreate ()

 mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); toolbar = (Toolbar) findViewById(R.id.toolbar); spinner = (Spinner) toolbar.findViewById(R.id.spinner); mDrawerList = (ListView) findViewById(R.id.listview_drawer); 

Now I don’t even see the toolbar. Here is the image.

[EDIT]

Here is my new layout. It works. Thanks again pedro ...

 <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" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <include android:id="@+id/toolbar" layout="@layout/toolbar_with_spinner" /> <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" > </FrameLayout> </LinearLayout> <ListView android:id="@+id/listview_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="@color/white" android:choiceMode="singleChoice" android:divider="@drawable/drawer_list_divider" android:dividerHeight="2dp" /> </android.support.v4.widget.DrawerLayout> 

Answer 1

You must put your toolbar in your drawer layout.

Here is an example of the XML taken from this Github project:

 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include android:id="@+id/toolbar_actionbar" layout="@layout/toolbar_default" android:layout_width="match_parent" android:layout_height="wrap_content"/> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout> <!-- android:layout_marginTop="?android:attr/actionBarSize"--> <fragment android:id="@+id/fragment_drawer" android:name="com.poliveira.apps.materialtests.NavigationDrawerFragment" android:layout_width="@dimen/navigation_drawer_width" android:layout_height="match_parent" android:layout_gravity="start" app:layout="@layout/fragment_navigation_drawer"/> </android.support.v4.widget.DrawerLayout> 

Answer 2

Here is my new layout. It works. Thanks again pedro ...

 <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" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <include android:id="@+id/toolbar" layout="@layout/toolbar_with_spinner" /> <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" > </FrameLayout> </LinearLayout> <ListView android:id="@+id/listview_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="@color/white" android:choiceMode="singleChoice" android:divider="@drawable/drawer_list_divider" android:dividerHeight="2dp" /> </android.support.v4.widget.DrawerLayout>