Skip to content

4 novembre 2010 | Rédigé par Axon

22

Personnaliser un AlertDialog [Tutoriel Android n°20]

Voici un tuto qui va surement en aider plus d’un. Parfois lorsque vous développez vos applications Android je suis sûr que vous aimeriez créer une boite de dialogue (AlertDialog) un peu personnalisé en y ajoutant par exemple un EditText ou n’importe quoi d’autre. Pas facile de trouver un tuto clair sur ce sujet sur le net. Je vais donc tenter de vous expliquer comment personnaliser un AlertDialog facilement.

Créez votre projet Android (moi je suis encore et toujours sous Android 1.6) et attaquons notre tutorial. Nous allons faire un AlertDialog personnalisé avec un TextView et un EditText. Il n’y a rien de transcendant la dedans mais si vous comprenez cet exemple vous saurez faire tout ce que vous voudrez. Voici donc à quoi ressemblera notre AlertDialog :

Code XML

Pour commencer, créez un nouveau layout que vous allez appeler alertdialogperso.xml. C’est dans ce fichier que nous allons mettre tout ce qu’on souhaite voir dans notre AlertDialog personnalisé. Nous nous y mettons un TextView et un EditText l’un en dessous de l’autre. On obtient donc le code suivant :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:padding="15dip">
 
  <TextView
    android:id="@+id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Entrer quelque chose ci-dessous :"
    android:paddingBottom="10dip" />
 
  <EditText 
    android:id="@+id/EditText1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/TextView1"  />
 
</RelativeLayout>

Code Java

Maintenant il suffit d’affecter ce layout à un AlertDialog grâce au code Java. Pour cela, nous allons utiliser la classe LayoutInflater qui va nous permettre de faire de notre layout un objet View qui sera alors affecté à l’AlertDialog grâce à la méthode setView(). Voici le code commenté :

package com.tutomobile.android.alertdialogperso;
 
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
 
public class Tutoriel18_Android extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        //On instancie notre layout en tant que View
        LayoutInflater factory = LayoutInflater.from(this);
        final View alertDialogView = factory.inflate(R.layout.alertdialogperso, null);
 
        //Création de l'AlertDialog
        AlertDialog.Builder adb = new AlertDialog.Builder(this);
 
        //On affecte la vue personnalisé que l'on a crée à notre AlertDialog
        adb.setView(alertDialogView);
 
        //On donne un titre à l'AlertDialog
        adb.setTitle("Titre de notre boite de dialogue");
 
        //On modifie l'icône de l'AlertDialog pour le fun ;)
        adb.setIcon(android.R.drawable.ic_dialog_alert);
 
        //On affecte un bouton "OK" à notre AlertDialog et on lui affecte un évènement
        adb.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
 
            	//Lorsque l'on cliquera sur le bouton "OK", on récupère l'EditText correspondant à notre vue personnalisée (cad à alertDialogView)
            	EditText et = (EditText)alertDialogView.findViewById(R.id.EditText1);
 
            	//On affiche dans un Toast le texte contenu dans l'EditText de notre AlertDialog
            	Toast.makeText(Tutoriel18_Android.this, et.getText(), Toast.LENGTH_SHORT).show();
          } });
 
        //On crée un bouton "Annuler" à notre AlertDialog et on lui affecte un évènement
        adb.setNegativeButton("Annuler", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
            	//Lorsque l'on cliquera sur annuler on quittera l'application
            	finish();
          } });
        adb.show();
    }
}

Maintenant si vous lancez votre application vous devriez voir apparaître une boîte de dialogue similaire à celle présenté au début du tutoriel. Entrez quelque chose dans l’EditText puis cliquez sur « OK ». La boite de dialogue devrait se fermer et le texte que vous avez entré devrait apparaître dans un Toast, comme sur la capture d’écran ci-dessous. Si vous cliquez sur « Annuler », l’application doit se fermer normalement.

