Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Cómo programar una barra de navegación para una aplicación en Android

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

Final product image
What You'll Be Creating

El equipo de Material Design de Google define la funcionalidad de una barra de navegación en Android de la siguiente manera:

El panel de navegación se desliza desde la izquierda y contiene los destinos de navegación para tu aplicación.

Un ejemplo de una aplicación popular de Android que implementa la barra de navegación es la aplicación Inbox de Google, la cual utiliza un menú para navegar a diferentes secciones de la aplicación. Puedes verificarlo tú mismo descargando la aplicación Inbox de la tienda Google Play, si todavía no la tienes en tu dispositivo. La siguiente captura de pantalla muestra el Inbox con la barra de navegación abierta.

Google Inbox Android app

El usuario puede ver el panel de navegación cuando desliza un dedo desde el borde izquierdo de la actividad. También pueden encontrarlo desde la actividad del hogar (el nivel superior de la aplicación) tocando el ícono de la aplicación (también conocido como el menú "hamburguesa") en la barra de acciones.

Ten en cuenta que si tienes muchos destinos diferentes (más de seis, por ejemplo) en tu aplicación, se recomienda que uses una barra de navegación.

En esta publicación, aprenderás a mostrar elementos de navegación dentro de una barra de navegación en Android. Cubriremos cómo usar la API DrawerLayout y NavigationView para realizar esta tarea. Para obtener una bonificación, también aprenderás a usar la función de plantillas de Android Studio para iniciar rápidamente tu proyecto con una barra de navegación.

Puedes encontrar un proyecto de muestra (en Kotlin) para este tutorial en nuestro repositorio de GitHub para que puedas seguirlo fácilmente.

Requisitos previos

Para poder seguir este tutorial, necesitarás:

1. Crea un proyecto en Android Studio

Inicia Android Studio y crea un nuevo proyecto (puedes llamarlo NavigationDrawerDemo) con una actividad vacía llamada MainActivity. Asegúrate de marcar también la casilla de verificación Incluir soporte de Kotlin.

Android Studio new project dialog

2. Agrega DrawerLayout y NavigationView

Para comenzar a utilizar DrawerLayout y NavigationView en tu proyecto, deberás importar el soporte de diseño y también el artefacto de soporte de Android. Así que agrégalos al archivo build.gradle de tu módulo para importarlos.

Además, incluye tanto el widget DrawerLayout como el widget NavigationView en tu archivo res/layout/activlty_main.xml.

Aquí creamos un widget DrawerLayout con el ID drawer_layout. La propiedad tools:openDrawer se usa para mostrar el panel de navegación cuando el diseño XML está abierto en la vista de diseño de Android Studio.

La documentación oficial dice lo siguiente sobre DrawerLayout:

DrawerLayout actúa como un contenedor de nivel superior para el contenido de la ventana que permite sacar vistas interactivas de un "menú" desde uno o ambos bordes verticales de la ventana.

Después de agregar el widget DrawerLayout, incluimos un diseño hijo que apunta a @layout/app_bar_main.

Aquí está mi archivo de recursos app_bar_main.xml. Este archivo simplemente tiene un widget CoordinatorLayout, AppBarLayout y una barra de herramientas.

Finalmente, creamos un widget NavigationView. La documentación oficial dice lo siguiente sobre NavigationView:

NavigationView representa un menú de navegación estándar para la aplicación. El contenido del menú puede ser llenado por un archivo de recursos del menú.

En el widget NavigationView XML, puedes ver que agregamos un atributo android:layout_gravity con valor start. Esto se usa para ubicar la barra; si quieres que la barra salga de la izquierda o de la derecha (el inicio o el final en las versiones de plataforma que admiten la dirección del diseño). En nuestro caso, la barra de navegación saldrá por la izquierda.

También incluimos un atributo app:headerLayout que apunta a @layout/nav_header_main. Esto agregará una View como encabezado del menú de navegación.

Aquí está mi archivo de recursos de diseño nav_header_main.xml:

Este archivo de diseño simplemente tiene un LinearLayout, un ImageView y un TextView.

Android Studio layout preview

Para incluir los elementos del menú para la barra de navegación, podemos usar el atributo app:menu con un valor que apunta a un archivo de recursos del menú.

