Navigation Drawer

Según la documentación de Google sobre Material Design y las guías de desarrollo.

El NavigationDrawer es un componente que se desliza desde la izquierda para mostra contenido. Es un patrón muy común en aplicaciones de Google y sigue los mismos estándares que las listas.

Normalmente constituye la navegación principal de la aplicación. Se encuentra escondida casi siempre, pero es mostrada cuando el usuario desliza el dedo desde el borde izquierdo de la pantalla, o cuando se pulsa el icono del Toolbar.

¿Cómo se implementa?

Para usar el NavigationDrawer en nuestro proyecto, necesitaremos al menos la librería de soporte v4 Support Library.

I. Añade a tu archivo build.gradle las últimas versiones de las librerías design y appcompat:

compile 'com.android.support:appcompat-v7:23.1.1'  
compile 'com.android.support:design:23.1.1'  

II. Declara el DrawerLayout como contenedor padre de tu layout, dentro tendrás dos vistas, una que contiene el contenido principal de tu aplicación y otra vista que contendrá los elementos del drawer:

<android.support.v4.widget.DrawerLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

  <!-- contenido de tu layout -->
  <include layout="@layout/content_main"/>

  <!-- contenido del drawer -->
  <android.support.design.widget.NavigationView
      android:id="@+id/nav_view"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:layout_gravity="start"
      android:fitsSystemWindows="true"
      app:headerLayout="@layout/drawer_header"
      app:menu="@menu/drawer_menu"/>

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

III. Crea un fichero de menu, menu.xml dentro de la carpeta values:

<?xml version="1.0" encoding="utf-8"?>  
<menu xmlns:android="http://schemas.android.com/apk/res/android">  
  <group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_inbox"
        android:checked="true"
        android:icon="@drawable/ic_inbox_grey600_36dp"
        android:title="@string/inbox"/>
    <item
        android:id="@+id/nav_starred"
        android:icon="@drawable/ic_star_grey600_36dp"
        android:title="@string/starred"/>

    <!-- más elementos -->
    <item
        android:id="@+id/subheader"
        android:title="@string/subheader">
      <menu>
        <item
            android:id="@+id/nav_all_email"
            android:icon="@drawable/ic_email_grey600_36dp"
            android:title="@string/all_email"/>
      </menu>
    </item>
  </group>
</menu>  

Nota: La estructura del menú es jerárquica, eso permite separar los elementos en categorias.

IV. Para crear una cabecera, defínela en un fichero de layout, layout/drawer_header.xml:

<LinearLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/drawer_header_height"
    android:gravity="bottom"
    android:background="@drawable/navigation_background"
    android:orientation="vertical"
    android:padding="@dimen/activity_horizontal_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

  <de.hdodenhof.circleimageview.CircleImageView
      android:id="@+id/drawer_profile_image"
      android:layout_width="@dimen/drawer_header_profile"
      android:layout_height="@dimen/drawer_header_profile"
      android:layout_marginBottom="@dimen/standard_margin"
      android:scaleType="centerCrop"
      android:src="@drawable/alexandru_simonescu"
      app:civ_border_color="@android:color/white"
      app:civ_border_width="@dimen/drawer_header_profile_border"
      />

  <TextView
      android:id="@+id/name"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="Alexandru Simonescu"
      android:textAppearance="@style/TextAppearance.AppCompat.Body1"
      android:textStyle="bold"
      />

  <TextView
      android:id="@+id/email"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="hi@alexsimo.com"
      android:textAppearance="@style/TextAppearance.AppCompat.Body1"
      style="@style/Widget.AppCompat.Spinner"
      />

</LinearLayout>  

Nota: Para conseguir el efecto del borde redondeado de la imagen se ha utilizado una librería de terceros, puedes usar tu alternativa favorita.

V. En tu Activity busca el contenedor de datos del drawer, NavigationView y NavigationDrawer, además, configura sus listeners.

private void setupDrawer() {  
    drawerLayout = (DrawerLayout)  findViewById(R.id.drawer_layout);
    drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
      @Override public void onDrawerSlide(View drawerView, float slideOffset) {}
      @Override public void onDrawerOpened(View drawerView) {}
      @Override public void onDrawerClosed(View drawerView) {}
      @Override public void onDrawerStateChanged(int newState) {}
    });
  }

Configuración NavigationView:

public void setupDrawerContent(NavigationView navigationView) {  
    navigationView.setNavigationItemSelectedListener(
        new NavigationView.OnNavigationItemSelectedListener() {
          @Override public boolean onNavigationItemSelected(MenuItem item) {
            item.setChecked(true);
            // manejo del click
            drawerLayout.closeDrawers();
            return true;
          }
        });
  }