Tutoriel Android - TP de prise en main - PDF - Farnell Element 14

Tutoriel Android - TP de prise en main - PDF - Farnell Element 14 - Revenir à l'accueil

Branding Farnell element14 (France)

 

https://hal.inria.fr/cel-01082588v2/document Tutoriel Android - TP de prise en main Dima Rodriguez To cite this version: Dima Rodriguez. Tutoriel Android - TP de prise en main. Ecole d’ing´enieur. France. 2014, ´ pp.51. HAL Id: cel-01082588 https://hal.archives-ouvertes.fr/cel-01082588v2 Submitted on 26 Nov 2014 HAL is a multi-disciplinary open access archive for the deposit and dissemination of scientific research documents, whether they are published or not. The documents may come from teaching and research institutions in France or abroad, or from public or private research centers. L’archive ouverte pluridisciplinaire HAL, est destin´ee au d´epˆot et `a la diffusion de documents scientifiques de niveau recherche, publi´es ou non, ´emanant des ´etablissements d’enseignement et de recherche fran¸cais ou ´etrangers, des laboratoires publics ou priv´es.Tutoriel Android TM TP de prise en main Dima RodriguezPolytech’ Paris Sud Tutoriel AndroidTM Dima Rodriguez Novembre 2014 TP de prise en mainTable des matières Préambule 4 1 Installation de l’IDE 5 2 Configuration de l’IDE 6 Installation des paquets supplémentaires et des mises à jours . . . . . . 6 Configuration d’un émulateur . . . . . . . . . . . . . . . . . . . . . . . 6 3 Notre première application Android 10 Création d’un projet et d’une application “Hello World” . . . . . . . . . 10 Exécution de l’application . . . . . . . . . . . . . . . . . . . . . . . . . 11 Se repérer dans le projet . . . . . . . . . . . . . . . . . . . . . . . . . 14 Modification de l’interface utilisateur . . . . . . . . . . . . . . . . . . . 16 Répondre aux évènements . . . . . . . . . . . . . . . . . . . . . . . . . 21 Créer et lancer une autre activité . . . . . . . . . . . . . . . . . . . . . 22 Créer des animations . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Créer un View personnalisé pour gérer un jeu . . . . . . . . . . . . . . 32 Temporisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Rajouter un bouton sur la barre d’action . . . . . . . . . . . . . . . . . 40 Lancement d’une autre application . . . . . . . . . . . . . . . . . . . . 41 Changement de langue . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Annexes 46 Explication du code généré par défaut pour la classe Principale . . . . . 46 Cycle de vie d’une activité . . . . . . . . . . . . . . . . . . . . . . . . 49 2Table des figures 2.1 SDK Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.2 Android Virtual Device Manager . . . . . . . . . . . . . . . . . . 8 2.3 Création d’un appareil virtuel . . . . . . . . . . . . . . . . . . . . 9 3.1 Création d’un projet . . . . . . . . . . . . . . . . . . . . . . . . . 12 3.2 Créer une activité . . . . . . . . . . . . . . . . . . . . . . . . . . 12 3.3 Nouvelle activité . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 3.4 Exécution de l’application . . . . . . . . . . . . . . . . . . . . . . 13 3.5 Aperçu de l’interface Eclipse . . . . . . . . . . . . . . . . . . . 14 3.6 Hiérarchie de LinearLayout . . . . . . . . . . . . . . . . . . . . . 17 3.7 Premier test de l’application modifiée . . . . . . . . . . . . . . . . 20 3.8 Champ de saisie et bouton . . . . . . . . . . . . . . . . . . . . . 21 3.9 Création d’une nouvelle activité . . . . . . . . . . . . . . . . . . . 23 3.10 Nouveau xml pour définir une animation . . . . . . . . . . . . . . 28 3.11 Animation en LinearLayout . . . . . . . . . . . . . . . . . . . . . 30 3.12 Animation en RelativeLayout . . . . . . . . . . . . . . . . . . . . 31 3.13 Création de la classe MonViewPerso . . . . . . . . . . . . . . . . 33 3.14 Ajout d’un bouton pour lancer le jeu . . . . . . . . . . . . . . . . 36 3.15 Activité avec vue personnalisée . . . . . . . . . . . . . . . . . . . 39 3.16 Barre d’action . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 3.17 Cycle de vie d’une activité . . . . . . . . . . . . . . . . . . . . . 50 3Préambule Le système d’exploitation Android est actuellement l’OS le plus utilisé dans le monde faisant tourner des smartphones, tablettes, montres connectées, liseuses électroniques, télévisions interactives, et bien d’autres. C’est un système, open source qui utilise le noyau Linux. Il a été créée par Android, Inc. qui fut rachetée par Google en 2005. Le développement d’applications pour Android s’effectue en Java en utilisant des bibliothèques spécifiques. Le but de ce tutoriel est de vous familiariser avec l’esprit de développement Android et ses bibliothèques. Nous introduirons les concepts de bases de création d’application en mettant en œuvre quelques fonctionnalités simples. Ce tutoriel n’est en aucun cas exhaustive, le potentiel des applications Android est beaucoup plus ample, les exemples cités dans ce document ne devront pas brider votre imagination ni votre curiosité. Sur le site officiel pour les développeurs Android vous trouverez la documentation des classes, des tutoriels ainsi que les lignes directrices pour préparer une distribution Google Play. Un lexique à la fin de ce document définit quelques mot du vocabulaire Android utilisé dans ce tutoriel. 41 Installation de l’IDE Dans cette section nous allons décrire la procédure d’installation d’un environnement de développement Android. Attention : Il faut exécuter les étapes dans l’ordre cité ci-dessous. a. Téléchargez le JDK7 (Java Development Kit) que vous pouvez trouver sur le site d’Oracle 1 . b. Désinstallez des éventuelles versions antérieures du JDK c. Installez le nouveau JDK d. Téléchargez le paquet ADT (Android Developer Tools). Il contient le SDK (Software Development Kit) Android et une version d’Eclipse avec ADT intégré. e. Pour installer l’IDE, il faut juste placer le dossier téléchargé dans le répertoire où vous avez l’habitude d’installer vos programmes (ou directement sur votre partition principale) et le dé-zipper. Vous pouvez également lui changer de nom si vous souhaitez, mais veillez à ne pas mettre des espaces ou des accents quand vous le renommez. f. Dans le dossier dé-zippé vous trouverez un exécutable Eclipse que vous pouvez désormais lancer pour commencer la configuration de votre environnement. i Au moment de l’écriture de ce document, Eclipse est le seul IDE (Integrated Development Environment) officiellement supporté. Un nouvel environnement, Android Studio, est en cours de développement mais est encore en version bêta pas très stable. Si vous souhaitez utiliser une version d’Eclipse que vous avez déjà sur votre machine il faudrait prendre le SDK et un plugin ADT et configurer Eclipse pour son utilisation. 1. Ce tutoriel a été réalisé avec JDK7u60 52 Configuration de l’IDE Installation des paquets supplémentaires et des mises à jours a. Lancez Eclipse b. On commencera par s’assurer que l’environnement installé est à jour. Dans le menu Help sélectionnez Check for Updates et installez les mises à jour le cas échéant. c. Pour vérifier la version du SDK installé, allez dans le menu Window > Android SDK Manager et lancez le gestionnaire du SDK. Dans le gestionnaire (fig.2.1) vous verrez la version du SDK installé (avec les mises jour disponibles) et aussi la version de l’API (Application Programming Interface) installée et la version du OS pour laquelle elle vous permettra de développer. Installez les paquets proposés par défaut. i Si vous voulez développer pour des versions Android plus anciennes il faut installer les versions API correspondantes. Configuration d’un émulateur Un émulateur permet de reproduire le comportement d’un appareil réel d’une façon virtuelle. L’utilisation d’un émulateur nous évite d’avoir à charger à chaque fois l’application dans un appareil pour la tester. On pourra ainsi lancer l’application dans l’IDE et elle s’exécutera sur un appareil virtuel appelé Android Virtual Device AVD qui émule le comportement d’un téléphone, une tablette ou autre. Eclipse ne propose pas d’émulateur par défaut, avant de commencer à créer notre application il faut en configurer un. 6Tutoriel Android 7 Figure 2.1 – SDK Manager Dans cet exemple, il existe une mise à jour disponible pour le SDK. L’API installée est la version 20 qui permet un développement pour Android 4.4, mais il existe une API plus récente pour Android 5.0. Polytech’ Paris Sud Dima RodriguezTutoriel Android 8 Figure 2.2 – Android Virtual Device Manager Allez dans le menu Window > Android Virtual Device Manager, une fois le gestionnaire ouvert cliquez sur le bouton Create (fig. 2.2). Une fenêtre de configuration s’affiche (fig. 2.3a). On propose de configurer un émulateur Nexus One avec les paramètres indiqués (fig.2.3b). Notez qu’à la création de l’appareil sa résolution vous est signalée. Dans cet exemple l’appareil a une résolution 480x800 qui correspond à hdpi (high density dots per inch). Ceci est important à noter pour l’intégration d’images dans l’application. i Notez que pour certains émulateurs proposés le processeur n’est pas installé par défaut, pour pouvoir les créer il faut installer un processeur adapté dans le SDK Manager. Polytech’ Paris Sud Dima RodriguezTutoriel Android 9 (a) Fenêtre de création AVD (b) Création d’un appareil Nexus One Figure 2.3 – Création d’un appareil virtuel Polytech’ Paris Sud Dima Rodriguez3 Notre première application Android Création d’un projet et d’une application “Hello World” a. Dans le menu File > New, sélectionnez Android Application Project , et renseignez les informations comme dans la figure 3.1 Application name : c’est le nom qui va apparaitre dans la liste des applications sur l’appareil et dans le Play Store. Project name : c’est le nom utilisé par Eclipse (typiquement le même que celui de l’application). Package name : il est utilisé comme identifiant de l’application, il permet de considérer différentes versions d’une application comme étant une même application. Minimum required SDK : c’est la version Android la plus ancienne sur laquelle l’application peut tourner. Il faut éviter de remonter trop en arrière ça réduirait les fonctionnalités que vous pourriez donner à votre application. Target SDK : c’est la version pour laquelle l’application est développée et testée. Typiquement la dernière version API que vous avez installée. 1 Compile with : c’est la version d’API à utiliser pour la compilation. Typiquement la dernière version du SDK installée. Theme : c’est l’apparence par défaut qu’aura votre application. 1. Ce tutoriel a été réalisé avec la version 4.4.2 10Tutoriel Android 11 b. Cliquez sur Next et laissez les choix par défaut. Vous pouvez éventuellement modifier l’emplacement de votre projet en décochant Create Project in Workspace et parcourir le disque pour sélectionner un autre dossier. c. Cliquez sur Next. La fenêtre suivante vous propose de définir une icône pour votre application. Nous laisserons l’icône proposée par défaut. Vous pourrez ultérieurement créer votre propre icône pour vos applications. Remarquez que l’image doit être proposée avec différentes résolutions pour s’adapter aux différents appareils. d. Cliquez sur Next. Nous arrivons à la création d’une activité (un écran avec une interface graphique). Sélectionnez Blank Activity (fig. 3.2) et cliquez Next. e. Selon la version de l’ADT que vous avez, vous verrez soit la fenêtre de la figure 3.3a ou celle de la figure 3.3b. La dernière version impose l’utilisation de fragments. Chaque activité dispose d’un layout qui définit la façon dont les composants seront disposés sur l’écran. Une activité peut être divisée en portions (ou fragments) chacune ayant son propre layout. La notion de fragment a été introduite pour favoriser la ré-utilisabilité de morceaux d’activité (un fragment peut être définit une fois et réutilisé dans plusieurs activités). Renseignez les champs comme indiqué dans la figure. f. Cliquez sur Finish, le projet est crée. ! Si vous créez un fragment ce sera le fichier fragment_principale.xml que vous devriez modifier dans la suite du tutoriel sinon vous modi- fierez le fichier activite_principale.xml. Exécution de l’application Sur l’émulateur Appuyez sur le bouton d’exécution (fig.3.4 ) et sélectionnez Android Application dans la fenêtre qui s’affiche. L’émulateur se lance, ça peut prendre quelques minutes soyez patients. Rassurez-vous, vous n’aurez pas à le relancer à chaque fois que vous compilez votre projet, laissez-le ouvert et à chaque fois que vous compilez et relancez votre application, elle sera rechargée dans l’émulateur en cours. Polytech’ Paris Sud Dima RodriguezTutoriel Android 12 Figure 3.1 – Création d’un projet Figure 3.2 – Créer une activité Polytech’ Paris Sud Dima RodriguezTutoriel Android 13 (a) Création d’activité sans fragment (b) Création d’activité avec fragment Figure 3.3 – Nouvelle activité Figure 3.4 – Exécution de l’application Polytech’ Paris Sud Dima RodriguezTutoriel Android 14 Explorateur Palette des composants graphiques Navigateur des fichiers ouverts Liste des composants de l'activité Propritétés du composant selectionné Navigation entre vue graphique et xml Output Aperçu de l'activité Debug et Execution Figure 3.5 – Aperçu de l’interface Eclipse Sur un appareil réel Connectez l’appareil par câble USB à l’ordinateur et installez le pilote si nécessaire. Activez l’option de débogage USB sur votre appareil (en général sous Settings > Applications > Development). Lancez l’application depuis Eclipse comme précédemment. Eclipse charge l’application sur votre appareil et la lance. i Une fois que votre application est compilée, un fichier MonAppli.apk est créé dans le dossier bin de votre répertoire de travail. C’est l’exé- cutable de votre application. C’est ce fichier que vous devez déployer pour distribuer votre application. Le contenu de ce fichier peut être inspecté à l’aide de n’importe quel logiciel standard de compression/- décompression de fichiers. Se repérer dans le projet La figure 3.5 montre les principaux éléments de l’interface Eclipse. Tout projet Android doit respecter une hiérarchie bien précise qui permettra au compilateur de retrouver les différents éléments et ressources lors de la génération de l’application. Cette hiérarchie favorise la modularité des applications Android. A la création du projet, Eclipse crée automatiquement des dossiers pour contenir Polytech’ Paris Sud Dima RodriguezTutoriel Android 15 les fichiers de code Java, les fichiers XML, et les fichiers multimédias. L’explorateur de projet vous permettra de naviguer dans ces dossiers. Les dossiers que nous utiliserons le plus sont src et res. Le premier contient le code Java qui définit le comportement de l’application et le second comporte des sous dossiers où sont stockés les ressources qui définissent l’interface de l’application (l’apparence). i La séparation entre fonctionnalité et apparence est un point essentiel de la philosophie Android. Le code de la classe principale de l’application (Principale.java) est situé dans le sous dossier polytech.android.monappli de src. Vous trouverez en annexe une brève explication du code qui y est généré par défaut. C’est dans le dossier src que seront enregistrées toutes les classes que nous allons créer dans ce projet. Par ailleurs, tout ce qui touche à l’interface utilisateur sera intégré dans les sous dossiers de res, dont voici une brève description : layout regroupe les fichiers XML qui définissent la disposition des composants sur l’écran. Il contient déjà, dès la création du projet, le layout de l’activité principale que nous avons créée. drawable-**** contient tout élément qui peut être dessiné sur l’écran : images (en PNG de préférence), formes, animations, transitions, icône, etc.. Cinq dossiers drawable permettent aux développeurs de proposer des éléments graphiques pour tout genre d’appareil Android en fonction de sa résolution. En populant correctement ces dossiers on peut ainsi créer des applications avec une interface qui s’adapte à chaque résolution d’écran avec un seul fichier .apk. ldpi low-resolution dots per inch. Pour des images destinées à des écrans de basse résolution (~120dpi) mdpi pour des écrans de moyenne resolution (~160dpi) hdpi pour des écrans de haute résolution (~240dpi) xhdpi pour des écrans ayant une extra haute résolution (~320dpi) xxhdpi pour des écrans ayant une extra extra haute résolution (~480dpi). menu contient les fichiers XML définissant les menus Polytech’ Paris Sud Dima RodriguezTutoriel Android 16 values contient les fichiers XML qui définissent des valeurs constantes (des chaines de caractères, des dimensions, des couleurs, des styles etc.) Dans le dossier gen vous verrez du code java généré automatiquement par Eclipse. Nous nous intéresserons particulièrement au fichier R.java dans le package polytech.android.monappli. Ce fichier définit une classe R dans laquelle sont définis les identifiants des ressources de l’application. A chaque fois que vous rajouterez une ressource à votre application un identifiant sera généré automatiquement dans cette classe vous permettant par la suite de pouvoir le référencer pour l’utiliser dans votre code 2 . Vous trouverez également sur la racine du projet un fichier nommé AndroidManifest.xml. Ce fichier est obligatoire dans tout projet Android, et doit toujours avoir ce même nom. Ce fichier permet au système de reconnaitre l’application. Modification de l’interface utilisateur Pour l’instant notre application ne fait qu’afficher un message sur l’écran, dans cette section nous allons modifier l’interface pour y mettre un champ de saisie et un bouton. Une interface utilisateur est en général constituée de ce qu’on appelle des ViewGroups qui contiennent des objets de type View ainsi que d’autres ViewGroups. Un View est un composant, tel un bouton ou un champ de texte, et les ViewGroups sont des conteneurs qui définissent une disposition des composants (Views) qui y sont placés. ViewGroup définit la classe de base des différents layouts. Comprendre le layout La disposition de notre interface est définie dans le fichier fragment_principale.xml situé dans le dossier layout de res. (ou bien le fichier activite_principale.xml si vous n’avez pas définit de fragment à la création de votre projet). Ouvrez ce fichier. 2. A l’intérieur de classe R sont définies plusieurs classes, dites nichées, telles que string, drawable, layout, menu, id, etc. Une classe nichée est membre de la classe qui la contient. On a recours à ce genre de classe en général lorsqu’on veut définir une classe qui n’est utilisée qu’à l’intérieur d’une autre classe. Si on la déclare privée elle ne sera visible qu’a l’intérieur de la classe qui l’a définie. Par ailleurs cette dernière peut également accéder aux attributs privés de la classe nichée. C’est une façon d’améliorer la lisibilité du code en regroupant les fonctionnalités qui vont ensemble. Dans notre cas toutes les classes nichées dans R sont publiques, donc accessibles depuis l’extérieur, mais comme elles sont membres de la classe R, pour y accéder, il faut passer par R. On utilisera des notations telles que R.string puisque ces classes sont statiques. Polytech’ Paris Sud Dima RodriguezTutoriel Android 17 La première balise que vous retrouverez est qui définit le type du conteneur qui compose l’interface, il impose la façon dont les composants seront disposés. Plusieurs types de conteneurs existent, les plus communs sont RelativeLayout, LinearLayout, TableLayout, GridView, ListView. L’utilisation d’un RelativeLayout, par exemple, implique que les composants seront placés selon des positions relatives les uns par rapport aux autres. Un LinearLayout implique une disposition linéaire verticale ou horizontale, un GridView permet la disposition des éléments selon une grille qui peut défiler, etc. A l’intérieur de la balise vous verrez un ensemble d’attributs définis selon le format plateforme:caractéristique=”valeur” Par exemple le premier attribut xmlns:android précise où sont définis les balises Android utilisées dans ce fichier. La balise , fille de la balise , définit un composant texte qui sera placé sur le layout. En effet, c’est sur ce composant là qu’on écrit le “Hello World” qu’affiche notre application. Cette chaine de caractère est définie par l’attribut android:text. La notation "@string/hello_world" fait référence à une chaine de caractère qui s’appelle hello_world et qui est définie dans le fichier strings.xml (dans le dossier values). Modifier le type de layout Nous allons maintenant modifier le type du layout pour le transformer en LinearLayout. La figure 3.6 trace la dérivation de la classe LinearLayout. Nous rajouterons ensuite nos composants sur ce layout dans une disposition linéaire. Figure 3.6 – Hiérarchie de LinearLayout Les layouts sont des ViewGroup qui sont eux mêmes des View [1] Dans le fichier fragment_principale.xml Polytech’ Paris Sud Dima RodriguezTutoriel Android 18 . supprimez l’élément . remplacez l’élément par . rajoutez l’attribut android:orientation et mettre sa valeur à “horizontal” Le code dans le fichier devient ainsi Rajouter d’un champ de saisie . Rajoutez un élément dans le tel que Nous avons ainsi placé un champ de saisie avec les attributs suivants : android :id permet de donner un identifiant unique à ce View qu’on utilisera pour référencer cet objet à l’intérieur de notre code. Le symbol @ est nécessaire pour faire référence à un objet ressource à partir d’un fichier XML. id est le type de ressource et chp_saisie est le nom qu’on donne à notre ressource. Le symbole + est utilisé pour définir un ID pour la première fois. Il indique aux outils du SDK qu’il faudrait générer un ID dans le fichier R.java pour référencer cet objet. Un attribut public static final chp_saisie sera défini dans la classe id.Le symbole + ne doit être utilisé qu’une seule fois au moment où on déclare la ressource pour la première fois. Par la suite si on veut faire référence à cet élément, à partir d’un XML, il suffira d’écrire @id/chp_saisie. Polytech’ Paris Sud Dima RodriguezTutoriel Android 19 android :layout_width permet de spécifier la largeur de élément. “wrap_content” signifie que le View doit être aussi large que nécessaire pour s’adapter à la taille de son contenu. Si en revanche on précise “match_parent” comme on l’avait fait pour le LinearLayout, dans ce cas le EditText occuperait toute la largeur de l’écran puisque sa largeur sera celle de son parent c-à-d le LinearLayout android :layout_height idem que pour le layout_width mais pour la hauteur android :hint précise le texte par défaut à afficher dans le champ de saisie quand il est vide. Nous aurions pu préciser directement la chaine de caractère ici codée en dur, mais on préfère utiliser plutôt une ressource qu’on définira dans strings.xml . Noter que l’utilisation de + ici n’est pas nécessaire parce qu’on fait référence à une ressource concrète (qu’on définira dans le fichier xml) et non pas à un identifiant que le SDK doit créer dans la classe R. i Privilégiez toujours l’utilisation des ressources strings plutôt que des chaines de caractères codées en dur. Cela permet de regrouper tout le texte de votre interface dans un seul endroit pour simplifier la recherche et la mise à jour du texte, de plus ceci est indispensable pour que votre application puisse être multilingue. l’IDE vous affichera un avertissement en cas de non respect de cette recommandation. Après la modification du code que nous venons de faire, quand vous sauvegarderez le fichier, un message d’erreur vous indiquera que l’identifiant str_chp_saisie n’est pas connu. Nous allons donc le définir. . Ouvrez le fichier strings.xml qui se trouve dans res>values . Rajoutez une nouvelle string nommée str_chp_saisie et dont la valeur est “Entrer un texte” . Vous pouvez éventuellement supprimer la ligne qui définit “hello_world” Votre fichier strings.xml ressemblera donc à ceci MonAppli Entrer un texte Polytech’ Paris Sud Dima RodriguezTutoriel Android 20 Figure 3.7 – Premier test de l’application modifiée Settings . Une fois que vos modifications sont sauvegardées vous remarquerez la création de deux attributs dans le fichier R.java. • Un attribut constant nommé chp_saisie dans la classe id. C’est un numéro unique qui identifie l’élément EditText que nous venons de rajouter. Cet identifiant nous permettra de manipuler l’élément à partir du code. • Un attribut constant nommé str_chp_saisie dans la classe string. Il fait référence à la chaine de caractère et nous permettra de l’utiliser dans le code. Lancez l’application, l’émulateur affichera un écran tel que dans la figure 3.7. Tapez un texte et remarquez comment la taille du champ de saisie s’adapte à la longueur du texte. Polytech’ Paris Sud Dima RodriguezTutoriel Android 21 (a) Disposition par défaut (b) Le EditText a un poids de 1 Figure 3.8 – Champ de saisie et bouton Rajouter un bouton . Dans le fichier strings.xml rajoutez une chaine de caractère qui s’appelle "btn_envoyer" et qui vaut Envoi. . Dans le fichier du layout rajoutez un élément