Skip to content

27 juillet 2010 | Rédigé par Axon

43

Faire un menu et sous-menu [Tutoriel Android n°12]

Après quelques jours de répit nous voilà parti pour un nouveau tuto plutôt simple mais terriblement utile pour faire une application complète. Nous allons apprendre à réaliser des menus et sous-menus, assez pratique pour enrichir vos applications d’options.

Alors comme d’habitude créez un nouveau projet (moi j’ai utilisé Android 1.6), et direction le dossier layout car l’interface graphique est comme tout le temps créée grâce aux fichiers XML.

Code XML

Créez un fichier menu.xml dans le dossier layout. Nous allons créer un premier menu contenant les items Options et Quitter. Lorsque l’on cliquera sur Quitter, on sortira de l’application et lorsque l’on cliquera sur Options, on aura un sous-menu qui s’affichera avec les items Favoris et Stats. Je vous propose donc le code suivant :

<menu xmlns:android="http://schemas.android.com/apk/res/android">
 
<item android:id="@+id/option" 
      android:title="Options"
      android:icon="@drawable/option">
 
     <menu android:id="@+id/sousmenu">
	 <item android:id="@+id/favoris"
	       android:title="Favoris"   />	
 
	 <item android:id="@+id/stats"
	       android:title="Stats"  />
     </menu>
</item>
 
<item android:id="@+id/quitter" 
     android:title="Quitter"
     android:icon="@drawable/quit" />
</menu>

Vous remarquerez que j’affecte un petit icône pour chaque item du menu mais pas du sous-menu. Tout simplement parce que dans le sous-menu, les icônes ne sont pas supporté par Android (« Sub menus do not support item icons, or nested sub menus. » via). La partie XML est terminée (oui c’est court et simple mais bon… ;) ), passons désormais à la partie JAVA qui sera aussi courte et simple ! :)

Code JAVA

Comme d’habitude, le code est commenté mais si ce n’est pas clair, laissez un commentaire et je vous aiderai du mieux que je peux.

package com.tutomobile.android.menu;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;
 
public class Tutoriel10_Android extends Activity {
 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main); 
 
    }
 
    //Méthode qui se déclenchera lorsque vous appuierez sur le bouton menu du téléphone
    public boolean onCreateOptionsMenu(Menu menu) {
 
        //Création d'un MenuInflater qui va permettre d'instancier un Menu XML en un objet Menu
        MenuInflater inflater = getMenuInflater();
        //Instanciation du menu XML spécifier en un objet Menu
        inflater.inflate(R.layout.menu, menu);
 
        //Il n'est pas possible de modifier l'icône d'entête du sous-menu via le fichier XML on le fait donc en JAVA
    	menu.getItem(0).getSubMenu().setHeaderIcon(R.drawable.option_white);
 
        return true;
     }
 
       //Méthode qui se déclenchera au clic sur un item
      public boolean onOptionsItemSelected(MenuItem item) {
         //On regarde quel item a été cliqué grâce à son id et on déclenche une action
         switch (item.getItemId()) {
            case R.id.option:
               Toast.makeText(Tutoriel10_Android.this, "Option", Toast.LENGTH_SHORT).show();
               return true;
            case R.id.favoris:
                Toast.makeText(Tutoriel10_Android.this, "Favoris", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.stats:
                Toast.makeText(Tutoriel10_Android.this, "Stats", Toast.LENGTH_SHORT).show();
                return true;
           case R.id.quitter:
               //Pour fermer l'application il suffit de faire finish()
               finish();
               return true;
         }
         return false;}
 
}

Voilà, c’est aussi simple que ça ! Maintenant, lancez votre application et appuyez sur le bouton menu du téléphone vous devriez voir quelque chose comme ceci :

Si vous cliquez sur l’item « Options » le sous-menu s’affiche :


C’est terminé pour aujourd’hui n’hésitez pas à cliquer sur le petit « + » en haut à droite du tuto et/ou de le partager sur Twitter ou Facebook grâce aux boutons ci-dessous. Merci de contribuer au succès de Tuto Mobile ! ;)

Découvrez d'autre articles de la catégorie Tutoriels Android

Encore un peu de lecture :

