Nantes Mobi Parkings – ActionBarSherlock – Episode 3

Cet article est le troisième de la série sur l’application Nantes Mobi Parkings. Pour rappel, l’épisode #1 présentait le projet dans sa globalité. L’épisode #2 s’est concentré sur l’intégration technique d’une carte OpenStreetMap sur Android. Dans ce troisième article, je vous propose d’étudier (sous la forme d’un tutoriel) un autre aspect technique du projet : l’utilisation d’une ActionBar, compatible avec l’ensemble des terminaux Android disponibles sur le marché.

“Action Bar” quezako ?

Pour ceux qui ne connaissent pas bien Android, commençons par une petite description de l’Action Bar. C’est un composant graphique essentiel des applications Android, qui apparaît en haut de chaque écran, sous la barre de notification. Il permet notamment de donner une identité visuelle à l’application (icône et nom). Ainsi, l’utilisateur pourra l’identifierd’un seul coup d’œil.

ActionBar de Nantes Mobi Parking en mode portrait

ActionBar de Nantes Mobi Parking en mode paysage

Cette barre permet également de naviguer entre les différentes vues de l’application et de proposer à l’utilisateur un moyen d’accéder aux actions souvent utilisées (ie. en remplacement de la fameuse touche “Menu” d’Android qui est sensée disparaître – sauf chez Samsung :) Je vous invite à lire le guide de mise en oeuvre proposé par Google ainsi que les cas d’usages possibles pour l’utilisation de l’ActionBar.

Mais j’ai un vieux téléphone, pas le Nexus 7 en Android 4.1 !

Le mécanisme d’ActionBar est disponible dans le SDK Android officiel, depuis la version 3.x d’Android (avec des améliorations importantes dans la version 4.x). Comme vous le savez sans doute, la fragmentation d’Android est assez forte (et la tendance n’est pas encore prête de s’inverser – avec encore 64% de téléphone avec la version 2.3 d’Android). La question que l’on se pose naturellement est le support de ce pattern d’interface graphique sur des versions antérieures… J’exclus volontairement de réaliser plusieurs versions de la même application pour différentes versions d’Android – les applications Google “officielles” ne semblant pas suivre cette voie. Google a évidemment bien compris ce problème et met à notre disposition, sur son site dédié à Android, une bibliothèque de compatibilité qui permet de proposer une implémentation limitée de certains composants (ActionBar, Fragments, AsyncTaskLoader…) . Mais comme je l’ai déjà indiqué, l’ActionBar d’Android 3.x n’est pas exactement la même que celle de la version 4.x… Bref, Google propose des outils mais ne règle pas vraiment le problème…

ActionBarSherlock, vient à mon secours !

Jake Wharton – appelons le “Sherlock” – s’est donc posé une question simple : est-il possible de proposer la toute dernière version de l’ActionBar sur des versions antérieures d’Android (et donc sur les branches 3.x mais aussi 2.x) en proposant la même API et les mêmes fonctionnalités. La stratégie de Jake Wharton a été plutôt simple : utiliser le code source mis à disposition sur le projet Android Open Source Project (AOSP) et faire les modifications nécessaires pour le faire fonctionner sur des versions antérieures ! Pour résumer ActionBarSherlock (ABS), c’est :

  • l’API “standard” de l’ActionBar sur n’importe quelle version d’Android ;
  • l’implémentation native sur Android 4.x – il se comporte alors simplement comme une simple wrapper ;
  • une implémentation dédiée pour toutes les versions antérieures (c-a-d même avec Android 3.x) – en utilisant une version largement modifiée par rapport à ce qui est disponible dans le projet AOSP

A titre d’information, le projet ActionBarSherlock est assez actif : il fait notamment partie du TOP 5 des projets les plus surveillés sur GitHub. Parmi leurs références, on peut citer l’application Android Foursquare… et Nantes Mobi Parking :)

Petite mise en pratique

Quelques prérequis…

Pour la mise en pratique, je suppose que vous avez :

  • Installer un JDK 1.6 + Eclipse 4.2 (Java Edition) ;
  • Ajouter le plugin Android ADT 20.x pour Eclipse ;
  • Télécharger le SDK Android ;
  • Télécharger la plateforme Android 4.0.3 (API 15) et Android 2.2 (API 8)
  • Créer un émulateur (AVD) pour chacune des deux plateformes

