Menu – Ajouter des actions à l’ActionBar

L’ActionBar, placée en haut de l’écran, permet d’afficher un bouton retour et le titre de l’activité, mais elle permet aussi d’ajouter des actions contextuelles, comme sur l’image suivante :

device-2015-06-27-153236 2

Voyons ensemble comment ajouter nos propres actions

Déclarer notre menu

Première étape, il faut déclarer nos actions (aussi nommées options), cela se fait dans des fichiers nommés “menu”.
A la façon des layout, il faut les placer dans nos ressources. Pour cela, créez un dossier menu dans res (si il n’existe pas déjà).

Puis créez un fichier res/menu/menu_test.xml

menu_test.xml

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

    <item
        android:id="@+id/action_save"
        android:icon="@android:drawable/ic_menu_save"
        android:title="@string/action_save"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_delete"
        android:icon="@android:drawable/ic_menu_delete"
        android:title="@string/action_delete"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="@string/action_settings"
        app:showAsAction="never" />

</menu>

actionbar_sample_1

Les actions sont définis dans un tag nommé menu.
Chaque entrée est ensuite définit par un item, qui correspond à une action qui sera ajoutée à l’ActionBar.

J’ai ici utilisé les drawables fournits par le SDK android (@android:drawable/XXX) , mais il est aussi possible d’utiliser nos images personnalisées (@drawable/XXX).

Un item possède

  • id : un identifiant unique
  • icon : une image (pointe vers un drawable)
  • title : une titre, utilisé quand aucun icon n’est définit, ou lorsque l’on effectue un long click sur l’item
  • showAsAction : le mode d’affichage de l’item

showAsAction

Le showAsAction, précédé du package app (ne pas mettre android:showAsAction !) définit comment l’action va être affichée dans l’ActionBar.

ifRoom

Si vous définissez le showAsAction à ifRoom, l’item sera affiché directement dans l’ActionBar, en tant que “bouton clickable”.

Voici un exemple :

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

    <item
        android:id="@+id/action_save"
        android:icon="@android:drawable/ic_menu_save"
        android:title="@string/action_save"
        app:showAsAction="ifRoom" />

</menu>

Petit détail, le ifRoom esaie d’afficher les éléments si il en a la place. Imaginons que nous ayons 10 items en ifRoom, les éléments qu’il n’a pas eu la place d’affiché seront placés dansl’overflow (3 points).

Capture d’écran 2015-06-27 à 18.52.06

never

Si vous définissez le showAsAction à never, l’item sera affiché dans l’overflow (les 3 petits points qui indiquent que des actions sont disponibles). Après l’ouverture de cet overflow, l’item sera affiché en temps que texte clickable.

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

    <item
        android:id="@+id/action_save"
        android:icon="@android:drawable/ic_menu_save"
        android:title="@string/action_save"
        app:showAsAction="never" />

</menu>

Capture d’écran 2015-06-27 à 17.56.24

Utiliser depuis Activité

Dans votre activité, afin d’utiliser menu_test.xml en tant qu’icones de votre ActionBar, il suffit de l’indiquer à votre menuInflater lors du onCreateOptionsMenu (fonction d’Activité).

MainActvity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //ajoute les entrées de menu_test à l'ActionBar
        getMenuInflater().inflate(R.menu.menu_test, menu);
        return true;
    }
}

Ici, getMenuInflater().inflate(R.menu.menu_test, menu); ajoutera nos 3 items.

Si vous exécutez l’application, vous devriez voir ceci :

device-2015-06-27-180933 2

Gérer le click

Maintenant, pour récupérer le click de l’utilisateur sur une action, il faut surcharger la méthode d’activité public boolean onOptionsItemSelected(MenuItem item)

En effectuant un switch sur l’itentifiant de l’item, vous pouvez savoir lequel a été séléctionné.

MainActvity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    private void save(){
        Toast.makeText(this,R.string.action_save,Toast.LENGTH_LONG).show();
    }

    private void delete(){
        Toast.makeText(this,R.string.action_delete,Toast.LENGTH_LONG).show();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //ajoute les entrées de menu_test à l'ActionBar
        getMenuInflater().inflate(R.menu.menu_test, menu);
        return true;
    }

    //gère le click sur une action de l'ActionBar
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.action_save:
                save();
                return true;
            case R.id.action_delete:
                delete();
                return true;
            case R.id.action_settings:
                return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Pensez bien à retourner true si votre action est sélectionné.

 

 

Les sources de ce tutoriel sont disponibles sur github

2 commentaire sur “Menu – Ajouter des actions à l’ActionBar

  1. Article fort sympathique, une lecture agréable. Ce blog est vraiment pas mal, et les sujets présents plutôt bons dans l’ensemble, bravo ! Virginie Brossard

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *