BottomNavigationView Android, Como e Quando Utilizar

Android
BottomNavigationView
Como e quando utilizar
thiengo.com.br

O componente visual
O BottomNavigationView foi lançado no
Android, como API nativa, somente em
março de 2016, junto a versão 25 da
Material Design Support Library.
O foco deste componente visual é em
devices mobile, sendo recomendado,
quando em sistemas desktop ou Web, o uso
do menu gaveta.
Por fazer parte do pacote de suporte do
Android, o BottomNavigationView atende
às principais versões deste SO.
Com o bottom navigation é possível prover
ao usuário acesso rápido a telas de
contextos similares, porém há uma série de
regras de negócio sobre quando e como
devemos utilizar este widget, regras também
apresentadas e discutidas nos próximos
slides.

Especificações de design
- Altura de 56dp e largura variando entre
80dp e 168dp:
- A exceção é quando há animação e
itens suficiente, na barra de fundo,
para exigir que o item atualmente em
foco tenha um espaço bem maior do
que os outros:
- Item ativo, de 96dp a 168dp;
- Item inativo de 56dp a 96dp.
- Quando há um número de itens onde
até mesmo os rótulos de todos eles
podem ser apresentados, neste caso
todas as abas devem ter a mesma
largura em qualquer status.
- Ícones devem ter medidas como as dos
ícones do NavigationView, 24dp x 24dp;

- Os rótulos dos bottom actions, itens do BottomNavigationView, devem ser
pequenos e significativos, isso caso haja a necessidade de também coloca-los
junto aos ícones, e não devem ser truncados, ocupando apenas uma linha;
- O design dos itens deve ser em duas categorias: item em foco; e itens fora de
foco. Ou seja, não utilize cores distintas para itens diferentes em foco. Se a cor
primária do app for a utilizada para itens em foco, sempre utilize ela
independente do item e da cor principal da tela de conteúdo acionada por ele.

Especificações de comportamento
- O acionamento de qualquer bottom
action não deve abrir outros menus
ou dialogs;
- Caso seja acionado um item já em
foco, o comportamento deve ser de
refresh de conteúdo, o que faríamos
caso um SwipeRefreshLayout
estivesse em uso;
- A navegação entre os itens do
BottomNavigationView deve
cancelar a tarefa atual em curso do
item anteriormente em foco;
- O apresentar / esconder do
BottomNavigationView, de acordo
com o scroll da tela, é algo opcional;

- O gesto de swipe na área de conteúdo não deve permitir a mudança de
conteúdo e nem mesmo a mudança de item no bottom navigation:
- O efeito de transição de conteúdo, se presente, deve ser com a animação de
fade (in / out).
- A navegação hierárquica dos conteúdos não deve tirar da tela o
BottomNavigationView, o que ocorre quando utilizando o menu gaveta.

Especificações de uso
- O BottomNavigationView deve ser considerado como opção de uso somente
para contextos onde há de 3 a 5 telas de alto nível no aplicativo:
- Para menos três telas, utilize tabs;
- Para mais de 5 telas, utilize o menu gaveta, isso, pois mais do 5 itens
atrapalha na experiência do usuário, UX, os itens ficam muito próximos uns
aos outros.
- Os conteúdos dos itens do bottom navigation devem ter similar importância no
aplicativo;
- Evite o uso, em mesma tela, de tabs e BottomNavigationView, pois isso tende
a confundir o usuário;
- O back button do device não deve acionar navegação de volta entre os itens do
BottomNavigationView, ou seja, não há o trabalho de empilhamento entre os
fragmentos acionados a partir dos bottom actions.

Instalação
Para poder utilizar o BottomNavigationView
é necessário, no Gradle App Level, a
referência a biblioteca de suporte do Material
Design:
Certifique-se de sempre estar utilizando a
versão mais atual da library de suporte.

Definição em XML
Diferente do DrawerLayout que trabalha como uma espécie de invólucro a outros
componentes necessários a ele, o BottomNavigationView, apesar de herdar do
FrameLayout, é utilizado de maneira isolada, digo, sem componentes filhos
diretos, com uso de tags de abertura e de fechamento.
/res/layout/activity_main.xml
/res/menu/activity_main_bottom_actions.xml
Resultado em tela

Definição em linguagem de programação
Para a parte de programação, o principal é o acesso aos listeners de
acionamento e re-acionamento de bottom actions.
No código Kotlin ao lado
é assumido que o plugin
kotlin-android-extensions
está definido no projeto,
por isso não há
necessidade de uso do
método findViewById().
Todo o código XML do
também é passível de
ser construído via
programação, com
qualquer uma das
linguagens oficiais para
o dev Android.
MainActivity.kt

Customização de itens
Caso queira definir outras cores
para os bottom actions e seus
componentes, pode utilizar os
atributos: app:itemBackground,
app:itemIconTint e
app:itemTextColor.
O conteúdo de cada um destes
atributos pode ser uma cor direta,
como em: @color/colorPrimary.
Ou um drawable que permite
mudanças de estilo de acordo com
o status do item, como o
@drawable/
bottom_item_background_color.
/res/drawable/bottom_item_background_color.xml
/res/layout/activity_main.xml

