Tutoriel pour utiliser la barre d'actions dans les applications Android

Cet article décrit comment utiliser la barre d'actions dans vos programmes Android. Il est basé sur Eclipse 4.2 (Juno), Java 1.6 et Android 4.2 (Jelly Bean).

Nous remercions Lars Vogel qui nous a aimablement autorisés à traduire et héberger cet article.

N'hésitez pas à commenter cet article ! Commentez Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Site personnel

Traducteur : Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction à la barre d'actions

I-A. Qu'est-ce que la barre d'actions ?

La barre d'actions (ActionBar) se situe en haut d'une activité. Elle peut afficher le titre de l'activité, des icônes, des actions qui peuvent être lancées, des vues additionnelles et d'autres choses encore. Elle peut aussi être utilisée pour naviguer dans votre application.

Les périphériques Android plus âgés ont un bouton « Option » hardware qui ouvre un menu en bas de l'application quand on le presse, c'est le OptionsMenu. La barre d'actions est supérieure au OptionsMenu parce qu'elle est clairement visible alors que le OptionsMenu est affiché à la demande de l'utilisateur et qu'il pourrait ne pas voir que des options sont disponibles.

I-B. Exemple

L'image suivante montre la barre d'actions de l'application Android « The Google+ » avec des éléments interactifs et une barre de navigation.

Image non disponible

I-C. Utiliser la barre d'actions sur les vieux périphériques

La barre d'actions a été introduite avec la version 3.0 d'Android. La bibliothèque « ActionBar Sherlock » permet d'utiliser les barres d'actions sur des périphériques Android à partir de la version 1.6. Vous trouverez cette bibliothèque à l'URL suivante : http://actionbarsherlock.com.

II. Utiliser la barre d'actions

II-A. Créer des actions dans la barre d'actions

Une activité renseigne sa barre d'actions dans sa méthode onCreateOptionsMenu(). Ces entrées sont appelées des actions.

Les actions pour une barre d'actions sont typiquement définies dans un fichier de ressources XML. La classe MenuInflator permet d'enregistrer les actions définies dans le XML en les ajoutant dans la barre d'actions.

L'attribut showAsAction permet de définir comment l'action est affichée. Par exemple, l'attribut ifRoom indique que l'action est affichée uniquement s'il reste suffisamment de place sur la barre d'actions.

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

    <item
        android:id="@+id/action_refresh"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:icon="@drawable/ic_action_search"
        android:title="Refresh"/>
    <item
        android:id="@+id/action_settings"
        android:title="Settings">
    </item>

</menu> 

Une instance de type MenuInflator peut être accédée avec la méthode getMenuInflator() de votre activité. L'exemple suivant montre la création d'actions dans la barre d'actions.

 
Sélectionnez
@Override
  public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.mainmenu, menu);
    return true;
  } 

II-B. Rechercher une action dans la barre d'actions

Pour rechercher un objet du menu, vous pouvez utiliser la méthode findItem() method de la classe « Menu ». Cette méthode permet la recherche par identifiant.

II-C. Réagir aux sélections

Si une action de la barre d'actions est sélectionnée, la méthode onOptionsItemSelected() est appelée. Elle reçoit l'action sélectionnée en paramètre. À partir de cette information, votre code peut décider ce qu'il convient de faire.

 
Sélectionnez
@Override
  public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
    case R.id.menuitem1:
      Toast.makeText(this, "Menu Item 1 selected", Toast.LENGTH_SHORT)
          .show();
      break;
    case R.id.menuitem2:
      Toast.makeText(this, "Menu item 2 selected", Toast.LENGTH_SHORT)
          .show();
      break;

    default:
      break;
    }

    return true;
  } 

II-D. Changer le menu

La méthode onCreateOptionsMenu() est appelée une seule fois. Si vous voulez modifier le menu plus tard, vous devez appeler la méthode invalidateOptionsMenu(). Ensuite, la méthode onCreateOptionsMenu() est à nouveau appelée.

