Bottom Navigation View

Posted by in Android, Material Design, Menús

Dentro de las opciones para incluir un menú en una aplicación, la librería de diseño ha incluido un elemento nuevo llamado BottomNavigationBar que permite la interacción directa con elementos sin necesidad de desplegar menos adicionales, con un funcionamiento similar a una barra de pestañas. Desde Google se incide en que es importante que esta barra de inferior se utilice teniendo en cuenta algunos principios:

  • Las opciones de menú estarán entre 3 y 5 items
  • Las opciones deben ser accesibles desde cualquier parte de forma necesaria
  • Nunca utilizarlas para pantallas de settings o tareas muy simples
  • Limitar su uso conjunto al de las pestañas
  • No utilizar variedad de colores en los iconos de la barra
  • No abusar de los efectos en el cambio de vistas al pulsar opciones de menú

Para poder empezar a utilizar el elemento primero se debe importar la librería de diseño, la cual permitirá seleccionarlo como elemento de interfaz:

Una vez implementada se selecciona BottonBar en el xml, situándolo en el lugar seleccionado:

Donde algunas de las configuraciones del elemento BottonNavigationView en xml son:

  • layout_insetEdge: ubicación de la barra de menu
  • menu: archivo xml donde se indican las opciones de menú
  • itemIconTint: color que tendría el icono
  • itemTextColor: color que tendrá el texto asociado al icono

El archivo correspondiente al menú se codificaría con las opciones de la siguiente forma:

Adicionalmente, si se quiere personalizar los colores tanto del icono tanto del texto cuando está seleccionado o de seleccionado se puede utilizar un elemento de tipo selector mediante el cual se indican los estados y colores asociados. Para ello hay que crear un archivo selector de colores con el siguiente código:

Y este se aplica a las configuraciones de color dentro del elemento BottomNavigationView

Para poder darle funcionalidad se utiliza el método setOnNavigationItemReselectedListener() el cual evalúa la pulsación en cada uno de los elementos del menú

Efectos adicionales

Adicionalmente se pueden incorporar efectos para que la barra de navegación inferior desaparezca cuando se realiza una acción concreta. Para ello se utiliza el ya visto coordinator layout con las etiquetas layout_scrollFlags y layout_behavior.

Adicionalmente se puede incluir la animación con una barra superior con un efecto conjunto