Navigation Drawer

Hola CubaCoders:

Uno de los componentes de interfaz de usuario más utilizado actualmente, tanto en aplicaciones móviles como en aplicaciones web, es el Navigation Drawer o como lo suelen llamar los diseñadores “menú hamburguesa” que no es más que un menú lateral que se muestra o se oculta según quiera el usuario, este menú se ha vuelto tan popular en las aplicaciones móviles porque ayuda a los diseñadores a ganar espacio en pantalla, por eso en el tutorial de hoy quiero compartir con ustedes como hacer un Navigation Drawer con material design.

Lo primero será crear una activity en blanco y dirigirnos a su xml y cambiamos el código que viene por defecto por el siguiente:

<android.support.v4.widget.DrawerLayout

   android:id=”@+id/drawer_layout”

   xmlns:android=”http://schemas.android.com/apk/res/android”

   xmlns:tools=”http://schemas.android.com/tools”

   xmlns:app=”http://schemas.android.com/apk/res-auto”

   android:layout_width=”match_parent”

   android:layout_height=”match_parent”

   tools:context=”.MainActivity”

   android:fitsSystemWindows=”true”

   >

 

   <!– Contenido Principal–>

 

   <!– Navigation View –>

   <android.support.design.widget.NavigationView

       android:id=”@+id/nav_view”

       android:layout_gravity=”start”

       android:fitsSystemWindows=”true”

       app:headerLayout=”@layout/nav_header”

       app:menu=”@menu/nav_menu”

       android:layout_width=”wrap_content”

       android:layout_height=”match_parent”

       />

 

 

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

 

No se preocupen por algunos errores que les muestre su IDE pues son por cosas que aún no hemos agregado y que iremos agregando poco a poco, por ahora solo nos dirigiremos al gradle y agregaremos dentro de dependencies{} lo siguiente:

compile ‘com.android.support:design:23.0.0’

por supuesto el número que tiene dependerá de la SDK que tengamos, pero debe ser superior a 21 que es la API de lollipop, con esto logramos que Android Studio reconozca android.support.design.widget.NavigationView que será nuestra barra lateral, ahora le vamos a agregar el menú y para ello vamos a utilizar el recurso res/menu de Android y vamos a crear un nuevo menú con los siguientes recursos:

<menu xmlns:android=“http://schemas.android.com/apk/res/android”>    <group android:checkableBehavior=“single”>       <item           android:id=“@+id/nav_home”           android:checked=“true”           android:icon=“@drawable/ic_home”           android:title=“@string/home_item” />       <item           android:id=“@+id/nav_productos”           android:icon=“@drawable/ic_store”           android:title=“@string/productos_item” />       <item           android:id=“@+id/nav_carrito”           android:icon=“@drawable/ic_shopping_cart”           android:title=“@string/compras_item” />       …   </group> <!– Otra sección –><item   android:id=“@+id/otra_section”   android:title=“@string/subtitulo”>   <menu>       <item           android:id=“@+id/nav_otro_item”           android:icon=“@android:drawable/otro_icono”           android:title=“@string/otro_item” />   </menu></item>  </menu>

 

En este caso solo se trata de ítems que tienen asociados a ellos un id, un nombre y un icono, como vamos a notar los nombres nos van a dar errores ya que hay que agregarlos a recurso res/values/strings y vamos a ver cómo hacerlo

<string name=”home_item”>Home</string>

   <string name=”productos_item”>Productos</string>

   <string name=”compras_item”>Carrito</string>

   <string name=”ordenes_item”>Ordenes</string>

   <string name=”facturas_item”>Facturas</string>

   <string name=”log_out_item”>Cerrar Sesión</string>

   <string name=”configuracion_item”>Configuración</string>

Siguiendo con nuestra barra lateral nos falta agregarle una cabecera en la cual podemos poner un logotipo, un slogan o simplemente nuestro perfil de usuario que será el que agreguemos, para esto crearemos un layout llamado nav_header para que coincida con el que le definimos al NavigationView y contendrá el siguiente código:

<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=”190dp”

   android:background=”#fff”

   android:gravity=”bottom”

   android:orientation=”vertical”

   android:padding=”16dp”

   android:theme=”@style/ThemeOverlay.AppCompat.Dark”>

 

   <!– Imagen de perfil –>

   <ImageView

       android:id=”@+id/circle_image”

       android:layout_width=”wrap_content”

       android:layout_height=”wrap_content”

       android:layout_marginBottom=”16dp”

       android:scaleType=”centerCrop”

       android:src=”@mipmap/ic_launcher”/>

 

   <!– Nombre de Usuario –>

   <TextView

       android:id=”@+id/username”

       android:layout_width=”match_parent”

       android:layout_height=”wrap_content”

       android:text=”Hairon Chaviano Lira”

       android:textAppearance=”@style/TextAppearance.AppCompat.Body1″

       android:textStyle=”bold”

       android:textColor=”#000″/>

 

   <!– Correo de la cuenta –>

   <TextView

       android:id=”@+id/email”

       style=”@style/Widget.AppCompat.Spinner”

       android:layout_width=”match_parent”

       android:layout_height=”wrap_content”

       android:text=”hchaviano@otevc.co.cu”

       android:textAppearance=”@style/TextAppearance.AppCompat.Body1″

       android:textColor=”#000″/>

 