III. Personnaliser la barre d'actions

III-A. Ajuster la barre d'actions

Vous pouvez modifier la visibilité de la barre d'actions lors de l'exécution. Le code suivant montre comment faire :

 
Sélectionnez
ActionBar actionBar = getActionBar();
actionBar.hide();
// More stuff here...
actionBar.show(); 

Vous pouvez aussi modifier le texte affiché à côté de l'icône de l'application lors de l'exécution. L'exemple suivant montre comment faire :

 
Sélectionnez
ActionBar actionBar = getActionBar();
actionBar.setSubtitle("mytest");
actionBar.setTitle("vogella.com"); 

III-B. Assigner un Drawable

Vous pouvez aussi ajouter un drawable à la barre d'actions à l'aide de la méthode ActionBar.setBackgroundDrawable().

La barre d'actions The ActionBar met à l'échelle l'image par conséquent, il est de bon ton de fournir un drawable évolutif, par exemple un 9-patch ou un drawable XML. Depuis Android 4.2, le drawable pour la barre d'actions peut être animé.

III-C. Faire varier les boutons de navigation par défaut

Vous pouvez également masquer le bouton de navigation de l'application Android pour avoir plus d'espace disponible. Si l'utilisateur touche le bouton de l'écran, le bouton de navigation est à nouveau automatiquement affiché.

Vous pouvez assombrir les boutons de navigation d'une activité avec le code suivant :

 
Sélectionnez
getWindow().
  getDecorView().
  setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION); 

Les captures d'écran suivantes montrent une application avec et sans les boutons de navigation.

Image non disponible
Image non disponible

IV. Plus d'options sur la barre d'actions

IV-A. Utiliser une icône « maison »

La barre d'actions affiche l'icône de votre application, elle est appelée icône « home ». Vous pouvez ajouter une action sur cette icône. Si vous sélectionnez cette icône, la méthode onOptionsItemSelected() est appelée avec la valeur android.R.id.home. La recommandation est de retourner à l'activité principale de votre programme.

 
Sélectionnez
// If home icon is clicked return to main Activity
case android.R.id.home:
  Intent intent = new Intent(this, OverviewActivity.class);
  intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
  startActivity(intent);
  break; 

Depuis Android 4.1, ce code n'est plus nécessaire, vous pouvez tout simplement positionner l'attribut parentActivityName dans le fichier AndroidManifest.xml file, pointant sur le parent de l'activité.

 
Sélectionnez
<activity
  android:name="com.vogella.android.actionbar.customviews.SecondActivity"
  android:label="@string/app_name" 
  android:parentActivityName="MainActivity">
</activity> 

IV-B. Naviguer avec l'icône « home »

L'icône « home » peut aussi être utilisée comme un « up » dans la navigation de votre application. En pratique, ce n'est pas couramment utilisé par les applications Android et devrait être évité.

IV-C. Activer la scission de la barre d'actions

Vous pouvez définir que la barre d'actions doit être automatiquement séparée par le système s'il n'y a pas assez d'espace.

Vous pouvez activer cette option avec le paramètre « android:uiOptions="SplitActionBarWhenNarrow" » dans le fichier AndroidManifest.xml de votre application ou de votre activité.

V. Rendre dynamique la barre d'actions

V-A. Vues personnalisées dans la barre d'actions

Vous pouvez aussi ajouter une vue personnalisée à la barre d'actions. Pour cela, utilisez la méthode setCustomView de la classe ActionView. Vous devez aussi autoriser l'affichage de vue personnalisée avec la méthode setDisplayOptions() en lui passant le paramètre ActionBar.DISPLAY_SHOW_CUSTOM.

Par exemple, vous pouvez définir un affichage qui contient un élément EditText.

 
Sélectionnez
<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/searchfield"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:inputType="textFilter" >

</EditText> 

