Ce tutoriel va aborder le clavier sur Android. Le sujet peut paraître simple et pas très intéressant mais c’est un sujet très important dans le développement d’applications, qui rajoute un plus à votre application et qui est souvent négligé par les développeurs. Donc cet article regroupera des astuces pour améliorer l’expérience utilisateur de votre application.

Comment adapter le clavier à vos besoins

Dans votre application, l’utilisateur aura peut être besoin de saisir quelques données de types différents. Dans ce cas, il faut faciliter le travail à l’utilisateur en faisant apparaître un clavier en fonction du type de champ à remplir (adresse mail, numéro de téléphone etc…).
Pour cela dans votre “EditText”, il faut simplement spécifier l’option android:inputType. Voici les différentes valeurs disponibles :

  • text (par défaut) : clavier normal
  • textCapCharacters : Clavier tout en majuscule
  • textCapWords : Première lettre automatiquement en majuscule
  • textCapSentences : Phrase en majuscule
  • textAutoCorrect : Activer la correction automatique
  • textAutoComplete : Activer la correction automatique forcée
  • textMultiLine : Texte sur plusieurs lignes
  • textNoSuggestions : Pas de suggestion de correction
  • textUri : Saisie d’une url web
  • textEmailAddress : Adresse mail
  • textEmailSubject : Sujet de mail
  • textShortMessage : Active le raccourci smiley sur le clavier
  • textPersonName : Saisie du nom d’une personne (affichage de speach to text en bas a gauche du clavier)
  • textPostalAddress : Saisie d’une adresse postale (affichage de speach to text en bas a gauche du clavier)
  • textPassword : Saisie de mot de passe
  • textVisiblePassword : Saisie d’un mot de passe visible
  • textWebEditText : Text Web (activation de raccourci tabulation et speach to text)
  • number / numberSigned / numberDecimal / phone / datetime / date / time : Clavier numérique

Vous pouvez mettre plusieurs valeurs en les séparant simplement par des “|”.

où est le champ suivant ?

Quand vous avez un clavier qui s’affiche, vous pouvez avoir l’envie qu’il soit lié au champ d’après, par exemple qu’un bouton “suivant” s’affiche au lieu du bouton “retour à la ligne”. Par défaut la valeur est “Suivant” et sinon “Ok” si vous êtes sur le dernier champ.
Mais vous pouvez choisir l’option que vous souhaitez voir afficher à l’aide de l’option android:imeOptions et voici les différentes options disponibles :

  • actionUnspecified : Aucune spécification particulière, l’éditeur affichera ce qui lui semble le plus logique
  • actionNone : Aucune spécification particulière.
  • actionGo : Affiche la valeur “Go”
  • actionSearch : Affiche la valeur “recherche”
  • actionSend : Affiche la valeur “envoyer”
  • actionNext : affiche la valeur “suivant”
  • actionDone : affiche la valeur “ok”

Vous pouvez récupérer l’action qui a été séléctionnée afin d’exécuter une action spécifique à l’aide de setOnEditorActionListener() et vous allez recevoir un événement du type IME_ACTION_SEND quand le bouton “envoyer” sera cliqué

Mon clavier cache ma vue

Vous pouvez rencontrer un problème quand l’utilisateur clique sur un EditText, celui là est caché par le clavier ou alors ce sont les champs en dessous qui ne sont plus visibles. Pour résoudre ce problème il vous faut jouer avec deux options :

  • Dans la partie correspondante à votre vue dans l’AndroidManifest.xml, vous pouvez rajouter android:windowSoftInputMode=”adjustResize” qui vous permet de redimensionner votre vue quand le clavier apparaît. Pour plus de détails vous pouvez regarder sur le site officiel d’android.
  • Vous pouvez combiner cette option avec le poids des différents éléments pour votre vue : android:weight (vous pouvez voir le tutoriel sur le LinearLayout)

Conclusion

Ce tutoriel se finit ici en espérant qu’il vous a aidé à comprendre le fonctionnement du clavier sous Android et comment faciliter l’interaction entre l’utilisateur et votre application.

Categories: Tutoriels

9 Responses so far.


  1. Maxime dit :

    J’ai le même problème, depuis que j’ai mis un listener sur l’editText, le bouton “ok” du clavier ne fonctionne plus :s

  2. alexis dit :

    Bonjour,
    tout d’abord merci beaucoup pour ce tuto, ça m’a vraiment bien aidé pour mon travail. Mais j’ai un petit souci, lorsque j’arrive sur mon dernier champs, j’ai spécifier une action spécifique lorsque l’on clique sur OK, qui lance un calcul. Le problème étant que le clavier reste et je voudrai juste qu’il s’enlève lors du clic sur OK . Comment puis-je faire cela ?
    Merci d’avance de l’attention que vous porterez à ce message.

    Alexis

    • Maxime dit :

      Problème résolu en utilisant ce code, il faut capturer le bouton “ok” et appliquer une fermeture du clavier au clique dessus ;)

      editText.setOnKeyListener(new OnKeyListener()
      {
      public boolean onKey(View v, int keyCode, KeyEvent event)
      {
      if (event.getAction() == KeyEvent.ACTION_DOWN)
      {
      if (keyCode == KeyEvent.KEYCODE_ENTER)
      {
      InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
      imm.hideSoftInputFromWindow(editText.getWindowToken(), 0);
      return true;
      }
      }
      return false;
      }
      });

Leave a Reply


Notifiez-moi des commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.