Des badges dans la BottomNavigationView sur Android
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.

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 😐:

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’undrawableen tant qu’icône dans le menu de la barre
Résultat :

C’est fonctionnel ! Le comportement est celui que je recherchais.
Un APK de démo et les sources sont sur le repository GitHub suivant :
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