Cet affichage peut être assigné à la barre d'actions avec le code suivant. Cet exemple attache aussi un gestionnaire d'événements à la vue personnalisée.

 
Sélectionnez
package com.vogella.android.actionbar.customviews;

import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;
import android.widget.Toast;

public class MainActivity extends Activity {

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

    ActionBar actionBar = getActionBar();
    // add the custom view to the action bar
    actionBar.setCustomView(R.layout.actionbar_view);
    EditText search = (EditText) actionBar.getCustomView().findViewById(R.id.searchfield);
    search.setOnEditorActionListener(new OnEditorActionListener() {

      @Override
      public boolean onEditorAction(TextView v, int actionId,
          KeyEvent event) {
        Toast.makeText(MainActivity.this, "Search triggered",
            Toast.LENGTH_LONG).show();
        return false;
      }
    });
    actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM
        | ActionBar.DISPLAY_SHOW_HOME);
  }

} 

V-B. Barre d'actions contextuelle

Une action contextuelle active une barre d'actions temporaire qui masque la barre d'actions de l'application pour la durée de la sous-tâche.

L'action contextuelle est typiquement activée en sélectionnant un élément ou bien par un clic long.

Pour faire cela, appelez la méthode startActionMode() d'une vue ou de votre activité. Cette méthode reçoit un objet ActionMode.Callback qui est responsable du cycle de vie de la barre d'actions contextuelle.

Vous pouvez aussi assigner un menu contextuel à une vue avec la méthode registerForContextMenu(view). Un menu contextuel est aussi activé si l'utilisateur fait un clic long sur la vue. La méthode onCreateContextMenu() est appelée à chaque fois qu'un menu contextuel est activé, mais aussi invalidé après usage. Vous devriez préférer la barre d'actions contextuelle plutôt que le menu contextuel.

V-C. Vue Action

Une vue action est un objet qui apparaît sur la barre d'actions comme un substitut à l'action d'un bouton. Vous pouvez utiliser cette fonctionnalité pour, par exemple, remplacer une action par une barre de progression. Une vue action peut être définie avec les attributs «  android:actionLayout » ou « android:actionViewClass » pour spécifier soit la ressource layout soit la classe widget à utiliser.

Ce remplacement est montré dans les captures d'écran ci-dessous

Image non disponible
Image non disponible

L'activité suivante remplace, à l'exécution, l'icône par une vue action qui contient une barre de progression.

 
Sélectionnez
package com.vogella.android.actionbar.progress;

import android.app.ActionBar;
import android.app.Activity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

  private MenuItem menuItem;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ActionBar actionBar = getActionBar();
    actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME
        | ActionBar.DISPLAY_SHOW_TITLE | ActionBar.DISPLAY_SHOW_CUSTOM);
  }

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

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
    case R.id.menu_load:
      menuItem = item;
      menuItem.setActionView(R.layout.progressbar);
      menuItem.expandActionView();
      TestTask task = new TestTask();
      task.execute("test");
      break;
    default:
      break;
    }
    return true;
  }

  private class TestTask extends AsyncTask<String, Void, String> {

    @Override
    protected String doInBackground(String... params) {
      // Simulate something long running
      try {
        Thread.sleep(2000);
      } catch (InterruptedException e) {
        e.printStackTrace();
      }
      return null;
    }

    @Override
    protected void onPostExecute(String result) {
      menuItem.collapseActionView();
      menuItem.setActionView(null);
    }
  };
} 

Le code suivant montre le layout utilisé pour cette vue action.

 
Sélectionnez
<?xml version="1.0" encoding="utf-8"?>
<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/progressBar2"
        android:layout_width="wrap_content"
     android:layout_height="wrap_content">
        
</ProgressBar> 

Le code suivant montre le fichier XML pour le menu.

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

    <item
        android:id="@+id/menu_settings"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:title="Settings"
        />

    <item
        android:id="@+id/menu_load"
        android:icon="@drawable/navigation_refresh"
        android:orderInCategory="200"
        android:showAsAction="always"
        android:title="Load"/>

