Skip to content

16 août 2010 | Rédigé par Axon

17

Utiliser l’autocomplétion [Tutoriel Android n°16]

L’autocomplétion consiste à afficher une liste de mot susceptible d’être celui que vous souhaitez écrire dans un EditText. Cet EditText un peu spécial ne nomme  AutoCompleteTextView. Il peut s’avérer très utile dans vos applications pour accélérer le temps d’édition d’un EditText, ce n’est d’ailleurs pas pour rien que l’on retrouve ce principe dans la barre de recherche Google.

Avant de commencer, je souhaite remercier Lucianot54 un néo-fidèle du site qui a souhaité donner à son tour une contribution à cette communauté qui se construit. Il m’a donc fournit les sources de ce tutorial.

Regardons tout de suite le résultat attendu :

Créons donc un projet (toujours sous Android 1.6 pour moi) et direction une fois n’est pas coutume le fichier string.xml.

String.xml

Dans ce fichier nous allons simplement créer un tableau de String. C’est dans ce tableau que notre AutoCompleteTextView cherchera les mots à afficher dans la liste. Voici à quoi doit ressembler votre fichier string.xml. Aucune difficulté majeur, même si c’est la première fois que l’on crée un tableau de String via le fichier string.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<string name="app_name">Autocomplétion | http://www.tutomobile.fr</string>
	<string-array name="tableau">
		<item>android</item>
		<item>iPhone</item>
		<item>tutoriel</item>
		<item>iPod</item>
		<item>iPad</item>
		<item>blackberry</item>
		<item>tutoriaux</item>		
		<item>Tuto Mobile</item>
		<item>tutorial</item>
		<item>bada</item>
		<item>tuto</item>
	</string-array>
</resources>

Code XML

Une fois notre tableau de String initialisé, nous allons passer à l’interface graphique. Elle est très simple et nous avons déjà réaliser ce type d’interface dans le tutorial pour réaliser un navigateur web. Je vous remet tout de même le code, mais le mieux serait de réussir à la faire sans se servir ni même s’inspirer du code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 
   	<AutoCompleteTextView 
   		android:id="@+id/autocompletion" 
   		android:layout_width="wrap_content"
   		android:layout_height="wrap_content"   	
   		android:layout_weight="1"
   		android:layout_marginRight="5dip"
   		android:layout_marginTop="10dip"
   		android:layout_marginLeft="5dip"  />
 
   	<Button android:id="@+id/ButtonEnvoyer" 
   		android:layout_height="wrap_content"  
   		android:layout_width="wrap_content"
   		android:layout_marginTop="8dip"
   		android:layout_marginRight="5dip"
   		android:text="Recherche"/>
 
</LinearLayout>

Code JAVA

Enfin pour finir voici le code Java commenté pour mieux comprendre.

package com.tutomobile.android.autocompletion;
 
import com.tutomobile.android.autocompletion.R;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.Toast;
 
public class Tutoriel13_Android extends Activity {
 
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		//On récupère le tableau de String créé dans le fichier string.xml
		String[] tutoVideo = getResources().getStringArray(R.array.tableau);
 
		//On récupère l'AutoCompleteTextView que l'on a créé dans le fichier main.xml
		final AutoCompleteTextView autoComplete = (AutoCompleteTextView) findViewById(R.id.autocompletion);
 
		//On récupère le bouton que l'on a créé dans le fichier main.xml
		Button boutonRecherche = (Button) findViewById(R.id.ButtonEnvoyer);
 
		//On crée la liste d'autocompletion à partir de notre tableau de string appelé tutoVideo
		//android.R.layout.simple_dropdown_item_1line permet de définir le style d'affichage de la liste
		ArrayAdapter adapter = new ArrayAdapter(this,
				android.R.layout.simple_dropdown_item_1line, tutoVideo);
 
		//On affecte cette liste d'autocompletion à notre objet d'autocompletion
		autoComplete.setAdapter(adapter);
 
		//Enfin on rajoute un petit écouteur d'évènement sur le bouton pour afficher
		//dans un Toast ce que l'on a rentré dans notre AutoCompleteTextView
		boutonRecherche.setOnClickListener(new OnClickListener() {
 
			public void onClick(View v) {
				Toast.makeText(Tutoriel13_Android.this, autoComplete.getText(), 2).show();
			}
		});
 
	}
}

Et voilà, si vous lancer votre application, vous n’avez plus qu’à taper quelque chose qui commence par les mêmes lettres que certaines chaînes de caractères contenu dans le tableau de String et les propositions devraient apparaître dans une liste comme sur le screen du début du tuto. Bien entendu, durant tout le tuto nous avons utiliser un tableau de String, mais cela fonctionne tout aussi bien avec une ArrayList !

A très vite pour un prochain tutorial Android, et n’oubliez pas de partager ce tuto s’il vous a plu. Alors Tweeter à fond et partager sans limite sur FaceBook et merci à vous pour votre soutien.

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

Encore un peu de lecture :