43 Commentaires Poster un commentaire
  1. 27 juil 2010

    Allé un petit lien utile qui référence l’ensemble des images contenu dans le package d’android, juste pour ne pas surcharger les applications ;)
    http://androiddrawableexplorer.appspot.com/
    Dommage que ca ne soit pas officiel, mais ca m’aide bien souvent pour réutiliser les images par défaut d’Android (comme les settings par exemple).
    Mais rassure toi t’es images sont très bien aussi :D

  2. 27 juil 2010

    Merci pour ce petit lien je m’étais justement dis qu’il fallait que j’utilise les icônes Android pour les prochains tuto mais je ne savais pas encore comment faire maintenant je sais grâce à toi. Merci ! ;)

  3. lucianot54
    14 sept 2010

    Le mieux est de créer un dossier menu dans le dossier res. Ensuite de mettre le xml du menu. On l’utilise comme ça après : R.menu.menu.xml

  4. 14 sept 2010

    @lucianot54 : je comprend pas ce que tu veux dire, c’est quasiment la même chose que ce que l’on fait avec : R.layout.menu

  5. lucianot54
    14 sept 2010

    Oui c’est la même chose, mais juste android permet de séparer les layouts et les menus. Comme il existe, autant l’utiliser :)

  6. 4 oct 2010

    Bonjour,

    Je débute sur Android.
    Comment inclure le code Java svp, on crée un nouveau fichier ?
    Je voudrais juste faire un options menu avec a propos et quitter.

    Merci d’avance ;-)

  7. 4 oct 2010

    Encore moi désolé, mais il ne semble pas trouver mais item id…

  8. 4 oct 2010

    Bonjour,

    Je n’y arrive pas…
    J’ai inclus le code java dans mon fichier principal et cree le menu.xml, mails il ne reconnait pas les id du menu.
    Comment faire svp ?

    Merci d’avance.

  9. MANSION Jean Claude
    17 nov 2010

    Bonjour

    J’ai le même problème
    J’ai inclus le code java dans mon fichier principal et cree le menu.xml, mails il ne reconnait pas les id du menu.
    Comment faire svp ?

    Merci d’avance.
    ..

  10. 17 nov 2010

    @MANSION Jean Claude : les problèmes id sont souvent les même soit se ne sont pas les mêmes dans le fichier xml et dans le fichier java soit il y a un caractère spécial (majuscule compris) sinon si tu trouves pas envoi moi ton projet par mail j’essaierai de t’aider.

  11. barbidur
    23 nov 2010

    J’ai suprimé main.xml et créé menu.xml
    j’ai copié le prog java dans menu.java

    mais cela ne marche pas

  12. 2 déc 2010

    Salut et merci pour tout tes tutos, ça fait plaisir quand on débute la programmation pour mobile android :)

    J’ai un problème avec ce tuto, j’ai placé mes icônes au format png dans le dossier res/drawable-mdpi et elles s’appellent exit.png et settings.png

    Dans mon xml, j’ai renseigné la ligne suivante mais ça ne fonctionne pas et j’aimerai comprendre pourquoi et où est mon erreur :

    android:icon= »@drawable/exit »

    Où tu peux me dire où toi tu place tes images et sous quel format si tu préfère :)

    Merci d’avance

  13. 3 déc 2010

    A priori, je ne vois pas d’erreur… Essai de mettre tes icônes dans tous les dossiers drawable.

  14. 3 déc 2010

    ça change rien… j’ai ça comme erreur :

    [2010-12-03 20:05:50 - Test] W/ResourceType( 1056): Bad XML block: header size 55 or total size 3604676 is larger than data size 0
    [2010-12-03 20:05:50 - Test] W/ResourceType( 1056): Bad XML block: header size 55 or total size 3604676 is larger than data size 0
    [2010-12-03 20:05:50 - Test] C:\Android\workspace\Test\res\menu\exit.png:1: error: Error parsing XML: not well-formed (invalid token)
    [2010-12-03 20:05:50 - Test] C:\Android\workspace\Test\res\menu\settings.png:1: error: Error parsing XML: not well-formed (invalid token)

  15. sajid
    6 déc 2010

    salut,
    d’abord merci axon pour tes tuto claires
    pour ce tuto tous marche bien a part la ligne:
    menu.getItem(0).getSubMenu().setHeaderIcon(R.drawable.option_white);
    eclipse mentionne une erreur « R.drawable.option_white cannot be resolved » je ne sais pas comment faire pour résoudre ce problème
    :(

  16. android2011
    24 jan 2011

    mercii exon j’ai fais le test et ca marche a 100% ,est ce que vous pouvez nous faire un tuto sur « comment passer d’un sous menu a une page « 

  17. 6 fév 2011

    Bonjour à vous,

    Je voudrais savoir s’il était possible (comme sur iphone) de proposer à l’utilisateur de modifier certains réglages en dehors de l’application via le menu réglage du TELEPHONE directement par exemple.

    En gros au premier lancement, l’appli demanderai à l’utilisateur de rentrer un paramètre (un numéro) et ensuite l’application se lancerai en fonction de ce paramètre (appeler ce numéro). Pour la modifier il faudrait alors forcement passer par un autre endroit que l’appli elle même.

    Je sais pas si je suis clair ! :s Je sais pas trop quoi chercher sur Google donc si quelqu’un avait une idée et voulais bien m’aider.

    Merci d’avance à vous.

  18. 7 fév 2011

    @Vlad : perso j’ai pas compris… ;)

  19. 8 fév 2011

    Ok je me doutais bien que c’était pas clair. Merci d’avoir essayer. :) Alors j’essaie de reprendre :

    En fait je voudrais en plus de mon application, ajouter dans le menu de réglage du téléphone (là où on règle l’affichage et tout) pour que l’utilisateur règle certaines choses en dehors de l’application en elle même.

    J’ai pas d’exemple sur téléphone Android mais pour Iphone, l’appli Facebook propose dans le menu réglage de l’Iphone si l’utilisateur veut recevoir des notifications (sur Android c’est directement dans l’appli mais c’est pas ce que je veux).

    En image (toujours sur l’Iphone) : http://blog.nicolasgut.com/wp-content/uploads/2009/04/reglage1.jpg

    Les sous-menus 20 minutes, Le monde … n’étaient bien entendu pas là à l’origine et ont été ajoutés au moment de l’installation des applis correspondantes. Je voudrais pouvoir faire la même chose sur Android.

    J’espère que c’est compréhensible cette fois ci. :s

  20. 8 fév 2011

    ajouter dans le menu de réglage du téléphone (là où on règle l’affichage et tout) un sous-menu correspondant à mon appli pour que l’utilisateur règle certaines choses en dehors de l’application en elle même.*

  21. 8 fév 2011

    @Vlad: Oui là j’ai compris ! :) mais malheureusement, à ma connaissance ce n’est pas possible de faire ceci sous Android.

  22. 8 fév 2011

    Ah m**de. J’espère que d’autres gens vont te contredire. ^^

    Je vais chercher un autre moyen.

    Merci en tout cas.

  23. 8 fév 2011

    @Vlad : oui j’espère aussi pour toi que quelqu’un va me contredire ! :)

  24. 16 fév 2011

    Salut,
    tout d’abord merci pour tes supers tutos. Mais je suppose que tu travaille avec Eclipse? Car moi j’utilise Adobe Flash cs5 avec le addon android. Alors je me demandais si ta methode pouvais etre compatible avec Flash?
    Sinon Super ton site !

  25. cotto
    30 mar 2011

    cannot be resolver or is not a field…

    Ce message d’erreur sous éclipse s’affiche sous tous tes tutos (listview , calculatrice…) en surlignant les layouts , les drawables , les id et les r !!!!!!!!!!!

    Je comprend toujours pas pourquoi sa merde…
    En ésperant de l’aide…merci

  26. cotto
    30 mar 2011

    lol seul le tuto helloworld à marcher!!!!!!!!!!!

  27. 12 avr 2011

    Salut,
    Très bon tuto, toujours aussi instructif.
    Je signale cependant un soucis à la ligne suivante :

    menu.getItem(0).getSubMenu().setHeaderIcon(R.drawable.option_white);

    J’imagine que tu avais 2 icônes (normal et focus) d’où le nom « _white ».
    Il m’a fallu supprimer « _white » après option à la fin pour régler le soucis (ça résoudra le soucis de sajid).

  28. Marsou77
    21 avr 2011

    « option cannot be resolved or is not a field »
    « favoris cannot be resolved or is not a field »
    « stats cannot be resolved or is not a field »
    « quitter cannot be resolved or is not a field »

    Quelqu’un peut m’eclairer ?

    Merci :)

  29. Misseos
    13 mai 2011

    bonjour,
    j’ai une question concernant le bouton quitter. J’ai fait une application avec un menu (et je te remercie de ton tuto qui m’a bien aidé :) ). MLon soucis c’est que dans mon appli, il y a plusieurs activités qui s’appelle en cascade et quand je fais finish() je quitte l’application mais si je l’a réouvre, je tombe sur l’activité où j’ai fait le finish() et non l’activity qui me sers d’écran d’accueil… Ce qui est assez perturbant je dois le reconnaître..
    Quelqu’un serait il me dire pourquoi, et comme corriger cela?
    Car quand je regarde sur internet je ne vois que le « finish() »…

  30. ChucK
    16 mai 2011

    Bonjour,

    @Marsou77 : Je pense que tu devrais modifier import android.R par import « le nom de ton package ».R. Normalement, tes fichiers .xml devraient être identifiés après ça et tes items seront reconnus.

    Ma question concerne le menu.xml. Je n’ai aucun problème a la compilation de ce tutoriel, mais j’obtiens systématiquement l’erreur de log suivante dans la présentation graphique de ce même fichier xml :
    com.android.layoutlib.bridge.MockView cannot be cast to android.view.ViewGroup
    Les classes item et menu ne sont pas trouvées.

    Quelqu’un sait comment résoudre ce problème ?

  31. Coco
    11 juin 2011

    Bonjour,

    Merci pour ce tuto !
    J’ai du actualiser les boutons utilisés avec la version d’android 2.3 mais sinon ça fonctionne très bien.

    J’ai juste un petit problème, j’ai un programme qui comporte deux activity : le menu d’un jeu, et le jeu en lui même …
    J’arrive sans problème à faire ces menus dans l’activity correspondante au jeu, mais pas dans mon activity principale … En fait lorsque je fais « import android.view.Menu; » il me met une erreur et me propose juste de supprimer l’importation …

    Si quelqu’un à une idée, je suis preneur !
    Merci d’avance !

  32. Imn.kls
    7 juil 2011

    SVP une erreur survient et l’application se ferme !!
    aidez moi

  33. remos
    23 avr 2012

    Salut !! merci pour tout tes tutos, ça fait plaisir quand on débute la programmation pour mobile android.
    ms j ai un projet ou je doit réalise un menu et sou-menu par exemple si on click à l’option il y a un menu qui s’appelle niveau et a partir de ce menu il y a un autre menu de leçon c’est comme je doit faire 2 fois le sou-menu aide moi svp c ‘est une grande étape dans mon PFE

  34. 14 juin 2012

    Super, très bien expliqué, du bon travail en somme!

    Tu m’as bien dépanné :p
    Bon courage pour la suite et encore merci!

  35. Ju2594
    26 juin 2012

    Merci pour ce petit tuto très pratique ! Sujet exposé rapidement, solution tout aussi rapide, un vrai bonheur :)

  36. 27 juin 2012

    j’ai pas compris ce que veut dire cette fonction et comment je peux et d’où on tire ces paramètres

    la fonction est
     » setContentView(R.layout.server); « 

  37. 28 juin 2012

    @noureddine : settContentView pertmet de charger le layout, c’est à dire la vue de ton Activity. Le R.layout.leNomDeTonLayout fais référence a un fichier xml qui se trouve dans ton dossier layout

  38. moe
    28 juin 2012

    Salut,
    D’abord un grand merci pour ce site et les tutos très utiles!
    Je recherche désespérément l’icône utilsée ici pour quitter (le petit bonhomme) au format png bien entendu.
    Comment récupérer celle-ci (et les autres également d’ailleurs).
    J’ai regardé ici http://androiddrawableexplorer.appspot.com/
    sur google, et dans le dossier /android-sdk …
    Merci d’avance pour votre aide

  39. 28 juin 2012

    @moe : la plupart des icônes qui sont dans mon exemple sont des png que j’ai trouvé sur le net. Cherche sur le site icon finder tu devrais les trouver. Je ne peux malheureusement pas te les envoyer car je ne les ai plus. Mais le mieux, c’est d’utiliser tant que possible les icônes natifs.

  40. 16 déc 2012

    Première fenêtre de code: Il ne connaît pas tes icônes chez moi.
    Comment je rajoute les images au projet? Je les ai ajoutées manuellement dans les différents dossiers drawable, mais comment les « faire reconnaître »?

  41. 23 jan 2013

    Salut, super tuto
    Par-contre, j’ais des problèmes avec les icon

    [2013-01-23 13:39:00 - Test1] C:\Users\Feka_Ermal\Desktop\Apli\Test1\res\menu\activity_main.xml:4: error: Error: No resource found that matches the given name (at ‘icon’ with value ‘@drawable/option’).

    Tu peux m’aider ????

  42. modjo
    30 jan 2013

    je suis un débutant en programmation android j’aimerais juste savoir comment insérer les images dans les drawables j’arrive pas a le faire

  43. emina
    2 avr 2013

    j’aime faire aprés avoirs le sous menu un lien vers un autre page par exemple si je clique sur favori j’affiche un autre page . java est vous pouvez m’aider ^par un code merci :)

Une question, une suggestion, une opinion? Partagez ce que vous pensez, laissez un commentaire.

(obligatoire)
(obligatoire)

Note: Votre adresse email ne sera jamais publiée.

Suivez les réponses aux commentaires