</menu> 

VI. Fournisseur d'actions

VI-A. Aperçu d'un fournisseur d'actions

Un fournisseur d'actions (ActionProvider) définit une interaction de menu riche en un composant unique. Il peut générer des vues action pour une utilisation dans la barre d'actions, remplir de manière dynamique les sous-menus d'un élément d'action et gérer les actions par défaut.

Actuellement, la plate-forme Android dispose de deux ActionProvider, le MediaRouteActionProvider et le ShareActionProvider.

VI-B. Exemple : utilisation de ShareActionProvider

Le code suivant utilise un ShareActionProvider pour montrer l'usage d'un ActionProvider.

Cet ActionProvider permet d'utiliser du contenu sélectionné partagé en utilisant l'application qui a enregistré l'intention Intent.ACTION_SEND.

Pour utiliser un ShareActionProvider, vous devez définir une entrée de menu spéciale pour lui et attribuer une intention qui contient les données à partager.

 
Sélectionnez
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

   <item android:id="@+id/menu_share"
          android:title="Share"
          android:showAsAction="ifRoom"
          android:actionProviderClass="android.widget.ShareActionProvider" />
    <item
        android:id="@+id/item1"
        android:showAsAction="ifRoom"
        android:title="More entries...">
    </item>

</menu>
 
Sélectionnez
@Override
  public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.activity_main, menu);

    // Get the ActionProvider
    provider = (ShareActionProvider) menu.findItem(R.id.menu_share)
        .getActionProvider();
    // Initialize the share intent
    Intent intent = new Intent(Intent.ACTION_SEND);
    intent.setType("text/plain");
    provider.setShareIntent(intent);
    return true;
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
    case R.id.menu_share:
      doShare();
      break;
    default:
      break;
    }
    return true;
  }

  public void doShare() {
    // Populare the share intent with data
    Intent intent = new Intent(Intent.ACTION_SEND);
    intent.setType("text/plain");
    intent.putExtra(Intent.EXTRA_TEXT, "This is a message for you");
    provider.setShareIntent(intent);
  } 

VII. Navigation avec la barre d'actions

VII-A. Onglets de navigation

Les fragments peuvent également être utilisés en combinaison avec la barre d'actions pour la navigation. Pour cela, votre activité principale doit mettre en œuvre un TabListener qui est responsable du déplacement entre les onglets.

La barre d'actions permet de rajouter un onglet avec la méthode newTab().

Le code suivant montre une telle activité. Il utilise une activité fictive pour le démontrer.

 
Sélectionnez
package com.vogella.android.actionbar.tabs;

import android.app.ActionBar;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements
    ActionBar.TabListener {

  
/**
   * The serialization (saved instance state) Bundle key representing the
   * current tab position.
   */

  private static final String STATE_SELECTED_NAVIGATION_ITEM = "selected_navigation_item";

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

    // Set up the action bar to show tabs.
    final ActionBar actionBar = getActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    // For each of the sections in the app, add a tab to the action bar.
    actionBar.addTab(actionBar.newTab().setText(R.string.title_section1)
        .setTabListener(this));
    actionBar.addTab(actionBar.newTab().setText(R.string.title_section2)
        .setTabListener(this));
    actionBar.addTab(actionBar.newTab().setText(R.string.title_section3)
        .setTabListener(this));
  }

  @Override
  public void onRestoreInstanceState(Bundle savedInstanceState) {
    // Restore the previously serialized current tab position.
    if (savedInstanceState.containsKey(STATE_SELECTED_NAVIGATION_ITEM)) 
      getActionBar().setSelectedNavigationItem(savedInstanceState.getInt(STATE_SELECTED_NAVIGATION_ITEM));
    }
  }

  @Override
  public void onSaveInstanceState(Bundle outState) {
    // Serialize the current tab position.
    outState.putInt(STATE_SELECTED_NAVIGATION_ITEM, getActionBar()
        .getSelectedNavigationIndex());
  }

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

  @Override
  public void onTabSelected(ActionBar.Tab tab,
      FragmentTransaction fragmentTransaction) {
    // When the given tab is selected, show the tab contents in the
    // container view.
    Fragment fragment = new DummySectionFragment();
    Bundle args = new Bundle();
    args.putInt(DummySectionFragment.ARG_SECTION_NUMBER,
        tab.getPosition() + 1);
    fragment.setArguments(args);
    getFragmentManager().beginTransaction()
        .replace(R.id.container, fragment).commit();
  }

  @Override
  public void onTabUnselected(ActionBar.Tab tab,
      FragmentTransaction fragmentTransaction) {
  }

  @Override
  public void onTabReselected(ActionBar.Tab tab,
      FragmentTransaction fragmentTransaction) {
  }

  
