La version 3.0 d’Android (Honeycomb) à 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 version 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 + :

Action Bar Google +

Principe

Une ActionBar peut se composer de 4 parties :

  • L’icone de l’application : Etablie 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éfinie 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éent 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 chiffre se situant aprés la lettre v correspond au numéro de l’API Android cible

Exemple

L’exemple abordé dans cette partie servira à implémenter une ActionBar pour les appareils 3.x et supérieur 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
  • Rafraichir
  • Aide
  • A 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 élement du menu correspond à la déclaration d’une balise item
  • Chaque élement possède un identifiant, une icone (nom conseillé : ic_action_*), un titre
  • L’attribut showAsAction permet de spécifier le comportement de l’élement dans une ActionBar, il peut posséder les valeurs suivantes :
    • ifRoom : L’élement 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é car peut entrainer une superposition d’élement (si nombre de place disponible < nombre d'élément ajouté à 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ésent 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 implementer la méthode onCreateOptionsMenu afin de charger le menu crée 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 à executer en fonction du bouton cliqué :

@Override
public boolean onOptionsItemSelected(MenuItem item) {
	switch (item.getItemId()) {
	case R.id.menu_about:
		// Comportement du bouton "A 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);
	}
}

Ce qui donnera :

Android 2.3

Android 3.0

Android 4.1

Vous pouvez remarquer que tous les éléments possédant la valeurs “ifRoom” sont ajoutés dans l’ordre des déclarations, ce qui fait que le 3éme élement ne peux pas être rajouté à l’ActionBar.

Conclusion

Voila 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’icone de l’application.
  • Séparation de l’ActionBar en deux.
Categories: Tutoriels

11 Responses so far.


  1. NASSER dit :

    j’ai pas trouvé la même résultat , j’ai pas le button de la liste des options supplémentaire a droit de la bar.

Leave a Reply


Notifiez-moi des commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.