BottomNavigationView Android, Como e Quando Utilizar
- 1. Android BottomNavigationView Como e quando utilizar thiengo.com.br
- 2. 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.
- 3. 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;
- 4. - 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.
- 5. 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;
- 6. - 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.
- 7. 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.
- 8. Codificação
- 9. 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.
- 10. 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
- 11. 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 BottomNavigationView também é passível de ser construído via programação, com qualquer uma das linguagens oficiais para o dev Android. MainActivity.kt
- 12. 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
- 13. 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
- 14. 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
- 15. 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
- 16. Pontos finais
- 17. 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.
- 18. 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.
- 19. 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.
- 20. 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.
- 21. 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 - https://stackoverflow.com/a/40326245/2578331 - https://stackoverflow.com/a/30214843/2578331
- 22. 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.