BottomNavigationView es un nuevo patrón de navegación para aplicaciones Android que se sitúa en la parte inferior de la pantalla facilitando de esta manera la exploración y el cambio entre vistas de nivel superior con un solo toque.

En marzo de 2016 Google añadió a su Guía de Material Design las pautas para su utilización pero hasta hace poco tiempo no había disponible una implementación oficial para este componente.

En este post, veremos cómo implementar este nuevo componente haciendo uso de la design-support-library.

Si quieres seguir todas las directrices de cómo utilizar este nuevo componente puedes consultar más información en su página oficial en las guías de Material Design.

image1

 

 

 

 

 

 

Puedes ver el código completo de este ejemplo en Github.

Añadir dependencias:

image2

Crear menú:

A tener en cuenta:

  • Se recomienda tener de 3 a 5 acciones en el menú.

image3

Personalizar estados del menú:

A tener en cuenta:

  • Google recomienda usar el primary color para la acción de navegación en foco (incluido el icono y cualquier etiqueta de texto presente).
  • Si la barra de navegación inferior está coloreada, se recomienda poner el icono y la etiqueta de texto de la acción en foco en blanco o negro.

image4

Añadir Widget al layout:

image5

Manejar eventos:

image6

Alternativas

La NavigationBottomView es un componente que empezaremos a ver cada vez más y tenemos distintas opciones para implementarla. En este post hemos utilizado la design-support-library pero también existe algunas librerías desarrolladas por la comunidad antes de la implementación oficial y que vale la pena que conozcas:

https://github.com/roughike/BottomBar

https://github.com/sephiroth74/Material-BottomNavigation

Puedes ver el código completo de este ejemplo en Github.

 

Arthur AntunesArthur Antunes

Leave a Reply

Your email address will not be published. Required fields are marked *