Implementacin y personalizacin de men lateral

El siguiente tutorial se har con dos fragmentos como ejemplo, pero la cantidad de los
mismos son de acuerdo a la necesidad que se tenga en su proyecto.

1. Crearemos un nuevo proyecto, en este caso lo llamaremos Menu_lateral.

2. Elegimos el mnimo SDK el cual representa el mnimo android que necesita un

celular para que este proyecto funcione, en nuestro caso escogemos el Api 15

3. En este punto escogemos el tipo de actividad con la que iniciamos ,para nuestro
proyecto escogeremos la opcin Navigation Drawer activity

4. Proseguimos a poner el nombre a la actividad, dejamos la por defecto MainActivity

al igual dejamos el nombre por defecto para el layaout

5. Ya con el proyecto creado procedemos a compilar el mismo y podremos comprobar

que se nos creo el proyecto con un men lateral implementado, el cual se despliega
desde un icono de hamburguesa que se encuentra en el toolbar

6. Procedemos a ir al layaout del main activity, ac encontraremos una atributo XML

llamado android.support.design.widget.NavigationView el cual es una de las
etiquetas guas del material design encargado de cargar el Drawer.
Esta etiqueta consta de dos propiedades principales el app:headerLayout que es el
que se encarga de cargar el layaout de la cabecera, y la segunda propiedad
app:men que es el que se encarga de cargar el cuerpo ,el cual sigue siendo un
layaout pero de tipo men

7. Si observamos el layaout men o cuerpo del men lateral en modo diseo podremos
observar los tems que carga por defecto

8. Tambin podemos observar el men en modo texto el cual nos muestra la

composicin del mismo

9. Ya despus de observar la composicin del men lateral que se crea por defecto,
pasaremos a su modificacin, primero lo que haremos es en el layaout men
llamado activity_main_drawer.xml, es borrar los tems que existen y dejaremos
dentro de la etiqueta <group> dos <tem>, lo que significa que tendremos dos tems
propios, los cuales llamaremos a modo ejemplo primer_fragment con id
nav_fragment1 y segundo_fragment con id fragment2, correspondientemente

10. Despus no vamos a la clase MainActivity y en el mtodo onNavigationItemSelected

que es un mtodo que fue invocado por la implementacin de la interface implements
NavigationView.OnNavigationItemSelectedListener el cual se encarga de detectar el
clic en cualquiera de tus tems del men.

En este mtodo pasamos a dejar solo la opcin que detecte cuando se de clic en
cualquiera de nuestros dos tems identificndolos con su id, en la dos siguientes
imgenes mostraremos como se encuentra por defecto y como debera quedar segn
los dos tems de men que creamos.

11. Como siguiente paso vamos a crear dos fragmentos de la manera como lo muestra
la siguiente imagen, el cual ser un fragmento en blanco , y le pondremos
PrimerFragment y SegundoFragment respectivamente, este creara al igual que
una actividad una clase y un layaout XML.

12. Vamos y abrimos las clase de los dos fragmentos creado y procederemos a eliminar
los dos mtodos llamados onAttach y onDetach que traen los dos fragmentos, ya
que no son necesarios en este ejemplo.

13. En este paso vamos a ir a los layaout de los dos fragmentos y en el Textview le
pondremos un texto diciente para poder notar el intercambio de fragmentos.

14. No dirigimos al layaout Content_main e implementaremos la etiqueta

<Framelayout> que ser la encargada de que se cargue el fragmento en el mismo
,adems le pondremos el id contenedorFragmen para poderlo identificar despus.

15. Ahora procederemos a crear los mtodos que se encargaran de la transicin de los
fragmentos ,para esto los crearemos en el Mainactivity que har de contendor de
los fragmentos, los mtodos consisten en:

crear una instancia del fragmento al que llamaremos para su carga

PrimerFragment fragment_uno = new PrimerFragment();

Despues crearemos un instancia de la clase FragmentTransation que se

encargara de la transicin entre fragmentos
FragmentTransaction transaction =
getSupportFragmentManager().beginTransaction();

Pasaremos a decirle al <Framelayout> que cargue el fragmento que

acabamos de instanciar , con la propiedad remplace la cual solicita el id del
Framelayout y la instancia creada
transaction.replace(R.id.contenedorFragmen, fragPuntoAccidente)

Por ultimo haremos el llamado a la transicin con la propiedad commit

transaction.commit();

NOTA: se debe hacer el mtodo a los dos fragmentos como lo muestra la imagen

16. Ya con los mtodos creados pasaremos a llamar uno de los dos mtodo en el
onCreate ,esto para que al cargar la actividad, llame inmediatamente el primer
fragmento, en este caso llamaremos el primer fragmento pero puede ser el que se
desee

17. Ahora procederemos a llamar los mtodos en su opcin correspondiente, para

cuando se haga clic en el tem del men lateral cargue el fragmento.

18. Ya con esto procedemos a compilar y en el men lateral aparecer los dos tem que
creamos y deber cargar de primero el primer fragmento, lo notaremos por el texto
que le pusimos en su layaout correspondiente

19. ya podremos adems darle clic en los tems de men y observa la transicin que
este realiza entre los fragmentos creados

Link del proyecto en GITHUB=https://github.com/edwardCeballosAgudelo/Menu_lateral.git