Des badges dans la BottomNavigationView sur Android

Baptiste Carlier
Sep 8, 2018 · 3 min read

Voilà quelques jours que j’ai commencé le développement d’applications Android avec Kotlin. Cela faisait quelques années que @_benas_ m’avait parlé de ce langage alors qu’il était en prestation à @worldlinefrance avec moi et maintenant voilà que j’en fait.

Une question technique de conception s’est posée et j’ai eu envie de voir la faisabilité en initiant un POC.


Quel est le but de ce petit dev ?

La librairie de support de design d’Android offre le composant BottomNavigationView. Cette vue crée une barre de navigation en bas de l’écran facilitant l’affichage des contenus principaux de l’app et leur exploration en un seul clic.

C’est un modèle assez simple et populaire dans les UI des applications.

material.io

Malheureusement, cette vue n’offre pas nativement la fonctionnalité de “badges” (appelons ça comme ça) dans les icônes de la barre.

Ce qui est étrange car de nombreuses apps l’ont implémentée, dont celles de Google 😐:

Philips Hue — Netflix — Google Photos — YouTube

Let’s do this! 👍

La BottomNavigationView est utilisée habituellement avec un couple de ViewPager et des Fragments. L’Activity doit pouvoir écouter si un Fragment veut mettre à jour la barre. J’ai mis un système de callback.

Aussi, le BottomNavViewModel permet du stocker l’état de la vue afin de pouvoir effectuer un binding.

Il y a eu des difficultés dans la dernière étape lors du changement des icônes :

  • Pour indiquer la bonne couleur de l’icône lors qu’il est sélectionné
  • Pour inflate les vues correctement avec un layout à la place d’un drawable en tant qu’icône dans le menu de la barre

Résultat :

Bottom Navigation View Badge

C’est fonctionnel ! Le comportement est celui que je recherchais.

Un APK de démo et les sources sont sur le repository GitHub suivant :

▶️github.com/BapNesS/android-BottomNavigationViewBadge-kt


Conclusion

Le but de ce dev était de faire quelque chose de simple, facilement utilisable. C’est fait.

Dans l’idéal j’aimerais compléter la touche de MVVM pour me faire plus la main dessus et que cela soit plus moderne.

Faire une librairie Android plutôt qu’un snippet de démo aurait été plus propre et réutilisable. Mais il en existe déjà qui vont encore plus loin :

➡️ github.com/aurelhubert/ahbottomnavigation
➡️ github.com/roughike/BottomBar
➡️ github.com/sephiroth74/Material-BottomNavigation
➡️ github.com/qstumn/BadgeView

Baptiste Carlier

Written by

Parfois je lis, et de temps en temps j’écris.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade