ActionBar sous Android (Partie 1)

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) ;
• D ropdown Menu  : permet d'afficher le titre de la vue actuelle ainsi que naviguer dans l'application (exemple de l'application Gmail) ;
• a ctions principales  : définit les actions principales de votre application ;
• a utres 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 .

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).

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

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

<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);
        }
}

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.

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.

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.

Tutoriel origine sur Tutos-Android