/**
   * A dummy fragment representing a section of the app
   */

  public static class DummySectionFragment extends Fragment {
    public static final String ARG_SECTION_NUMBER = "placeholder_text";

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
      TextView textView = new TextView(getActivity());
      textView.setGravity(Gravity.CENTER);
      textView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
      return textView;
    }
  }

} 

VII-B. Navigation par menu Dropdown

Vous pouvez également utiliser un « spinner » dans la barre d'actions pour la navigation. Le code suivant illustre cela :

 
Sélectionnez
package com.vogella.android.actionbar.spinner;

import android.app.ActionBar;
import android.app.Fragment;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements
    ActionBar.OnNavigationListener {

  
/**
   * The serialization (saved instance state) Bundle key representing the
   * current dropdown position.
   */

  private static final String STATE_SELECTED_NAVIGATION_ITEM = "selected_navigation_item";

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

    // Set up the action bar to show a dropdown list.
    final ActionBar actionBar = getActionBar();
    actionBar.setDisplayShowTitleEnabled(false);
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);

    final String[] dropdownValues = getResources().getStringArray(R.array.dropdown);

    // Specify a SpinnerAdapter to populate the dropdown list.
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(actionBar.getThemedContext(),
        android.R.layout.simple_spinner_item, android.R.id.text1,
        dropdownValues);

    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

    // Set up the dropdown list navigation in the action bar.
    actionBar.setListNavigationCallbacks(adapter, this);

    // Use getActionBar().getThemedContext() to ensure
    // that the text color is always appropriate for the action bar
    // background rather than the activity background.
  }

  @Override
  public void onRestoreInstanceState(Bundle savedInstanceState) {
    // Restore the previously serialized current dropdown position.
    if (savedInstanceState.containsKey(STATE_SELECTED_NAVIGATION_ITEM)) {
      getActionBar().setSelectedNavigationItem(savedInstanceState.getInt(STATE_SELECTED_NAVIGATION_ITEM));
    }
  }

  @Override
  public void onSaveInstanceState(Bundle outState) {
    // Serialize the current dropdown position.
    outState.putInt(STATE_SELECTED_NAVIGATION_ITEM, getActionBar()
        .getSelectedNavigationIndex());
  }

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

  @Override
  public boolean onNavigationItemSelected(int position, long id) {
    // When the given dropdown item is selected, show its contents in the
    // container view.
    Fragment fragment = new DummySectionFragment();
    Bundle args = new Bundle();
    args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1);
    fragment.setArguments(args);
    getFragmentManager().beginTransaction()
        .replace(R.id.container, fragment).commit();
    return true;
  }

  
/**
   * A dummy fragment
   */

  public static class DummySectionFragment extends Fragment {

    public static final String ARG_SECTION_NUMBER = "placeholder_text";

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
      TextView textView = new TextView(getActivity());
      textView.setGravity(Gravity.CENTER);
      textView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
      return textView;
    }
  }

} 

