Creando un Navigation Drawer.

Creamos un nuevo proyecto:

Ing. José Oswaldo Barrera Montes.

 Creando un Navigation Drawer.

En las plantillas de Android Studio Elegimos Navigation Drawer Activity:

Ing. José Oswaldo Barrera Montes.

 Creando un Navigation Drawer.

Al cargar el proyecto podemos ejecutarlo y veremos que ya se muestra en Navigation Drawer:

Ejecutamos. Como pueden ver sólo nos queda programarlo a nuestra conveniencia:

Ing. José Oswaldo Barrera Montes.

 Creando un Navigation Drawer.

VAMOS A MODIFICAR LA PLANTILLA QUE POR DEFECTO SE HA CREADO.

Aquí tendremos otras clases.

Originalmente sólo se nos ha creado
una, sin embargo, agregaremos los
fragmentos que necesitaremos, por lo
que aquí tendremos las clases y en la
carpeta Layout los XML de cada uno de
ellos.

Borraremos las imágenes que por

defecto trae la plantilla y pondremos las
nuestras. Estas son las que se
mostrarán en el menú deslizante. Es
importante aclarar que las imágenes
que aquí pongamos deben ser
monocromáticas.

Este XML nos permitirá modificar el

encabezado del menú.

Desde este XML programaremos cada

una de las opciones del menú
deslizante.

Copiemos y peguemos en el drawable las imágenes que necesitaremos.

En el aula está un link de un pack de

íconos para que utilicen los que
necesiten, también pueden hacer uso
del siguiente sitio para que elijan los
que quieran: http://www.flaticon.com/

NOTA: LA DIMENSIÓN DE LAS

IMÁGENES GENERALMENTE SON
32X32.

Ing. José Oswaldo Barrera Montes.

 Creando un Navigation Drawer.

Modificamos el XML del content_main:

Esta será la pantalla principal de nuestra aplicación, aquí usted pondrá todas las vistas que necesite,
para nuestro caso, sólo he dejado un texto indicando que esta es la pantalla principal y he cambiado
el color de fondo, esto para efecto de diferenciar las pantallas que mostremos.

Ing. José Oswaldo Barrera Montes.

 Creando un Navigation Drawer.

Configuremos el encabezado de nuestro menú:

Desde este XML configuraremos el encabezado de nuestro menú deslizante, la imagen que veremos,
los colores de fondo, los textos que tendrá, todo aquello que necesitamos, generalmente aquí se
coloca el logo de la empresa. En la flecha superior (donde se encuentra el símbolo de admiración en
rojo) podemos configurar los colores del encabezado, el color se escribe en numeración
hexadecimal. Al presionar dicho símbolo se le abre el XML side_nav_bar.xml, como puede ver es el
mismo que se encuentra en la carpeta drawable.

Encabezado del menú deslizante.

Ing. José Oswaldo Barrera Montes.

 Creando un Navigation Drawer.

Configurar las opciones del menú deslizante:

Resultado del menú.

Como puede ver podemos dividir en

secciones el menú, en la imagen se
nota como se tiene una sección de
Redes sociales, al revisar el XML nos
damos cuenta que en el menú se ha
creado un grupo con la etiqueta
group, también se ha creado un
menú dentro de un ítem (vea el ítem
de las redes sociales).

Ing. José Oswaldo Barrera Montes.

 Creando un Navigation Drawer.

Agregaremos los fragments que necesitemos para la aplicación, en este caso sólo agregaremos
tres, por lo cual programaremos las tres primeras opciones del menú. A la opción salir también
la hemos programado, pero no se ha agregado ningún fragment.

Daremos click derecho sobre el directorio app de nuestra aplicación y elegiremos los pasos que se
muestran en la imagen anterior, posteriormente se nos mostrará la ventana siguiente:

Ing. José Oswaldo Barrera Montes.

 Creando un Navigation Drawer.

1. Pondremos el nombre del fragmento y le dejaremos el cheque que create layout XML.
2. Quitaremos el cheque para evitar que se nos genere código que no necesitaremos para este
caso.
3. Si le dejamos el cheque quedará activada la opción regresar, esto cuando en la aplicación
nos encontremos en esa pantalla cuando desde un dispositivo.

Para este ejemplo repita los pasos y cree tres fragmentos, con los siguientes nombres:

- DatosPersonales.
- Empresa.
- Horario.

Debería tener las clases y los layouts:

Para este ejemplo no escribiremos ningún código en cada

una de las clases de los fragmentos, en el caso de los layouts
sí pondremos un color de fondo y un texto, en cada uno de
ellos diferente, esto simplemente para hacer notar al
momento que elijamos una opción el lugar donde nos
encontramos.

Ing. José Oswaldo Barrera Montes.

 Creando un Navigation Drawer.

Vaya a cada uno de los layouts de los fragmentos y elija un color de fondo distinto para cada uno,
escriba un texto en el centro de la pantalla, esto para indicar la pantalla en la que nos
encontramos.

Por ejemplo, como la imagen siguiente. Repita el proceso.

Vamos a la clase principal MainActivity y lo primero que haremos es importar la librería que nos
permita trabajar con fragments, asegurémonos que sea la misma la librería que se tiene en cada
clase de los fragmentos recién creados.

Ing. José Oswaldo Barrera Montes.

 Creando un Navigation Drawer.

Nos desplazamos a través del código de la clase MainActivity y buscamos el método

onNavigationItemSelected, es aquí donde programaremos las distintas opciones de nuestro menú
deslizante.

Las opciones señaladas

son las que se han
programado, el resto de
opciones no han sido
programadas.

1. Para que en la línea señalada no cause error debemos ir al XML del content_main y agregar
lo siguiente: android:id="@+id/content_main"

Para mejor comprensión vea la siguiente imagen:

Ing. José Oswaldo Barrera Montes.

 Creando un Navigation Drawer.

Conclusión:

De forma sencilla se ha utilizado la plantilla para crear un Navigation Drawer, realmente no se ha

visto con un ejemplo complejo, pero lo que se ha realizado da la pauta de la forma de trabajo con
este tipo de elementos, por supuesto que no es lo único que podemos hacer. Otro punto importante
a mencionar es que aquí se aplica el uso de fragments, anteriormente se mencionó que los
fragmentos pueden ser estáticos y dinámicos, para este caso se aplican los dinámicos ya que en
tiempo de ejecución se hace la sustitución del fragment.

Ing. José Oswaldo Barrera Montes.