Vous êtes désormais capable de personnaliser comme vous le souhaitez un AlertDialog. Vous pouvez donc créez toutes les boîtes de dialogue que vous voulez. J’espère que ce petit tutoriel vous aura plus et surtout qu’il vous servira. Merci d’avance à tout ceux qui partegeront ce tuto sur Twitter et Facebook. Et n’oubliez pas de voter pour cet article si vous l’avez aimé, grâce au petit « + » en haut à gauche du tuto (à côté du coeur). ;)

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

Encore un peu de lecture :

22 Commentaires Poster un commentaire
  1. 4 nov 2010

    Bon travail!
    Toujours aussi bien expliqués tes tutos!

  2. 4 nov 2010

    @creationy : Merci ça fait toujours plaisir ! ;)

  3. 6 nov 2010

    @Nicolas : heureux d’avoir pu t’aider et merci ! ;)

  4. Nicolas
    6 nov 2010

    Merci beaucoup, pile à temps : je devais en coder un depuis quelques jours, c’est maintenant fait ; excellent !

    Très bon tuto, comme d’hab’ :)

  5. Anab
    8 nov 2010

    bon travail comme pour les autres , pratiquement tous fait et cela m’aide beaucoup merci pour ces infos…

    je suis à la recherche d’une solution pour récupérer des données sur un serveur…. pas encore décider comment ? je pensais récupérer du XML mais je m’aperçois que ce n’est pas si évident!

    besoin de créer une connexion sur un serveur avec login/mot de passe puis recuperer/parser un flux xml

    Cela se fait en java/C/python très bien mais certaines instruction ne sont pas implémenter sur Android…

    Comment fond les applis pour récupérer des datas en général?

    Type Meteo ou autres…

    Merci

  6. Hary
    18 nov 2010

    Bonjour! très bon tuto!
    Tout comme Anab, je suis aussi à la recherche d’un tutoriel pouvant m’aider à valider une authentification login/password et de récupérer la réponse en fichier xml
    J’ai déjà un lien du genre:
    http://www.xxx.com//connexion.php?username=&password=

    Merci :)

  7. andronienn
    29 nov 2010

    SVP j’ai un problème dans la méthode oncreate:
    final View alertDialogView = factory.inflate(R.layout.alertdialog, null);

    Il ne reconnaît pas alertdialog (alertdialogperso dans le tuto)!
    Que dois-je faire ?

    Merci à vous…

  8. 29 nov 2010

    @andronienn : si tu as bien appelé ton layout alertdialog.xml ça doit être un bug d’Eclipse donc il n’y a pas grand chose à faire recréer un projet et croise les doigts…

  9. andronienn
    29 nov 2010

    Ah ok ça marche! merci à vous!
    pouvez-vous créer un tuto qui permet de créer un tableau et d’y stocker des valeurs, puis de les afficher, trier…. ?

  10. jonathan
    11 déc 2010

    J’ai utilisé ce tuto pour faire ma première application disponible sur l’android market: Boussole 3D. N’hésitez pas à me faire des remarques.
    Merci encore pour ces bons tutos, c’est avec ce site que j’ai fait mes premières armes!!

  11. nico
    20 jan 2011

    Merci pour ce tuto !

    Par contre j’ai un souci, comment faire pour que le code qui appelle la boite de dialogue attende que celle-ci soit fermée avant de poursuivre ?

    J’ai créé une fonction qui génère la boite de dialogue, et une autre fonction qui appelle la boite, et doit traiter le résultat. Mais le traitement est effectué sans attendre qu’on ai entré quoi que ce soit dans la boite de dialogue :(

    Merci :)

  12. julien.delacou
    23 jan 2011

    @nico : le traitement doit s’effectuer dans l’action listener du bouton « OK »:

    adb.setPositiveButton(« OK », new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dialog, int which) {

    //Lorsque l’on cliquera sur le bouton « OK », on récupère l’EditText correspondant à notre vue personnalisée (cad à alertDialogView)
    EditText et = (EditText)alertDialogView.findViewById(R.id.EditText1);

    // appel de la fonction de traitement

    } });

  13. sdk45
    12 oct 2011

    Bonjour,
    Merci pour ce superbe site!

    J’ai bien suivis le tuto, sauf que je rencontre un problème avec la récupération de l’EditText :(

    Ma boite de dialog est crée dans un autre Listener, exactement un OnItemClickListener, d’après le débogage ma variable dans laquelle je récupère mon EditText reste à null :(

    Voila la partie du code correspondant à l’alertDialog:

    LayoutInflater layinf = LayoutInflater.from(Menu.this);
    final View alertDialogView = layinf.inflate(R.layout.alertdialog_changemap, null);

    AlertDialog.Builder adb = new AlertDialog.Builder(Menu.this);
    adb.setView(alertDialogView);
    adb.setTitle(choix);
    adb.setIcon(android.R.drawable.ic_dialog_alert);
    adb.setPositiveButton(« Ok », new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dialog, int which) {
    EditText mdp = (EditText)alertDialogView.findViewById(R.id.new_rcon_mdp);
    String t = mdp.getText().toString();
    Toast.makeText(Menu.this, t, Toast.LENGTH_LONG).show();
    }
    });
    adb.setNegativeButton(« Annuler », null);
    adb.show();

    Merci de votre aide :)

  14. sdk45
    8 nov 2011

    Bon, j’ai trouvé mon erreur, elle était dans le layout, j’ai mis android:name au lieu de android:id…

    Merci comme même!

  15. fabien
    17 jan 2012

    Bonjour, tout d’abord merci pour ce très bon tuto, j’aurais souhaiter effectuer une petite evolution dessus a savoir préremplir le champ de saisie depuis une variable contenue dans la fenêtre mère.

    Quelqu’un sait-il comment faire?
    merci ;)

  16. Tunadroid
    25 mar 2012

    Bonsoir tout le monde,
    Pouvons nous mettre un OnClickListener() sur l’icone mise pour l’AlertDialog ?
    Merci

  17. Vincent
    4 avr 2012

    Bonjour, j’ai suivis ce tutoriel très bien expliqué et je remercie son créateur.
    Mais j’ai un petit problème….
    J’utilise l’EditText de l’alertdialog pour récupéré un nom de fichier. Mon alertdialog s’ouvre suite à l’appuie d’un bouton. Tout cela fonctionne correctement mais une fois !
    Malheureusement, lorsque je souhaite cliquer à nouveaux sur le bouton qui ouvre mon alertdialog, le fameux « désolé fermeture soudaine etc… » apparait. Que puis je faire ? est ce qu’un alertdialog peut être ouvert plusieurs fois ?
    Merci par avance ^^

  18. mido
    2 juin 2012

    Bonjour ?? Est-il possible de générer 2 éme boite à partir de la première sans caché ce dernier ???

  19. 3 juin 2012

    @mido : non tu es obligé d’en recréer une

  20. Chris
    10 juin 2012

    Bonjour j’ai un soucis :s j’ai recopier exactement comme le tuto mais je me retrouve avec deux erreurs que je ne comprends sur ces deux lignes là:

    LayoutInflater factory = LayoutInflater.from(this); le from est souligné

    AlertDialog.Builder adb = new AlertDialog.Builder(this); le new AlertDialog.Builder est souligné
    quelqu’un peut m’aider? merci

  21. jean
    12 déc 2012

    Bonjour, j’ai voulu adapter une alertdialog, celle-ci affiche le contenu de mon fichier xml et rien d’autre, donc aucun des boutons qui permettrait de fermer l’alertdialog

    Mon fichier xml contient un choix d’icones sur lesquelles j’ai mis un clicklistener avec pour but de faire ce que j’ai à faire puis fermer l’alertdialog. Les clics sont bien interceptés mais impossible de la fermer !

    En gros, comment fermer une alertdialog sans les boutons positive ou negative prévu à cet effet ?

    Est-il possible de donner un id à ces boutons et d les cacher pour ainsi simuler un clic dessus qui fermerait l’alertdialog ?

    Merci d’avance

Trackbacks & Pingbacks

  1. Les tweets qui mentionnent Personnalier un AlertDialog | Tuto Mobile -- Topsy.com

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