VIII. Exercice : la barre d'actions

VIII-A. Le projet

Ce chapitre va vous expliquer comment créer des éléments dans la barre d'actions et comment réagir à la sélection de l'utilisateur.

Il est basé sur le même projet que le tutoriel Fragment qui se trouve ici : Android Fragments tutorial. Si vous avez déjà créé ce projet, vous pouvez continuer à le réutiliser, sinon, ce qui suit décrit la configuration requise pour ce tutoriel.

VIII-B. Créer le projet

Créez un nouveau projet Android avec les données suivantes :

Table 1. Android project

Property Value
Application Name RSS Reader
Project Name com.example.android.rssfeed
Package name com.example.android.rssfeed
Template BlankActivity
Activity RssfeedActivity
Layout activity_rssfeed

IX. Exercice : ajouter une barre d'actions à votre application

IX-A. Créer une icône pour la barre d'actions

Utilisez la commande « File → New → Other → Android Icon Set » pour créer une icône de rafraîchissement pour votre barre d'actions. L'assistant vous permet de sélectionner le type d'icônes que vous souhaitez créer. Indiquez le nom ic_refresh pour la nouvelle icône et sélectionnez l'entrée correspondante dans le Clipart.

La page de design Android fournit également des icônes préparées pour les barres d'actions. Vous trouverez les téléchargements sur la page web suivante : http://developer.android.com/design/downloads/index.html.

IX-B. Ajouter une ressource XML Menu

Continuez à utiliser le projet com.example.android.rssfeed.

Créez un nouveau menu ressource XML appelé mainmenu.xml. Pour créer ce fichier XML, sélectionnez votre projet, faites un clic droit dessus et sélectionnez « New → Other… → Android → Android XML File ».

Sélectionnez l'option « menu », entrez mainmenu.xml comme nom de fichier et appuyez sur le bouton « Finish ».

Image non disponible

Ouvrez le fichier mainmenu.xml et sélectionnez l'onglet « Layout » de l'éditeur Android.

Cela va créer un nouveau fichier menu dans le répertoire res/menu de votre projet. Ouvrez ce fichier et sélectionnez l'onglet « Layout » de l'éditeur Android. Avec le bouton « Add », vous pouvez ajouter de nouvelles entrées.

Appuyez sur le bouton « Add » et sélectionnez l'entrée. Saisissez les données identiques à la capture d'écran ci-dessous :

Image non disponible

Ajoutez une deuxième action à votre menu. Utilisez « Refresh » pour le titre et menuitem_refresh comme identifiant.

Attribuez-lui une icône appropriée, par exemple une icône que vous avez téléchargée plus tôt dans cet exercice. Copiez l'icône que vous souhaitez utiliser dans le répertoire « /res/drawable-mdpi ». Assurez-vous que le nom de fichier ne possède pas un caractère spécial et que vous ne copiez que l'icône que vous souhaitez utiliser, pas toutes.

Ajoutez une deuxième entrée au menu avec comme identifiant sur « @+id/action_settings » et comme titre « Setting ». Mettez l'attribut android:showAsAction à « never ».

Le XML résultant ressemblera au code suivant. Veuillez noter que votre drawable est bien différent.

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

    <item
        android:id="@+id/action_refresh"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:icon="@drawable/ic_action_search"
        android:title="Refresh"/>
    <item
        android:id="@+id/action_settings"
        android:title="Settings"
        android:showAsAction="never"
        >
    </item>

</menu> 

IX-C. Créer et utiliser la barre d'actions

Changez la classe RssfeedActivity class avec le code suivant pour utiliser ce fichier XML :

 
Sélectionnez
package com.example.android.rssfeed;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class RssfeedActivity extends Activity implements
    MyListFragment.OnItemSelectedListener {
  // Unchanged
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_rssfeed);
  }
  
  //NEW
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.mainmenu, menu);
    return true;
  }
  
  //NEW
  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
    case R.id.action_refresh:
      Toast.makeText(this, "Action refresh selected", Toast.LENGTH_SHORT)
          .show();
      break;
    case R.id.action_settings:
      Toast.makeText(this, "Action Settings selected", Toast.LENGTH_SHORT)
          .show();
      break;

    default:
      break;
    }

    return true;
  }

  // Other methods which this class implements
} 

