Introduction à Android. 1. Création d'une première application

Transcription

1 Introduction à Android 1. Création d'une première application 1. Dans Eclipse, créer un nouveau Projet Android (File/New Project/ Android /Android Project nommé TP01_AndroidActivity dans le package MesTp.Pack. Vous obtenez ceci :

2 2. Créer votre téléphone virtuel en cliquant sur le petit carré vert de la barre d'outils.

3 3. Configurer le lancement de votre application (Propriétés du projet/run Settings). Choisir New/ Android Application.

4 Précisez le projet de référence ainsi que l'activité principale. Choisissez votre téléphone virtuel. 4. Lancer votre application en cliquant sur Run As/ Android Application

5 Vous pouvez voir le lien entre Eclipse et votre téléphone virtuel grâce à la vue Console qui indique les instructions effectuées par Eclipse en direction du téléphone virtuel. Votre application est chargée et prête à être utilisée sur vtre téléphone virtuel lorsque vous avez ces lignes Uploading TP01_Android.apk onto device 'emulator-5554' Installing TP01_Android.apk... Success! Starting activity MesTP.Pack.TP01_AndroidActivity on device emulator-5554 ActivityManager: Starting: Intent { act=android.intent.action.main = PRET!!! Vous pouvez laisser fonctionner l'émulateur Android pour toute la séance de TP. Lorsque vous lancerez à nouveau votre application, Eclipse ne fera que d'installer la nouvelle version de votre application dans l'émulateur. cela améliorera sensiblement la rapidité de vos tests!

6 2. Modification de votre application 2.1. Modifier la phrase d'accueil Pour comprendre l'organisation des différents fichiers, vous allez modifier votre application de manière à ce que le message d'accueil soit "Bonjour Mobile". Quel fichier devez-vous modifier pour cela? 5. Effectuez la modification et relancez votre mobile afin de vérifier que votre modification a bien été prise en compte Modifier le titre de l'application Cette fois, vous allez modifier votre application de manière à ce que le titre de l'application soir "Ex01_Android". Quel fichier devez-vous modifier pour cela? 6. Effectuez la modification et relancez votre mobile afin de vérifier que votre modification a bien été prise en compte Modifier l'icône de l'application Cette fois, vous allez modifier votre application de manière à ce que l'icône de l'application soir "android.png".

7 7. Importez dans vos 3 répertoires res\drawable le fichier android.png. Quel fichier devez-vous modifier pour cela? 8. Effectuez la modification et relancez votre mobile afin de vérifier que votre modification a bien été prise en compte Modifier l'arrière-plan de l'application Cette fois, vous allez modifier votre application de manière à ce que l'arrière plan de l'application soir "bg.jpg". 9. Importez dans vos 3 répertoires res\drawable le fichier bg.jpg. Dans un projet Android, quel fichier correspond à un écran? Pour modifier l'arriere plan, quel fichier devez-vous alors modifier? 10. Effectuez la modification en ajoutant l'instruction android:background="@drawable/bg" et relancez votre mobile afin de vérifier que votre modification a bien été prise en compte. 11. Vous constatez que le contenu écrit ne se voit pas bien (lettres blanches sur fond vert anis). Modifier votre code de manière à ce que le contenu la couleur du texte soit noire (#000000) avec l'instruction android:textcolor="#000000" et relancez votre mobile afin de vérifier que votre modification a bien été prise en compte.

8 2.5. Ajouter une image Cette fois, vous allez modifier votre application de manière à ce qu'à la suite de l'annonce d'accueil une image soit affichée (par exemple android.png). Quel fichier devez-vous modifier pour cela? 12. Effectuez la modification en utilisant la balise <ImageView/> pour laquelle vous définirez les éléments hauteur, largeur et source drawable/android". Relancez votre mobile afin de vérifier que votre modification a bien été prise en compte. NB : Vous aurez surement des Warnings mais n'en tenez pas compte! 2.6. Commenter des parties de code. Cette fois, vous allez modifier votre application de manière à ce seul l'entête de l'application apparaisse (icône + titre). Pour cela, vous allez simplement mettre en commentaire les instructions permettant d'afficher "Bonjour Mobile!". Quel fichier devez-vous modifier pour cela?

9 13. Effectuez la modification (les instructions de mise en commentaire étant les même qu'en HTML) et relancez votre mobile afin de vérifier que votre modification a bien été prise en compte Ajouter du texte Cette fois, vous allez modifier votre application de manière qu'une seconde phrase s'affiche en dessous de "Bonjour Mobile!". Quel(s) fichier(s) devez-vous modifier pour cela? 14. Effectuez la modification et relancez votre mobile afin de vérifier que votre modification a bien été prise en compte. 3. Agencement d'un écranalignement des composants 15. Dupliquer votre fichier main.xml en mon_ecran.xml, insérez-y les instructions suivantes (expliquées dans l'annexe). <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" /> </LinearLayout> Annexe : Configurer un LinearLayout

10 Plusieurs éléments sont disponibles pour permettre aux développeurs de personnaliser ce Layout. 1. Orientation du Layout C est la première chose que vous précisez quand vous créez votre LinearLayout (android:orientation). Cette option spécifie la façon dont seront alignés les éléments contenus dans ce Layout. Deux options sont disponibles : Verticale : Oriente les éléments sur une ligne verticale. Horizontale : Oriente les éléments sur une ligne horizontale. 2. Taille des éléments Le LinearLayout ainsi que tous les widgets qui le composent doivent fournir une taille (hauteur et largeur). Donc ils doivent définir les deux propriétés suivantes : android:layout_width android:layout_height Ces deux propriétés peuvent prendre 3 types de valeur : Une taille fixe : par exemple 50px (pixels). Donc quelque soit la taille de l écran, l élément occupera exactement 50px. fill_parent : Dans ce cas on demande au composant d occuper tout l espace disponible chez son conteneur parent (après le placement des autres widgets). wrap_content : Pour demander au Widget d occuper une taille naturelle (la taille de son contenu pour le texte par exemple). S il est trop gros par rapport à la taille disponible. Android s occupera par exemple de couper le texte s il n y a plus de place. 3. Gravité des éléments Dans un LinearLayout les éléments sont alignés de gauche à droite et de haut en bas. Donc la question qui se pose est comment faire si l on veut placer notre élément tout en bas ou a droite. La réponse se trouve dans la gravité (android:layout_gravity). Les gravités les plus couramment utilisées sont left, center_horizontal, top, bottom, right, pour respectivement aligner les éléments à gauche, au centre, en haut, en bas et à droite. On peut aussi utiliser center_vertical pour centrer verticalement l élément. 16. Faites le nécessaire pour que ce soit cet écran qui s'affiche au lancement de l'application. 17. Faites le nécessaire pour qu'il soit écrit un texte dans le bouton.

11 18. Ajoutez l'instruction ci-dessous dans la mise en page de votre bouton et relancez l'application. android:layout_gravity="center_horizontal" 3.2. Poids des composants 19. Complétez votre fichier mon_ecran.xml avec les instructions suivantes (expliquées dans l'annexe). <?xml version="1.0" encoding="utf-8"?> <LinearLayout.. > <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_weight="1" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_weight="1" /> </LinearLayout> Annexe : Poids d'un composant

12 Prenons un exemple, imaginez que vous avez 2 boutons en colonne et que vous voulez que chacun occupe tout l espace disponible. Si on leur affecte la même valeur au poids (android:layout_weight), l espace libre sera partagé équitablement entre les deux. Si l on met une valeur 1 au premier et 2 au second, le deuxième prendra deux fois plus d espace libre que le premier (Par défaut la valeur du poids est de 0). Vous pouvez aussi utiliser des pourcentages, mais dans ce cas assurez vous bien que la somme des pourcentages ne dépasse pas 100%. 20. Complétez votre fichier strings.xml en conséquence puis testez (Test 1) 21. Modifiez votre vue en affectant un poids égal à 2 au 2èm bouton puis testez (Test 2) Test 1 Test Espacement des composants 22. Dans votre fichier mon_ecran.xml, supprimez les poids des 2 boutons puis testez (Test 3). 23. Ajoutez à votre 2 ème bouton l'instruction android:paddingtop="50px", puis testez (Test 4).

13 Test 3 Test4 24. Dans votre 2 ème bouton, remplacer l'instruction android:paddingtop="50px" par android:layout_margintop="50px" puis observez le résultat. Annexe : Espacement d'un composant Les différents éléments que vous créez sont par défaut serrés les uns contre les autres. Vous pouvez augmenter l espacement à l aide de la propriété android:padding (padding top, left, right et bottom). La valeur précise l espace situé entre le contour de l élément et son contenu réel. Par exemple pour un bouton c est l espacement entre le contour du bouton et son texte. Vous remarquez bien que sur le 2 ème bouton un petit espacement se trouve entre le titre du bouton et le bord supérieur de ce dernier. Cet espacement est obtenu grâce à la ligne android:paddingtop="50px". Maintenant nous allons voir qu elle est la différente entre padding et margin. Reprenons notre exemple et on va remplacer le paddingtop par un margintop (android:layout_margintop=»20px»)