contacto[arroba]digitallearning.es
Cabecera

Proyecto: implementación de Navigation View en App Android

Post Series: Navigation Drawer

Vamos a desarrollar un proyecto que nos servirá para mostrar paso a paso la implementación de un componente NavigationView, utilizado para el diseño de un menú de navegación lateral, en una App Android.

Nos servirá de ejemplo práctico para ver los aspectos tratados en esta serie de tutoriales sobre Navigation Drawer y Navigation View, que recordamos se introdujo con la nueva librería de diseño Material Design, liberada junto con la versión de Android 5.0 Lollipop.

Descripción del proyecto Navigation View

Esta aplicación desplegará un menú lateral como el que vemos en imagen, y al pinchar, mostrará al usuario la opción de menú seleccionada en dicho panel (en la siguiente publicación mostraremos en detalle esta App ejemplo en un video):

Pantalla 2 de la App Android (Navigation Drawer)

Se comenzará en primer lugar por enumerar los elementos necesarios para el desarrollo del proyecto denominado “NavigationView”:

  • Clase SplashScreen, que herede de la clase base Activity, encargada de lanzar una pantalla de presentación al iniciar la aplicación, proporcionando una mayor inmersión del usuario en la aplicación.
  • Clase MainActivity, que herede de la clase base AppCompatActivity, y que definirá la lógica de construcción y selección del componente NavigationView.
  • Clase FragmentSeleccion, que herede de la clase base Fragment, encargada de mostrar información sobre el elemento del menú seleccionado.
  • Layout activity_splash_screen.xml, formado por una componente de tipo ImageView, que mostrará el logotipo de la aplicación.
  • Layout activity_main.xml, formado por un contenedor DrawerLayout, que permite interactuar con la vista drawer, dentro del cual se encontrarán tanto un FrameLayout, como el menú de navegación NavigationView.
  • Layout fragment_listado.xml, formado por un control TextView para mostrar el elemento del menú seleccionado por el usuario.
  • Layout cabecera.xml, donde se define la parte superior del NavigationView, en este caso formado por una imagen circular, y dos controles TextView, que muestran información sobre el usuario.
  • Layout barrasuperior.xml, que construye la barra de acción que se mostrará al iniciar la aplicación. Dicho layout estará formado por un control ToolBar.

Estructura del proyecto

Estructura Proyecto Navigation View

Documentación código fuente

Vamos a detallar las clases y ficheros de layout de este proyecto. Como siempre, podrás descargar todo el código al final de este tutorial (usuarios Premium)

NavigationView\app\src\main\java\com\academiaandroid\navigationview\MainActivity.java

Clase MainActivity, que hereda de la clase base AppCompatActivity, cuya principal tarea será la de establecer la lógica de construcción y selección del componente NavigationView, además de establecer la librería de soporte para implementar la barra de herramientas:

Se define las diferentes variables para la construcción del NavigationView y DrawerLayout entre otros:

Se asigna a la variable de tipo Toolbar, su control a nivel de layout:

Se establece en la Activity el ActionBar:

Se asigna a la variable de tipo NavigationView, su control a nivel de layout:

Se establece la lógica encargada de controlar la pulsación de un elemento en el menú de navegación:

En las siguientes líneas se implementa el método que será lanzado cuando se pulse un elemento del menú de navegación:

Cierre del drawer al seleccionar un elemento del menú:

Aquí se comprobará que ítem ha sido seleccionado, para mostrar información referente a dicha selección:

Al seleccionar cualquiera de los elementos del menú de navegación, se mostrará el fragment definido con un texto indicando información de la selección:

Se sustituye el FrameLayout definido en la Activity por el fragment:

Se asigna la variable de tipo DrawerLayout con su control a nivel de layout, además de inicializar un ActionBarDrawerToggle:

Método que será llamado cuando se cierre el drawer:

Método que será llamado cuando se abra el drawer:

Se establece un control que notificará de los eventos del drawer:

Se invoca al método syncState(), que sincronizará el estado del drawer con el DrawerLayout:

Por último se define un método que devolverá la fecha y hora actual, que formará parte de la funcionalidad de uno de los elementos del menú de navegación:

NavigationView\app\src\main\java\com\academiaandroid\navigationview\FragmentSeleccion.java

Clase FragmentSeleccion, que hereda de la clase Fragment, y que permite definir una parte independiente que puede añadirse al resto de elementos de la Activity donde se integra:

Se asigna a la variable de tipo TextView la referencia al control a nivel de layout:

Se recoge el elemento seleccionado por el usuario en el menú de navegación:

Se evalúa la selección del usuario para mostrar la información en el control TextView:

NavigationView\app\src\main\res\layout\activity_main.xml

Main Activity

Layout principal, que implementa la estructura del menú de navegación desde el punto de vista visual.

Como se puede apreciar este layout utilizará como contenedor principal una vista personalizada con el widget DrawerLayout. Dicho layout contendrá tanto el layout de la barra de herramientas, como un FrameLayout que será sustituido por el Fragment personalizado, además del NavigationView (si se revisa la propiedad app:menu de este último control, se define un menú personalizado en los recursos de la aplicación).

Comentar finalmente como este layout define el atributo android:layout_gravity="start", dentro del NavigationView, y que permitirá mostrar el menú en la parte izquierda de la pantalla (si en lugar de ‘start’ utilizamos el valor ‘end’, se mostrará a la derecha):

NavigationView\app\src\main\res\layout\cabecera.xml

Cabecera

Layout cabecera.xml, que establece la imagen situada en la parte superior del menú de navegación, donde además se implementan dos controles TextView con datos del usuario::

NavigationView\app\src\main\res\layout\fragment_listado.xml

Layout que permitirá mostrar el contenido del elemento seleccionado por el usuario en el componente NavigationView. Dicha información se representará en un control TextView:

NavigationView\app\src\main\res\layout\barrasuperior.xml

Action Bar

Como particularidad dentro de este layout se establece la propiedad background a partir de un recurso creado en la ruta NavigationView\app\src\main\res\values\colores.xml. Además como se puede apreciar se define una barra de herramientas para utilizar dentro de la aplicación:

NavigationView\app\src\main\res\menu\menu_navigation.xml

Para definir el contenido del NavigationView, se creará un archivo de recursos de menú, donde además de establecer los strings que se visualizarán en el menú, también se asignará las imágenes asociadas a cada elemento:

Dependencias Gradle implementadas (módulo app)

Será necesario añadir las dependencias para soporte de material design:

 

Descarga del proyecto

Pulsa para descargar el proyecto completo:

Descargar