Pour accélérer le développement d’applications, des bibliothèques (library en anglais) sont utilisées afin d’éviter de réécrire ce que quelqu’un d’autre a déjà fait. L’accent est porté aujourd’hui sur les composants graphiques, mais d’autres articles arriveront prochainement.
 

Android-support : ajout du DrawerLayout et du SlidingPaneLayout

navigation_drawer_open_overflow

Cette bibliothèque est développée par Google et est déjà disponible depuis de nombreux mois. Elle a pour objectif de backporter (apporter sur d’anciennes versions du système) les composants qui ont été introduits dans les dernières versions d’Android. On y retrouve le support des Fragments, des CursorAdapter, du ViewPager (une liste verticale swipable comme sur le Google Play)…

Mais si nous évoquons aujourd’hui cette bibliothèque, ce sont pour les nouveautés introduites lors de la dernière mise à jour. Comme vous avez pu le remarquer le fly-in menu (menu qui est caché sur un des côtés de l’écran) est maintenant un pattern officiel. Il est présent sur le nouveau GMail, Google Play Music, Google Play Books, Google Earth, Shopper, etc.

Ce composant est nommé DrawerLayout et est très simple à intégrer dans les applications existantes. L’indicateur dans l’ActionBar qui bouge selon le pourcentage de visibilité de ce menu est aussi intégré : l’ActionBarDrawerToggle. Vous noterez toutefois que sur l’application Hangouts, ce n’est pas le même menu qui ressemble plutôt au Sliding Menu de Jeremy Feinstein. Ce composant est aussi dans l’Android-support et s’appelle le SlidingPaneLayout. D’autres nouveautés sont au rendez-vous et consultables ici.

Notez qu’une ActionBarCompat sera prochainement intégrée, mais en attendant l’ActionBarSherlock reste la référence.

 

ActionBar-PullToRefresh : intégrer le nouveau pattern de GMail

ActionBar-pulltorefresh

Le PullToRefresh est un pattern venant tout droit d’iOS, mais bien qu’il ne soit pas officiel sous Android, il est souvent utilisé car il évite d’appuyer sur le bouton dans l’ActionBar. Il ne fait toutefois pas l’unanimité, car d’une part Google ne l’utilise pas et d’autre part il est relativement difficile à découvrir.

Ce n’était sans compter sur la dernière version de GMail qui propose maintenant sa propre implémentation. Il ne s’agit pas encore d’un pattern officiel (= il n’est pas présent dans les guidelines), mais fait déjà l’objet d’une bibliothèque de ChrisBanes (à qui l’on devait déjà la bibliothèque la plus répandue de l’ancien PullToRefresh).

Elle ne reflète pas parfaitement le comportement de GMail, dans la mesure où elle établit sa progression de gauche à droite et non du centre vers les extrémités. La liste des TODOs en fait état, tout comme le backport vers d’anciennes versions d’Android, car pour l’instant l’API level minimum est 14 (Ice Cream Sandwich).

Vous pouvez obtenir ActionBar-PullToRefresh directement sur GitHub et/ou tester une apk avant de l’intégrer dans votre projet.

 

FadingActionBar : recréer l’effet de Google Music

readme_pic

L’application Google Music a été mise à jour lors de la Google I/O pour notamment supporter le nouveau All-Access (Spotify-like, Deezer-like… made in Google). L’interface a été entièrement revue et offre notamment une ActionBar qui change d’opacité en fonction de la position dans la ScrollView. Un composant personnalisé a-t-il été nécessaire ? Pas vraiment, il suffit de lire l’article de Cyril Mottier pour s’en convaincre.

Et quelques heures plus tard, une bibliothèque a été créée afin d’utiliser ce nouveau concept.

 

PagerSlidingTabStrip : le PagerTabStrip du Play Store

Screen Shot 2013-06-11 at 8.35.10 AM

Le PagerTabStrip est le composant officiel (disponible dans la Support Library) pour inscrire en haut de l’écran le nom du Fragment actuellement affiché. On le retrouvait notamment sur l’ancien Play Store. Mais sur la nouvelle version de la boutique de Google, il y a maintenant des onglets et le passage de l’un à l’autre fait grossir le sélecteur sur le dessous.

Même recette que précédemment : Kirill Grouchnikov, un Googler travaillant sur l’application Android Google Play, a expliqué le principe de ce nouvel indicateur. Quelques heures plus tard, une bibliothèque était mise en ligne pour offrir le même comportement. Notez qu’elle ne s’arrête pas là, car elle propose également un copié/collé des onglets que l’on retrouve sur les popups des contacts.

 

UndoBar : un fork avec la personnalisation en ligne de mire

Screen Shot 2013-06-11 at 8.43.50 AM

Une barre permettant d’annuler l’action précédente est de plus en plus présente sur les applications officielles. C’est le cas dans la Galerie, GMail… et Roman Nurik (Googler, auteur de DashClock et présentateur du podcast Android Design in Action) a créé une bibliothèque pour l’utiliser depuis Android 2.x.

Elle est en revanche peu flexible et c’est partant de ce constat qu’un fork a été créé afin de pouvoir changer rapidement les couleurs ou les icônes. Trois styles sont intégrés, mais libre à vous d’en créer d’autres pour mieux l’intégrer dans votre application.

 

DateTimePicker : utiliser le nouveau DatePicker de Google Agenda

Screen Shot 2013-06-11 at 8.16.13 AM

Il y a quelques jours Google Calendar/Agenda a été mis à jour et offre un nouveau composant graphique pour la sélection de la date et de l’heure. Flavien Laurent (Biboune), un développeur français, a rapidement créé sa propre implémentation et l’a partagée avec tous. Pour l’instant le ClockPicker est en cours d’élaboration.

Une démonstration est téléchargeable ici et le projet est consultable sur GitHub.

 

SuperToasts

Les ravages des mockups : un Galaxy Note a l'air aussi grand qu'une Nexus 7

Les ravages des mockups : un Galaxy Note qui a l’air aussi grand qu’une Nexus 7

Les Toasts sont ces petits messages qui s’affichent en bas de l’écran et informent l’utilisateur. Son remplaçant non officiel, le Crouton (vous voyez la référence ?) est de plus en plus utilisé, mais grâce aux SuperToasts, vous allez pouvoir contourner les limitations du composant natif. Vous allez ainsi pouvoir utiliser le Toast à la GMail où un bouton est affiché sur la droite, des Toasts sous la forme de cartes Google Now, une ProgressBar…

La bibliothèque est encore en cours de développement et son intégration dans des projets en production est déconseillée. Mais mettre dans vos favoris SuperToasts est une excellente idée !

En conclusion, n’hésitez pas à utiliser ces bibliothèques… mais surtout pensez à inscrire les licences dans vos applications. Un trop grand nombre de développeurs oublient de le faire !