Aquí está el archivo de recursos del menú res/menu/activity_main_drawer.xml:

Aquí hemos definido un Menú usando <menu> que sirve como un contenedor para los elementos del menú. Un <item> crea un MenuItem, que representa un solo elemento en un menú.

Luego definimos nuestro primer grupo de menú usando el <group>. Un <group> sirve como un contenedor invisible para elementos <item> del menú en nuestro caso. Cada uno de los elementos <item> tiene una identificación, un ícono y un título. Ten en cuenta que se dibujará una línea horizontal al final de cada <group> para nosotros cuando se muestre en el panel de navegación.

Un <item> también puede contener un elemento <menu> anidado para crear un submenú; hicimos esto en nuestro último <item>. Ten en cuenta que este último <item> tiene una propiedad de título.

Ten en cuenta que al mostrar los elementos de la lista de navegación de un recurso de menú, podríamos usar un ListView en su lugar. ¡Pero, al configurar la barra de navegación con un recurso del menú, obtenemos el estilo de Material Design en la barra de navegación de forma libre! Si utilizaste ListView, deberás mantener la lista y también diseñarla para que cumpla con las especificaciones recomendadas de Material Design para el panel de navegación.

3. Inicialización de los componentes

A continuación, vamos a inicializar las instancias de nuestro DrawerLayout y ActionBarDrawerToggle. La inicialización ocurrirá dentro onCreate() en MainActivity.kt.

ActionBarDrawerToggle configura el icono de la aplicación ubicado a la izquierda de la barra de acciones o de la barra de herramientas para abrir y cerrar el panel de navegación. Para poder crear una instancia de ActionBarDrawerToggle, debemos proporcionar los siguientes parámetros:

  • Un contexto principal; por ejemplo, en un Activity usas this, mientras que en un Fragment llamas a getActivity()
  • Una instancia del widget DrawerLayout para vincular la actividad de ActionBar.
  • El ícono para colocar encima del ícono de la aplicación e indicar que hay una palanca
  • Los recursos string para las operaciones de apertura y cierre respectivamente (para el acceso)

Invocamos el método addDrawerListener() en un DrawerLayout para conectar un ActionBarDrawerToggle con un DrawerLayout.

Ten en cuenta que también habilitamos el icono de la aplicación a través de setHomeButtonEnabled() y lo habilitamos para la navegación "hacia arriba" a través de setDisplayHomeAsUpEnabled().

A continuación, reenviamos los métodos de devolución de llamada onPostCreate(), onConfigurationChanged() y onOptionsItemSelected() a la alternancia:

Esto es lo que hace el syncState(), según la documentación oficial:

Sincroniza el estado del indicador de la barra de navegación con el DrawerLayout vinculado... Se debe invocar desde su Activity el método onPostCreate para sincronizar después de que se haya restaurado el estado de la instancia de DrawerLayout, y en cualquier otro momento cuando el estado haya divergido de tal manera que el ActionBarDrawerToggle no fue notificado. (Por ejemplo, si dejas de reenviar eventos del menú apropiados durante un período de tiempo).

4. Probando la aplicación

¡En este punto, podemos ejecutar la aplicación!

First app demo

Como puedes ver, al iniciar la aplicación, se mostrará el ícono de "hamburguesa" para representar la barra de navegación  en la barra de acciones. Intenta tocar el ícono de esta aplicación para abrir el menú. Además, al hacer clic en los elementos de la barra de navegación no se hará nada; vamos a manejar esa parte en la siguiente sección.

5. Manejo de Click events

Ahora, veamos cómo manejar los eventos del clic para cada uno de los elementos en el panel de navegación. Ten en cuenta que hacer clic en cualquier elemento se supone que te llevará a una nueva Actividad o Fragmento; ¡por eso se llama barra de navegación!

Primero, tu actividad necesita implementar el NavigationView.OnNavigationItemSelectedListener.

Al implementar esta declaración o interfaz, ahora debemos anular el único método: onNavigationItemSelected().

Este método se invoca cuando se selecciona un elemento en el menú de navegación. Utilizamos la expresión when para realizar diferentes acciones en función del elemento del menú en el que se hizo clic, los ids del elemento de menú sirven como constantes para la expresión when.

A continuación, debemos inicializar NavigationView y configurar este receptor dentro onCreate() de nuestra actividad.

