Cyril Mottier vous avait présenté l’arborescence d’un projet Android et les principaux composants d’une application. Impatients de mettre la main à la pâte? On attaque maintenant les choses sérieuses avec une version améliorée du célèbre « Hello World », avec le SDK Android 1.5 s’il vous plaît !
Nous y voilà enfin ! Les « guerriers » qui ont eu le courage de lire les deux premières parties de ce tutorial vont enfin pouvoir arriver à leurs fins. Cette fin c’est la réalisation de votre premier programme sur Android. Comme à l’accoutumée, il m’a semblé judicieux de faire ce que tout bon professeur enseigne à ses élèves lors de l’apprentissage d’une nouvelle technologie ou d’un nouveau langage : un « Hello World ».
Certains d’entre vous ont probablement remarqué qu’avec le plugin ADT (Android Development Tools) d’Eclipse, la création d’un nouveau projet Android revient en fait à la création d’un programme de type « Hello World ». Ce « Hello World » est d’une simplicité enfantine. Cela permet aux débutants de mieux appréhender le développement sur Android. Dans les lignes qui suivent, nous allons créer notre propre « Hello World » en modifiant l’existant. Nous tenterons de l’améliorer d’un point de vue graphique essentiellement.
Note : Les exemples et les copies d’écran ci-dessous ont été effectués sur le SDK 1.5. Ce SDK introduit quelques nouveautés afin de faciliter le développement sur Android. On remarquera par exemple des changements au niveau de l’arborescence du projet par rapport à celle expliquée dans la partie 1 de ce tutorial
Vous noterez dans cette partie que le code Java a volontairement été réduit au maximum. Pourquoi? La réponse est assez simple. Le développement sur Android se fait bien sûr en Java comme il a été précisé dans des parties antérieures. Néanmoins, lorsqu’il s’agit d’interface graphique, le XML est préférable car plus simple et plus lisible. En effet, les ingénieurs de chez Google ont conçu un système d’expansion (inflate) de fichiers XML pour créer des interfaces graphiques. Ces fichiers XML sont ensuite utilisés, en interne par le système, pour générer l’interface graphique. Ce dernier relit les fichiers XML puis créé les objets Java associés de façon automatique.
Note : En réalité, les fichiers XML ne sont pas incorporés dans votre paquet d’installation sous forme XML. Le « parsing » (action de relire un fichier et d’en extraire les informations) est une opération relativement coûteuse. Pour contrer ce problème, les fichiers XML sont en réalité pré-parsés et incorporés sous une forme plus rapide à lire/exécuter dans le paquet d’installation. On conserve ainsi l’avantage de la lisibilité et de la facilité d’utilisation d’un point de vue utilisateur et on optimise d’autre part la relecture de ces fichiers lors de l’expansion de l’interface graphique.
Ce tutorial explique comment créer, à partir de rien, ce premier « Hello World ». La meilleure façon de bien comprendre la totalité de ce tutorial est d’en lire l’intégralité. Si vous n’avez pas réellement envie de vous attarder sur les différents points et préférez attaquer directement le code, les sources et les ressources sont disponibles dans ce fichier.
Maintenant que les quelques précisions ont été données, nous pouvons créer notre premier « Hello World ». Pour ce faire, commençons par créer le projet dans l’environnement Eclipse. Cliquez sur File > New > Other… > Android Project. Une boite de dialogue un peu modifiée en comparaison de celle présentée en partie 1 s’ouvre. Remplissez là comme suit :
Validez la création du projet en cliquant sur Finish. Nous voilà maintenant en présence d’un projet de type « Hello World » affichant simplement un texte à l’écran. Pour lancer l’application sur l’émulateur, cliquez simplement sur Run > Run ou sur l’icône représentant un cercle vert et contenant un triangle blanc. Une boite de dialogue s’ouvre alors et vous demande quel sera le type de l’exécution. Dans notre cas nous souhaitons bien sûr que l’exécution se fasse sous la forme d' »Android Application ».
L’objectif de cette partie est d’améliorer ce « Hello World » en n’utilisant presqu’exclusivement que du XML. Listons tout d’abord les différentes valeurs et ressources que nous utiliserons:
- Les chaines de caractères (strings.xml) : le nom de l’application, la chaine « Hello World »
- Les couleurs (colors.xml) : la couleur de la chaine « Hello World »
- Les dimensions (dimensions.xml) : la taille de la chaine « Hello World »
- Les images (drawable) : l’image de la mascotte Android ou tout autre image qui vous fait plaisir
Commençons par créer les différentes chaines de caractères que nous utiliserons. Ces éléments se trouvent dans le fichier strings.xml. Double cliquez sur ce dernier pour ouvrir la vue de modification. On y retrouve déjà deux chaines de caractères :
La première chaine est « app_name ». C’est le nom qui sera affiché dans le « Home Screen » sous l’icône de l’application. Cette chaine a pour valeur le nom de l’application donné dans la boite de dialogue à la création du projet. Il n’est donc normalement pas nécessaire de la modifier. La chaine « hello » par contre ne satisfait pas à nos critères et nous allons donc changer sa valeur à « Hello World ». Enregistrez le fichier pour valider les changements.
Créons maintenant une nouvelle couleur qui servira pour l’affichage de la chaine de caractère « Hello World ». Il nous faut un fichier colors.xml. De base, ce fichier n’existe pas et il faut donc le créer manuellement. Pour ce faire cliquez simplement sur l’icone Android disposant d’un signe plus vert. Une boite de dialogue, qui a été introduite avec le SDK 1.5, apparait. Nous souhaitons créer un fichier colors.xml qui contiendra des valeurs (values) relatives aux couleurs. ADT s’occupe automatiquement de créer le fichier dans le bon répertoire (c’est à dire res/values).
Le fichier de ressources colors.xml étant maintenant créé, il ne nous reste plus qu’à y ajouter une couleur. La couleur sera le blanc parfait « white » et la valeur associée « #fff ». Cliquez sur Add > Color et remplissez les champs avec les valeurs adéquates. Notez qu’Android gère plusieurs formats de couleurs que sont #RGB, #ARGB, #RRGGBB et #AARRGGBB. Ce sont les notations hexadécimales des couleurs R représentant le rouge, G le vert, B le bleu et A le canal alpha (la transparence).
Pour créer la dimension de la chaine de caractères « Hello World », il suffit de réitérer l’opération. Comme vous vous en doutez probablement, l’objectif est de créer un fichier dimensions.xml et d’y inclure le couple nom/valeur suivant : « dim_hello »/ »20px ». Dans notre cas, nous utilisons les pixels (px) comme mesure mais d’autres dimensions sont disponibles : in, mm, pt, dp et sp.
Ajoutons, pour finir l’image de la mascotte Android dans le dossier des drawables. Il suffit simplement d’effectuer un glisser/déposer dans le dossier drawable à l’aide d’Eclipse. Vous pouvez aussi directement inclure le fichier dans votre workspace puis lancer un rafraichissement de votre projet par un F5 dans Eclipse.
Note : En réalité, Android peut gérer les ressources présentes dans un seul et unique fichier de valeurs. Néanmoins, l’expérience prouve que mélanger les chaines de caractères, les couleurs, les tableaux d’entier, les dimensions, etc. n’aide pas à la compréhension d’un projet. De plus lors de l’internationalisation (i18n), il est inutile de traduire des grandeurs indépendantes de la localisation telles que les couleurs ou les dimensions par exemple. Il est donc préférable de séparer l’ensemble des ressources par type comme il est fait dans ce tutorial.
Toutes les ressources sont maintenant prêtes. Nous pouvons modifier l’interface graphique. Double-cliquez sur main.xml. L’éditeur de « layout » s’affiche. Il vous est possible de créer l’interface en mode graphique ou en tapant simplement le fichier XML à la main. Pour basculer entre les modes, utilisez les onglets en bas de la fenêtre. L’interface graphique étant assez facile d’utilisation, nous allons directement taper le code XML. Notre objectif est d’afficher l’image de la mascotte Android avec un « Hello World » en dessous. Le tout sera également centré quelque soit le type d’écran ou l’orientation utilisé. Le code ci-dessous représente l’interface graphique voulue :
De façon globale, l’interface graphique précédente dispose d’un unique élément LinearLayout à la racine englobant deux autres éléments ImageView et TextView. Etudions maintenant plus en détail l’utilité de ses éléments et surtout leurs attributs. Lorsqu’on créé une interface graphique, on souhaite « ranger » les composants graphiques afin que ces derniers s’affiche à l’écran. Parmi les possibilités les plus courantes, on trouve :
RelativeLayoutqui laisse les éléments fils se positionner par rapport au parent (positionnement relatif).AbsoluteLayoutqui permet aux éléments fils de se positionner de façon exacte par rapport au parent. Un élément fils définit alors une coordonnée exacte.FrameLayoutest un élément très basique qui oblige l’ensemble de ces enfants à se placer au coin supérieur gauche.LinearLayoutaligne l’ensemble de ses enfants dans une direction unique : horizontale ou verticale. Les éléments sont ensuite empilés les uns aprés les autres. Ce genre de layout n’affiche donc qu’un seul élément par ligne ou colonne (cela dépend de l’orientation choisie)
Dans notre cas, on souhaite afficher les éléments les uns au dessous des autres. On utilise donc un LinearLayout. Les attributs de l’élément sont ensuite les suivants :
xmlns:android="http://schemas.android.com/apk/res/android"définit le namespace android. Cette ligne doit obligatoirement être ajoutée à l’élément racineandroid:layout_width="wrap_content"indique à l’élément que sa largeur doit s’adapter au contenu. Les autres valeurs possibles sont « fill_parent » qui indique que l’élément va s’agrandir pour remplir totalement son parent. Il est également possible d’utiliser une dimension pour obtenir une taille fixeandroid:layout_height="wrap_content"indique, à l’instar du précédent que la hauteur doit s’adapter au contenu. Cet attribut est, comme le précédent, obligatoire pour l’ensemble des éléments graphiques car il permet au système de connaitre avec exactitude la place prise par l’élément à l’écranandroid:layout_gravity="center_vertical|center_horizontal"oblige l’élément à se centrer de façon verticale et horizontale dans son parentandroid:orientation="vertical"
permet d’orienter le layout de façon verticale. Les éléments seront empilés les un au dessous des autres
On insère ensuite dans le layout l’image. Cette dernière est incluse grâce à la vue ImageView à laquelle on assigne, grâce à l’attribut android:src, l’image de la mascotte. Cette image a pour nom original « tex.png » et se trouve dans le dossier drawable. Pour l’inclure on utilise donc la syntaxe @drawable/ suivi de son nom sans l’extension. L’inclusion d’une zone de texte suit la même logique. On utilise une TextView à laquelle on associe les différentes valeurs préparées en début de partie. La valeur android:text se trouve dans le fichier strings.xml, on y accède donc par @string/hello.De la même façon, on accède à la couleur par @color/white et à la dimension par @dimen/dim_hello. Notre interface graphique est maintenant terminée. Il nous reste à l’utiliser dans notre code Java. Il suffit de se rendre dans HelloWorld.java. Ce fichier contient le code suivant :
package com.cyrilmottier.android.helloworld;
import android.app.Activity;
import android.os.Bundle;
public class HelloWorld extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
On ne peut pas faire plus simple ! HelloWorld hérite bien d’Activity et c’est ce que nous souhaitons puisque, comme expliqué dans la partie 2, une activité permet d’afficher une interface graphique à l’utilisateur. La mise en place de notre interface graphique s’effectue simplement en redéfinissant la méthode onCreate. On applique simplement la vue créée à l’aide de setContentView(int). L’entier passé à cette méthode est la référence de notre layout. C’est ici qu’on utilise le fichier automatiquement géré R.java. Si vous n’avez pas changé le nom du fichier de votre interface graphique, il devrait être référencé par R.layout.main.
Nous y voilà ! Notre « Hello World » est prêt ! Cela peut sembler incroyable puisque nous n’avons presque pas écrit de code Java. C’est là que se trouve une des puissances d’Android : l’instanciation d’objets par XML. Nous avons créé ici une interface graphique mais d’autres objets non graphiques sont également instanciables via XML. Vous pouvez maintenant lancer votre premier programme sur l’émulateur et contempler le résultat :
