ActionBar sous Android (Partie 1)

Nazim Benbourahla

La version 3.0 d'Android (Honeycomb) a introduit un nouveau composant essentiel dans une application, il s'agit de la barre d'action (ActionBar).
Ce composant remplace les menus disponibles dans les anciennes versions d'Android et permet à l'utilisateur d'accéder facilement aux fonctionnalités les plus importantes d'une application.

Voici l'exemple de l'ActionBar dans l'application Google + :

Commentez

- Titre : ActionBar sous Android (Partie 1)

- Auteur : Nazim Benbourahla

- Parution : 10 mars 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Benbourahla Nazim. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Principe

- II. Exemple

- III. Résultat

- III-A. Android 2.3

- III-B. Android 3.0

- III-C. Android 4.1

- IV. Conclusion

- V. Remerciements

- VI. Liens

I - Principe

Une ActionBar peut se composer de quatre parties :

- l'icône de l'application : établit l'identité visuelle de l'application et permet aussi de naviguer dans l'application (remonter à la vue mère par exemple) ;

- Dropdown Menu : permet d'afficher le titre de la vue actuelle ainsi que naviguer dans l'application (exemple de l'application Gmail) ;

- actions principales : définit les actions principales de votre application ;

- autres actions : permet d'accéder aux fonctionnalités moins importantes de l'application.

L'implémentation d'une ActionBar s'effectue dans le dossier menu (situé dans le dossier res de votre projet) et ressemble énormément à l'implémentation d'un menu.
Afin de gérer la compatibilité avec des versions d'Android ne possédant pas d'ActionBar (entre 1.6 et 2.3.x), il est conseillé de remplacer son implémentation par des menus et cela en créant plusieurs dossiers :

- fichier styles.xml dans le dossier values : permet de spécifier le thème utilisé par l'application et donc un thème n'utilisant pas de barre d'action (conversion automatique en menu) ;

- fichier styles.xml dans le dossier values-v11 : permet de spécifier le thème utilisé (thème Honeycomb) utilisant les ActionBar fournies par cette version d'Android ;

- fichier styles.xml dans le dossier values-v14 : permet de spécifier le thème utilisé (thème ICS/JellyBean) utilisant les ActionBar fournies par cette version d'Android ;

- le nombre se situant après la lettre v correspond au numéro de l'API Android cible.

II - Exemple

L'exemple abordé dans cette partie servira à implémenter une ActionBar pour les appareils 3.x et supérieures et un menu pour les autres.

Nous allons créer une application Android possédant les actions suivantes (accessible via ActionBar ou via menu) :

- Recherche ;

- Rafraîchir ;

- Aide ;

- À propos ;

- Paramètres.

Dans le dossier menu présent dans le dossier res, créez un fichier XML représentant votre menu :

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

<item
android:id="@+id/menu_search"
android:icon="@drawable/ic_action_search"
android:showAsAction="ifRoom"
android:title="@string/menu_search"/>
<item
android:id="@+id/menu_refresh"
android:icon="@drawable/ic_action_refresh"
android:showAsAction="ifRoom"
android:title="@string/menu_refresh"/>
<item
android:id="@+id/menu_help"
android:icon="@drawable/ic_action_help"
android:showAsAction="ifRoom"
android:title="@string/menu_help"/>
<item
android:id="@+id/menu_about"
android:icon="@drawable/ic_action_about"
android:showAsAction="never"
android:title="@string/menu_about"/>
<item
android:id="@+id/menu_settings"
android:icon="@drawable/ic_action_settings"
android:showAsAction="never"
android:title="@string/menu_settings"/>

</menu>

- Chaque élément du menu correspond à la déclaration d'une balise item.

- Chaque élément possède un identifiant, une icône (nom conseillé : ic_action_*), un titre.

- L'attribut showAsAction permet de spécifier le comportement de l'élément dans une ActionBar, il peut posséder les valeurs suivantes :

- ifRoom : l'élément sera ajouté aux actions principales de l'ActionBar si une place est disponible ;

- never : ne jamais rajouter l'action aux actions principales de l'ActionBar ;

- always : toujours rajouter l'action aux actions principales de l'ActionBar. Cette valeur n'est pas conseillée, car peut entraîner une superposition d'éléments (si nombre de places disponibles < nombre d'éléments ajoutés à l'ActionBar), préférez la valeur ifRoom ;

- withText : toujours afficher le texte représentant l'action.

Sans oublier d'implémenter les fichiers styles.xml présents dans les dossiers (values / values-v11 / values-v14).

values/styles.xml

<resources>
<style name="AppTheme" parent="android:Theme.Light" />
</resources>

values-v11/styles.xml

<resources>
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar" />
</resources>

values-v14/styles.xml

<resources>
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar" />
</resources>

Maintenant, dans l'activité principale, implémenter la méthode onCreateOptionsMenu afin de charger le menu créé précédemment.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

Afin de gérer le clic sur les différents éléments du menu, implémenter la méthode onOptionsItemSelected afin de spécifier l'action à exécuter en fonction du bouton cliqué :

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_about:
// Comportement du bouton "À Propos"
return true;
case R.id.menu_help:
// Comportement du bouton "Aide"
return true;
case R.id.menu_refresh:
// Comportement du bouton "Rafraichir"
return true;
case R.id.menu_search:
// Comportement du bouton "Recherche"
return true;
case R.id.menu_settings:
// Comportement du bouton "Paramètres"
return true;
default:
return super.onOptionsItemSelected(item);
}
}

III - Résultat

Ce qui donnera :

III-A - Android 2.3

III-B - Android 3.0

III-C - Android 4.1

Vous pouvez remarquer que tous les éléments possédant la valeur « ifRoom » sont ajoutés dans l'ordre des déclarations, ce qui fait que le troisième élément ne peut pas être rajouté à l'ActionBar.

IV - Conclusion

Voilà cette première partie s'arrête ici, vous pouvez télécharger le projet ayant servi d'exemple à cette adresse

La deuxième partie disponible bientôt abordera :

- la navigation via l'icône de l'application ;

- la séparation de l'ActionBar en deux.

V - Remerciements

Je tiens à remercier tout particulièrement Feanorin qui a mis ce tutoriel au format Developpez.com.
Merci également à ClaudeLELOUP d'avoir pris le temps de le relire et de le corriger.

VI - Liens

Tutoriel origine sur Tutos-Android