Lancez votre application. S'il y a suffisamment de place dans la barre d'actions, vous devriez voir le menu. Sinon, vous devrez utiliser le bouton « Option » de votre téléphone. Si vous sélectionnez une option, vous devriez voir un petit message d'information.

Image non disponible

X. Exercice : utiliser les actions du mode contextuel

Créez un projet nommé de.vogella.android.socialapp avec une activité nommée OverviewActivity.

Ajoutez un élément « EditText » dans le layout main.xml.

 
Sélectionnez
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/myView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >

        <requestFocus />
    </EditText>

</LinearLayout> 

Créez une nouvelle ressource menu XML nommée contextual.xml.

 
Sélectionnez
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/toast"
        android:title="Toast">
    </item>

</menu> 

modifiez votre activité comme suit :

 
Sélectionnez
package de.vogella.android.socialapp;

import android.app.Activity;
import android.os.Bundle;
import android.view.ActionMode;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

public class OverviewActivity extends Activity {
  protected Object mActionMode;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    // Define the contextual action mode
    View view = findViewById(R.id.myView);
    view.setOnLongClickListener(new View.OnLongClickListener() {
      // Called when the user long-clicks on someView
      public boolean onLongClick(View view) {
        if (mActionMode != null) {
          return false;
        }

        // Start the CAB using the ActionMode.Callback defined above
        mActionMode = OverviewActivity.this
            .startActionMode(mActionModeCallback);
        view.setSelected(true);
        return true;
      }
    });
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.mainmenu, menu);
    return true;
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    Toast.makeText(this, "Just a test", Toast.LENGTH_SHORT).show();
    return true;
  }

  private ActionMode.Callback mActionModeCallback = new ActionMode.Callback() {

    // Called when the action mode is created; startActionMode() was called
    public boolean onCreateActionMode(ActionMode mode, Menu menu) {
      // Inflate a menu resource providing context menu items
      MenuInflater inflater = mode.getMenuInflater();
      // Assumes that you have "contexual.xml" menu resources
      inflater.inflate(R.menu.contextual, menu);
      return true;
    }

    // Called each time the action mode is shown. Always called after
    // onCreateActionMode, but
    // may be called multiple times if the mode is invalidated.
    public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
      return false; // Return false if nothing is done
    }

    // Called when the user selects a contextual menu item
    public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
      switch (item.getItemId()) {
      case R.id.toast:
        Toast.makeText(OverviewActivity.this, "Selected menu",
            Toast.LENGTH_LONG).show();
        mode.finish(); // Action picked, so close the CAB
        return true;
      default:
        return false;
      }
    }

    // Called when the user exits the action mode
    public void onDestroyActionMode(ActionMode mode) {
      mActionMode = null;
    }
  };

} 

Si vous lancez cet exemple et faites un clic long sur le widget « EditText », la barre d'actions contextuelle est affichée.

Image non disponible

XI. Liens et littérature

XI-A. Code source

XI-B. Ressources Android ActionBar

XII. Remerciements Developpez

Vous pouvez retrouver l'article original ici : Using the Android action bar (ActionBar) - Tutorial. Nous remercions Lars Vogel qui nous a aimablement autorisés à traduire et héberger ses articles.

Nos remerciements à ClaudeLELOUP pour sa relecture orthographique.

N'hésitez pas à commenter cet article ! Commentez Donner une note à l'article (5)

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Licence Creative Commons
Le contenu de cet article est rédigé par Lars Vogel et est mis à disposition selon les termes de la Licence Creative Commons Attribution 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.