</LinearLayout>

Una vez hecho esto ya hemos terminado con nuestro NavigationView y como estamos creando una aplicación material design no nos puede faltar los colores así que nos dirigimos a res/values y creamos un nuevo recurso llamado colors y al mismo le agregaremos lo siguiente:

<resources>

   <color name=”primary_color”>#2196f3</color>

   <color name=”primary_dark_color”>#1976d2</color>

   <color name=”accent_color”>#448aff</color>

</resources>

Y luego nos dirigiremos a res/values/styles.xml y también los agregaremos allí de la siguiente forma:

<item name=”colorPrimary”>@color/primary_color</item>

<item name=”colorPrimaryDark”>@color/primary_dark_color</item>

<item name=”colorAccent”>@color/accent_color</item>

Una vez en este mismo archivo aprovechamos para quitar el ActionBar y poner un toolbar que es lo más recomendable para darle el estilo material design, lo que hacemos es cambiar el código que teníamos por este:

<style name=”AppTheme” parent=”Theme.AppCompat.Light.NoActionBar”>

Y nuestro fichero styles.xml nos quedaría de la siguiente manera:

<style name=”AppTheme” parent=”Theme.AppCompat.Light.NoActionBar”>

       <item name=”colorPrimary”>@color/primary_color</item>

       <item name=”colorPrimaryDark”>@color/primary_dark_color</item>

       <item name=”colorAccent”>@color/accent_color</item>

   </style>

 

Ahora tenemos que hacer el famoso toolbar, ya un tutorial anterior explicaba cómo hacerlo así que si tienen alguna dificultad pueden remitirse a este, lo que haremos será crear un layout llamado main_content en el cual además de agregar el toolbar definiremos como se verá la pantalla cuando el Navigation Drawer esta oculto

<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=”match_parent”

   android:orientation=”vertical”>

 

   <android.support.v7.widget.Toolbar

       android:id=”@+id/toolbar”

       android:layout_height=”?attr/actionBarSize”

       android:layout_width=”match_parent”

       android:minHeight=”?attr/actionBarSize”

       android:background=”?attr/colorPrimary”

       android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar”

       app:popupTheme=”@style/ThemeOverlay.AppCompat.Light”/>

 

   <RelativeLayout

       android:id=”@+id/main_content”

       android:layout_width=”match_parent”

       android:layout_height=”match_parent” />

 

</LinearLayout>

Ahora nos dirigimos a la main_activity.xml y agregaremos a esta el layout anterior

<!– Contenido Principal–>

   <include layout=”@layout/main_content”/>

 

Ahora solo tenemos que declarar y setear nuestro toolbar en nuestra activity, para esto crearemos un método auxiliar llamado setToolbar()

private void setToolbar() {

       Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

       setSupportActionBar(toolbar);

       final ActionBar ab = getSupportActionBar();

       if (ab != null) {

           // Poner ícono del drawer toggle

           ab.setHomeAsUpIndicator(R.mipmap.ic_launcher);

           ab.setDisplayHomeAsUpEnabled(true);

       }

 

   }

En este método solo resaltar que con setHomeAsUpIndicator() estamos definiéndole el icono que va a tener el toolbar para accionar el Navigation Drawer, ahora veremos cómo accionarlo, para esto nos dirigimos al método onOptionsItemSelected() y escribimos lo siguiente

@Override

   public boolean onOptionsItemSelected(MenuItem item) {

       switch(item.getItemId()) {

           case android.R.id.home:

               drawerLayout.openDrawer(GravityCompat.START);

               return true;

           //…

       }

 

       return super.onOptionsItemSelected(item);

   }

 

Claro que vamos a ver algunos errores porque no hemos declarado ni inicializado el drawerLayout, así que lo hacemos de la siguiente forma y ya de paso hacemos la llamada al método setToolbar() que se nos había olvidado hacerla

DrawerLayout drawerLayout;

@Override

   protected void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.activity_main);

 

       setToolbar();

 

       drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

}

 

Y ya con esto debemos tener nuestro Navigation Drawer funcionando sin problemas y con material design aquí les dejo una captura de como se ve el mío, espero les haya servido este tutorial y que lo empleen en sus aplicaciones, no te olvides de dejar un comentario sobre tu experiencia con el Navigation Drawer.

Share
Soy Ingeniero en Ciencias Informáticas, me encanta programar sobre todo en C# y Android

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *