A barra de navegação inferior é uma importante ferramenta para auxiliar na usabilidade de um aplicativo movél.

Neste post, veremos seus princípios, boas práticas e implementação em um aplicativo android.

1. Princípios:

Ergonômico: a barra de navegação inferior é de fácil acesso no dispositivo móvel.

Consistente: quando em uso, a barra aparece abaixo de todas as telas do gráfico.

Relacionados: Os destinos da barra de navegação devem estar relacionados em nível de importância.

2. Casos de uso:

Tipos de destinos:
A barra de navegação inferior deve ser usada para facilitar o acesso aos destinos de alto nível, que podem ser acessados em qualquer lugar do app. Além disso, não devem ser destinos de tarefas únicas como configurações ou preferências.

Quantidade de destinos:
Recomenda-se a implementação de pelo menos 3 e no máximo 5 destinos. Para menos de 3 destinos, utilize guias superiores. Para mais de 5 destinos utilize guias superiores ou um painel.

Combinações:
Evite utilizar a barra de navegação inferior em conjunto com guias superiores para não confundir os usuários.

3. Implementação no Android

A implementação da barra de navegação inferior no Android pode ser facilmente realizada pelo Android Studio. Ao iniciar o projeto, deve-se escolher o template "Bottom Navigation Activity".

Dessa forma, o projeto é criado com a barra de navegação inferior para 3 destinos. Já estão implementados o gráfico de navegação, a Activity principal e os Fragments relativos aos destinos.

No layout da Activity principal, é possível ver a implementação da View referente a Bottom Navigation.

Também é implementado o layout do menu, onde é possível acrescentar, editar ou remover os itens referentes aos destinos.

Com as configurações iniciais do template, este é o resultado da barra de navegação inferior no aplicativo:

4. Referências:

Developers. Atualizar componentes da IU com NavigationUI. Navegação Inferior. Disponível em:
https://developer.android.com/guide/navigation/navigation-ui#bottom_navigation. Acesso em: 15 abr. 2021.

Material Design. Bottom navigation. Disponível em: https://material.io/components/bottom-navigation. Acesso em: 15 abr. 2021.

PIRES, Alifyz F. Usando Navigation Component — Android Jetpack. 2019. Disponível em: https://medium.com/android-dev-br/usando-navigation-component-android-jetpack-e1356921b31d. Acesso em: 15 abr. 2021.