Android Navigation Drawer


Android Navigation Drawer – Parte 1
Escrito por sebastiancipolat | Monday, December 16, 2013 a las 8:30 pm | 30 Comentarios

Hola lectores despues mucho tiempo de no postear nada el dia de hoy les traigo un nuevo tutorial que espero sea de su agrado.
Desde ya hace algun tiempo se puede observar que hubo un cambio en cuanto al diseño de las ui de las aplicaciones, el antiguo modelo de utilizarmenus principales o dashboard se reemplazo por el menu de navegacion vertical ocultable, el mejor ejemplo para ver  este cambio  es la aplicacion de facebook como vemos en la imagen a continuación:
          
Como se puede observar es mucho mas minimalista pero no estoy en condiciones de decir si es mejor o aporta mas ventajas que el otro.
Si les interesa saber mas sobre el tema pueden visitarestos blogs que tratan en profundidad el tema desde el punto de vista de diseño:
http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html
http://androiduiux.com/2012/06/15/side-navigation-ui-pattern-in-android/
http://androiduiux.com/2012/07/27/side-navigation-ui-pattern-in-android-part-2/
No hace mucho para poder implementar este en nuestras aplicaciones de Android  uno mismodebia  implementar toda la funcionalidad por su cuenta o utilizar alguna libreria de alguien ya lo halla hecho. Pero por suerte en el ultimo Google I/O 2013 se anuncio oficialmente que se incluiria dentro de la support library una funcionalidad llamada  Navigation Drawer que es la que justamente nos permite implementar esto, gracias a esto podemos dotar a nuestras apps desde versiones antiguas deandroid esta funcionalidad.
Lo que aprenderemos hoy es justamente eso como implementar Navigation Drawer.
Basicamente la idea es implementar esto:

Este tutorial estara separado en 2 partes.
En la primera aprenderemos un poco sobre  Navigation Drawer, como se utiliza, implementar un menu con opciones y  luego en la segunda parte
veremos como incluir el botón para mostrar /ocultar el menu y comoasignar una acción cuando pulsamos cada elemento del menú.
2da Parte del tutorial Click aqui 
Manos a la obra:
Antes de empezar recomiendo que vean el  tutorial oficial en el cual yo me he basado, en el cual se explica esto y como incluir compatibilidad con versiones viejas de android tema que de momento no voy a hablar en el post, tambien recomiendo darle un vistazo al deActionBar  tema queutilizaremos tmb.
Para empezar deben actualizar desde el SDK Manager la Support Library a la versión r13.
Vamos a crear nuestro layout que sera el esqueleto de nuestra UI.

El contenedor principal es el DrawerLayout este basicamenentes es el que permite deslizar la vistaen este caso sera el listview.
La posición de deslizamiento dentro del layout es controlado por la sig.propiedad  android:layout_gravity este puede ser: left  right o start y end.
Para darnos una idea al finalizar el tutorial seremos capaces de implementar una ui de este tipo.

Como ven dentro del FrameLayout ira el contenido principal mientras que el Listview sera el que se desplaze horizontalmente ya sea clickeando en el boton del ActionBar o arrastrandolo tocando la pantalla.
Ahora vamos a la parte de la Activity principal

Esmuy simple, con solamente declarar el layout ya funcionaria, en este caso declaramos el DrawerLayout y listview.
Si corremos la app en este punto y deslizamos el dedo de forma horizontal desde el extremo izq de la pantalla hacia dentro veremos como se desplaza el menu, en este punto todavia no se incluyo el contenido del listview ni el actionbar.

 
ListView:
A continuación veremos el diseño delMenu Vertical y  como agregar opciones, el manejo de esto es igual que en cualquier aplicación comun definiendo su layout, implementar un Adaptador especifico para este en el caso que fuese necesario, etc..
Diseño:
Mi idea es que por mas que esto sea un mero ejemplo ustedes puedan adquirir conocimientos para dotar a sus app con una interfaz moderna similar a las que ya todos conocemos,...