Si ce n’est pas le cas, je vous invite à le faire avant de poursuivre :)

Récupération d’ActionBarSherlock

Se rendre sur la page suivante et récupérer la dernière version de ActionBarSherlock. L’archive téléchargée contient les sources de cette librairie. En effet, les outils de compilation d’Android supportent assez mal les systèmes de packaging (et ne me parlez pas de Maven et de ces apklib :). 1. Il faut donc importer ce projet dans Eclipse comme un projet Android standard : File > New > Android Project From Existing Code 2. Sélectionner uniquement le répertoire “library” pour importer simplement la librairie (sans ses exemples). 3. Supprimer le répertoire libs/, puis dans le menu contextuel choisir Android > Add. 4. Il faut ensuite vérifier certains paramètres dans les propriétés du projet :

  • Dans la section Android, l’option Build Target doit avoir la valeur Android 4.0.3 ;
  • Toujours dans la section Android, l’option Is Library doit être cochée ;
  • Dans la section Java Compiler, l’option compiler compliance level doit être à 1.6

Intégration dans une application

Afin de rapidement prendre en main ABS, je vous propose de créer un nouveau projet d’exemple afin de recevoir nos différents tests ! 1. File > New > Android Application Projectpuis mettre les options suivantes :

  • Application Name : Ippon ABS Test
  • Build SDK : Android 4.0.3 (API 15)
  • Minimum Required SDK : API 8 : Android 2.2

2. Décocher Create custom launcher icon et cliquer sur Next. 3. Choisir Blank Activity et ne rien changer sur les valeurs par défaut ensuite. Vous pouvez ensuite lancer l’application d’exemple sur un émulateur Android 2.2 et un émulateur Android 4.0.3. Vous pourrez observer que si l’application fonctionne bien sur les deux plateformes, elle ne profite que de l’ActionBar que sous la version 4.0.3 d’Android. Sur un terminal Android 2.2, seul le titre de l’application s’affiche en haut de l’écran et les “actions” ne sont accessibles que par l’utilisation de la touche physique “Menu”.

Application sur Android 2.2

Application sur Android 4 (avec boutons natifs)

Application sur Android 4 (sans boutons natifs)

Voyons maintenant comment régler cela en utilisant ActionBarSherlock (ABS). 1. Se rendre dans les propriétés du projet Eclipse pour déclarer que ABS est une dépendance de ce projet. Dans la section “Library”, Cliquer sur “Add” et sélectionner le projet “library” importé précédemment. 2. Effectuer ensuite quelques modifications sur le code exemple :

  • Dans la classe MainActivity, remplacer public class MainActivity extends Activity { par public class MainActivity extends SherlockActivity {
  • Remplacer l’import de import android.view.Menu; par import com.actionbarsherlock.view.Menu;
  • Remplacer également getMenuInflater() par getSupportMenuInflater()
  • Supprimer également les répertoires values-v11 et values-v14
  • Dans values/styles.xml, remplacer <style name="AppTheme" parent="android:Theme.Light" /> par <style name="AppTheme" parent="Theme.Sherlock.Light.DarkActionBar.ForceOverflow" />

NB: L’utilisation du thème avec le suffixe “ForceOverflow” indique que l’on souhaite forcer l’affichage du bouton portant 3 points verticaux (et cela même si le smartphone dispose d’une touche physique menu) Une fois ces modifications effectuées, vous pouvez à nouveau lancer le projet dans votre émulateur Android 2.2 (API 8). Vous obtiendrez alors l’affichage de votre ActionBar sur l’écran :

Application avec ActionBarSherlock (sous Android 2.2)

Application avec ActionBarSherlock (sous Android 2.2)

Voila nous venons de survoler très rapidement la librairie ActionBarSherlock qui permet donc de disposer d’une sympathique ActionBar sur d’anciennes versions d’Android. Cette librairie renferme beaucoup d’autres options (pour la gestion des thèmes, des moyens d’accéder aux activités de l’application, etc…). Je vous invite donc à aller observer les exemples fournis avec ABS ou bien directement le code source de Nantes Mobi Parkings !

Obtenir l'application Nantes Mobi Parkings sur Google Play

Obtenir l’application Nantes Mobi Parkings sur Google Play

Forker le projet Nantes Mobi Parkings sur GitHub

Forker le projet Nantes Mobi Parkings sur GitHub

TwitterFacebookGoogle+LinkedIn