Note que no caso da definição
de um <selector> para o
atributo app:itemBackground,
ao invés de android:color
deverá ser utilizado o atributo
android:drawable.
Caso não queira trabalhar o
background dos itens de acordo
com os estados deles, algo
correto de se fazer quando
seguindo as regras do bottom
navigation no Material Design,
utilize o atributo
android:background.
O resultado é o mesmo do que
o apresentado com o
app:itemBackground quando
utilizando somente uma cor.
Resultado dos códigos XML do slide anterior
BottomNavigationView com android:background

Animação
Utilizando a API nativa do
BottomNavigationView não
precisamos nos preocupar com a
codificação de animação que nos
permitirá seguir as regras do
Material Design para este widget.
A versão nativa já faz, com
maestria, a parte dela: Ripple Effect,
mudança de cor e
redimensionamento de itens e
rótulos, incluindo a não
apresentação de rótulos de itens
não acionados em uma bottom
navigation pequena.
Clique para visualizar a animação

A parte de animação que devemos
implementar sem auxílio da API do
BottomNavigationView é a de transição de
fragmentos, algo também definido, como
opcional, nas especificações deste widget.
Clique para visualizar a animação

Curiosidade
Na documentação, tanto a oficial do Android como a oficial do Material Design, não
há restrições de uso do BottomNavigationView junto a:
- DrawerLayout e NavigationView, também conhecidos como Menu Gaveta;
- BottomSheet;
- Snackbar;
- FloatingActionButton.
Uma observação importante é que não há necessidade e nem mesmo é inteligente
querer utilizar um ViewPager, que facilita a transição e cache de fragmentos, junto
ao BottomNavigationView. Isso principalmente pelo ViewPager permitir, por
padrão, a animação de swipe entre fragmentos, algo não permitido no bottom
navigation.

Limitações
Apesar da API nativa do BottomNavigationView ser bem simples de utilizar, ela
fica devendo em:
- Não fornecer uma maneira trivial de vincular fragmentos e animações de
transição aos itens, bottom actions. Algo que é possível quando utilizando
TabLayout e ViewPager;
- Não fornecer uma maneira trivial de ativar o scroll da barra de fundo de acordo
com o scroll do conteúdo em tela.

Outras APIs
A seguir alguns conteúdos com outras APIs de BottomNavigationView que
podem ser úteis em sua jornada como desenvolvedor Android:
- Ultimate Guide to Bottom Navigation on Android;
- AHBottomNavigation, API bottom navigation do artigo indicado no item anterior;
- Uma série de APIs no Android-Arsenal.

Conclusão
Com o BottomNavigationView, mesmo sabendo da não restrição do trabalho
junto ao menu gaveta, podemos assumir que ele veio também para substituir, em
alguns casos (de três a cinco itens), tanto o drawer navigation como também as
tabs de topo.
Respeitando ao menos as regras de cores, ícones e rótulos, já é o suficiente para
termos um bom uso do widget discutido nestes slides.
Caso precise de alguma funcionalidade ainda não atendida pela implementação
nativa do componente, não deixe de pesquisar por APIs de terceiros que permitam
o uso mais customizado do bottom navigation, que até o momento da construção
deste conteúdo, a versão nativa, não permitia de forma trivial o scroll de acordo
com a tela.
Fique atento quanto ao uso do BottomNavigationView, pois em alguns conteúdos
de estudo para o desenvolvimento destes slides foram encontrados casos onde um
ou outro item deste widget ficava desativado devido a algum passo que o usuário
ainda não havia percorrido no aplicativo. Uma das regras de negócio do
BottomNavigationView é o acesso imediato ao conteúdo do bottom action
acionado, sem necessidade de pré-requisitos.

Fontes
Conteúdo completo, em texto e em vídeo, no link a seguir:
- https://www.thiengo.com.br/bottomnavigationview-android-como-e-quando-utilizar
Fontes:
- https://material.io/guidelines/components/bottom-navigation.html
- https://developer.android.com/reference/android/support/design/widget/
BottomNavigationView.html
- https://medium.com/@hitherejoe/exploring-the-android-design-support-library-
bottom-navigation-drawer-548de699e8e0
- https://stackoverflow.com/a/44778453/2578331

Para estudo
- Treinamento oficial:
- Prototipagem Profissional de Aplicativos Android.
- Livros oficiais:
- Receitas Para Desenvolvedores Android;
- Refatorando Para Programas Limpos.
- Redes:
- Udemy;
- YouTube;
- Facebook;
- LinkedIn;
- GitHub;
- Twitter;
- Google Plus.
- Blog App.

Android
thiengo.com.br
Vinícius Thiengo
thiengocalopsita@gmail.com

BottomNavigationView Android, Como e Quando Utilizar

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a BottomNavigationView Android, Como e Quando Utilizar

Semelhante a BottomNavigationView Android, Como e Quando Utilizar (20)

Mais de Vinícius Thiengo

Mais de Vinícius Thiengo (13)

Último

Último (9)

BottomNavigationView Android, Como e Quando Utilizar