17 Commentaires Poster un commentaire
  1. 16 août 2010

    Ha super ça :)

    je vais m’en servir pour mon Java :)

    Merci pour l’info ;)

  2. Philippe
    27 août 2010

    Salut, dans le même ordre d’idée, je cherche la méthode pour pouvoir intégrer à l’aide du clavier virtuel des chiffres dans un EditText. Lors de la saisie d’un EditText Je souhaiterai que ce soit le clavier numérique qui s’installe par défaut plutot que le clavier texte.

    Quelqu’un connait-il la manipulation ?

    Merci

  3. lucianot54
    28 août 2010

    J’ai chercher sur google :
    « EditText android pad num »

    Essaye :

    ou

    J’ai pas testé, tiens nous au courant :)

  4. lucianot54
    28 août 2010

    RRR je déteste le BBCODE lol.

    essaye dans la balise EditText :

    android:inputType= »phone »

    ou

    android:inputType= »number »

  5. 29 août 2010

    Merci lucianot54 d’avoir répondu à la question de Philippe, j’ai eu un petit moment de pause pour mes deux premier jour de vacances ! ;)

  6. lucianot54
    29 août 2010

    Pas de problème :D . Sinon je voulais te demander, il y a pas moyen d’activer une interface pour utiliser le BBCODE dans les commentaire?

  7. 31 août 2010

    Je vais voir cela lucianot54 c’est vrai que cela devrait être pratique !

  8. Philippe
    31 août 2010

    Salut à tous,

    j’ai mis

    android:inputType= »number »
    et ça fonctionne impec, le clavier numérique se met par defaut.

    Merci à vous

  9. balorel
    26 oct 2010

    Cool ce tuto. Merci bien!
    Comment pourrait t-on ajourner le string-arry du fichier xml si jamais quelqu’un devait entrer un mot qui n’existe pas encore?

    Merci à vous!

  10. sajid
    6 déc 2010

    merci axon pour ce cool tuto,
    vraiment c’est simple et efficace, peut on mettre des bouton au lieu de l’auto-complétion ? càd mettre par exp 5 bouton le 1er de A à E le
    2 eme de F à J etc et quand on clic sur un bouton on auras la suggestion des mots qui commence par la lettre qu’on veut
    merci pour votre effort axon ;)

  11. melr
    4 mai 2011

    je trouve le document bien expliqué, il faut juste suivre les étapes et puis c’est tous.

    Par contre, j’ai une application à développer dont le système va fournir une équation du deuxième degré par exemple et c’est à l’utilisateur de dire le réponse, si sa réponse est vrai donc le système va passer à une autre équation sinon il va montrer à l’utilisateur sa faute en indiquant la réponse correcte. Je ne sais pas si quelqu’un peut m’aider.
    Merci à vous tous

  12. alikyo
    14 juil 2011

    Salut,

    Je tiens tout d’abord à te remercier pour ses tutoriels bien réussi et bien expliqués, qui m’ont aidé énormément dans mes projets ^^.

    Je voudrai savoir s’il est possible d’avoir une autocomplétion avec les adresse et ville comme celle qui existe sur google maps.

    merci d’avance.

  13. anthares
    16 mai 2012

    Salut,

    Tout d’abord merci pour tes tutos clair et précis, c’est rare d’en trouver d’aussi bon en français ;-) (plus dur qu’en anglais, j’entends)

    Je développe actuellement une appli pour android 2.2, l’auto complete fonctionne, mais au moment d’appuyer sur le bouton OK du clavier, celui ci ne disparait plus (le clavier et la zone de saisie prend tout l’écran)

    le seul moyen de revenir à mon activity est d’appuyer sur la touche retour du telephone/tablette

    Ca marchais très bien avec un EditText, mais mnt ca ne passe plus avec l’autocomplete…

    Une idée ??

    Merci d’avance

  14. Vivien
    12 juin 2012

    Salut Axon,

    j’ai une petite question. Je souhaite utilisé l’auto-complétion pour des codes postaux (il y en a donc beaucoup plus de 39000), je peux donc pas les mettre un à un dans le strings.xml

    J’ai donc fait la connexion avec une base de données MySQL à l’aide de PHP et Json, j’arrive à récupérer les données, mais comment les exploiter pour l’auto-complétion ?

    Je te remercie d’avance,

    Vivien

  15. 21 juin 2012

    @Vivien : il est préférable les stocker dans une base de donnée dans ton appli (rien ne t’empêche de les télécharger au démarrage de l’appli et de les stocker dans une BDD local comme ça ça évite de les télécharger à chaque fois) et ensuite avec ton cursor tu peux créer un adapter et utiliser ce dernier dans ton AutoCompleteTextView. Ce lien devrait t’aider : http://hello-android.blogspot.fr/2011/06/using-autocompletetextview-with-sqlite.html

  16. 20 août 2012

    J’ai à nouveau une question Axon.

    J’ai essayé ton tutoriel mais je n’arrive pas à faire ce que je souhaite avec. Pour le moment j’en suis au stade ou j’ai réussi à récupérer les données (codes postaux) de la BDD MySQL et je les aient dans un JSONArray, cependant je ne sais pas du tout comment faire pour les stocker dans une BDD Local maintenant et après y avoir accès.

    Je te remercie.

    Vivien

Trackbacks & Pingbacks

  1. Les tweets qui mentionnent [Tutorial Android] Utiliser l'autocomplétion | 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