¡Ejecuta el proyecto nuevamente!

App demo with navigation item clicks configuration

Cuando haces clic en algunos elementos, se muestra un mensaje de brindis, justo lo que esperábamos. Pero recuerda que al hacer clic en un elemento deberías llevar al usuario a una nueva Actividad o Fragmento (ignoramos esto aquí por motivos de brevedad).

Notarás que cuando haces clic en un elemento, el menú aún permanece. Sería mejor si se cerrara automáticamente cada vez que se hiciera clic en un elemento. Veamos cómo hacer eso.

Para cerrar el menú después de haber hecho clic en un enlace, simplemente invoca closeDrawer() en una instancia de DrawerLayout y pasa GravityCompat.START al método.

¡Ejecuta el proyecto una vez más y mira el resultado!

6. Manipulación del botón Atrás al ser presionado

Cuando el menú está abierto, sería una mejor experiencia para el usuario no cerrar la actividad home si se presiona el botón Atrás. Esta es la forma en que funcionan las aplicaciones populares, como la aplicación Inbox de Google.

Por lo tanto, cuando el menú está abierto y se presiona el botón Atrás, solo debería cerrarse la barra del menú en lugar de la actividad actual del home. Luego, si el usuario presiona nuevamente el botón Atrás, la actividad en el home debería cerrarse.

Así es como podemos lograr esto:

¡Ejecuta el proyecto nuevamente y pruébalo!

7. Bonificación: Usando las plantillas de Android Studio

Ahora que has aprendido sobre las API involucradas para crear una barra de navegación, te mostraré un atajo que te acelerará la próxima vez. Simplemente puedes usar una plantilla en lugar de codificar una actividad para la barra de navegación desde cero.

Android Studio proporciona plantillas de código que siguen las mejores prácticas de diseño y desarrollo de Android. Estas plantillas de códigos existentes (disponibles en Java y Kotlin) pueden ayudarte a poner en marcha rápidamente tu proyecto. Una de esas plantillas se puede usar para crear una actividad de barra de navegación.

Te mostraré cómo usar esta práctica función en Android Studio.

Para un nuevo proyecto, inicia Android Studio.

Create Android Project dialog

Ingresa el nombre de la aplicación y haz clic en el botón Siguiente.

Puedes dejar los valores predeterminados tal como están en el cuadro de diálogo Target Android Devices. Haz clic en el botón Siguiente nuevamente.

Add an Activity to Mobile dialog

En el cuadro de diálogo Agregar una actividad al dispositivo móvil, desplázate hacia abajo y selecciona la Actividad de barra de navegación. Haz clic en el botón Siguiente después de eso.

Configure Activity dialog

En el último cuadro de diálogo, puedes cambiar el nombre de la actividad, el nombre del diseño o el título si lo deseas. Finalmente, haz clic en el botón Finalizar para aceptar todas las configuraciones.

Android Studio ahora nos ha ayudado a crear un proyecto con una actividad de barra de navegación. ¡Realmente genial!

Se recomienda encarecidamente explorar el código generado.

También puedes usar plantillas para un proyecto de Android Studio ya existente. Simplemente ve a Archivo > Nuevo > Actividad > Actividad de barra de navegación.

Navigation from file menu too Navigation Drawer Activity

Las plantillas que vienen incluidas con Android Studio son buenas para diseños simples y para hacer aplicaciones básicas, pero si quieres agrandar tu aplicación aún más, puedes considerar algunas de las plantillas de aplicaciones disponibles en Envato Market.

Son un gran ahorro de tiempo para desarrolladores experimentados, ayudándoles a superar el reto de crear una aplicación desde cero y enfocar sus talentos en las partes únicas y personalizadas de la creación de una nueva aplicación.

Conclusión

En este tutorial, aprendiste a crear una barra de navegación en Android usando la API DrawerLayout y NavigationView desde cero. También exploramos cómo usar fácil y rápidamente las plantillas de Android Studio para crear una barra de navegación.

Recomiendo consultar las directrices oficiales de Material Design para las barras de navegación y así obtener más información sobre cómo diseñar y usar las barras de navegación en Android.

¡Para obtener más información sobre la programación de Android, consulta algunos de nuestros otros cursos y tutoriales aquí en Envato Tuts+!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.