Créer une application de carte d'anniversaire

1. Introduction

Attention : Cet atelier de programmation est obsolète et sa mise à jour n'est plus assurée. Reportez-vous au cours Principes de base d'Android avec Compose pour connaître les dernières pratiques recommandées.

Dans cet atelier de programmation, vous allez créer une application Android simple qui affiche du texte. Vous apprendrez également à positionner le texte à l'écran en découvrant les composants d'interface utilisateur (UI) sous Android.

Conditions préalables

• Vous êtes capable de créer une application dans Android Studio.
• Vous pouvez exécuter une application dans un émulateur ou sur votre appareil Android.

Points abordés

• Les éléments d'interface utilisateur, tels que Views et ViewGroups
• Comment afficher du texte dans une application avec les éléments TextView
• Comment définir les attributs d'un élément TextView, tels que du texte, une police et des marges

Ce que vous allez créer

• Une application Android affichant un message d'anniversaire au format texte

Voici à quoi ressemblera votre application une fois que vous aurez terminé.

Ce dont vous avez besoin

• Un ordinateur sur lequel est installé Android Studio

2. Configurer l'application "Happy Birthday"

Créer un projet "Activité vide"

1. Pour commencer, créez un projet Kotlin dans Android Studio à l'aide du modèle Activité vide.
2. Donnez le nom "Happy Birthday" à votre application et appliquez-lui un niveau d'API minimal de 19 (KitKat).

Important : Si vous ne savez pas comment créer un projet dans Android Studio, consultez la page Créer et exécuter votre première application Android pour en savoir plus.

3. Exécutez votre application. Le résultat devrait ressembler à la capture d'écran ci-dessous.

Lorsque vous créez cette application "Happy Birthday" avec le modèle "Activité vide", Android Studio configure des ressources pour une application Android de base, ce qui comprend le message "Hello World!" au milieu de l'écran. Dans cet atelier de programmation, vous allez découvrir comment le message s'affiche, remplacer son texte par un message d'anniversaire, mais aussi ajouter et mettre en forme des messages supplémentaires.

À propos des interfaces utilisateur

L'interface utilisateur (UI) d'une application correspond à ce que vous voyez à l'écran : texte, images, boutons, etc. En d'autres termes, il s'agit de la manière dont l'application présente les éléments à l'utilisateur et la façon d'interagir avec elle.

Chacun de ces éléments correspond à ce que l'on appelle une View (vue). Dans une application, presque tout ce que vous voyez à l'écran est une View. Les Views (vues) peuvent être interactives, comme un bouton cliquable ou un champ de saisie modifiable.

Dans cet atelier de programmation, vous allez utiliser un type de View appelé TextView (vue de texte), qui permet d'afficher du texte.

Les Views d'une application Android ne font pas que flotter librement à l'écran. Les Views sont connectées par l'intermédiaires de relations. Par exemple, une image peut s'afficher à côté d'un texte et les boutons peuvent former une ligne. Pour organiser les Views, vous devez les placer dans un conteneur. Un ViewGroup (groupe de vues) est un conteneur dans lequel des objets View peuvent être placés afin de les organiser. L'agencement, ou mise en page, peut varier en fonction de la taille et du format de l'écran de l'appareil Android sur lequel l'application est exécutée, et s'adapte au mode d'affichage (portrait ou paysage).

L'un des types de ViewGroup est ConstraintLayout (mise en page contrainte), qui vous aide à organiser les Views qu'il contient de manière flexible.

À propos de l'éditeur de mise en page

La création de l'interface utilisateur, qui consiste à organiser des Views et des ViewGroups, est un point essentiel de la création d'une application Android. Android Studio fournit un outil qui vous aide à effectuer cette opération, à savoir l'éditeur de mise en page. Vous allez utiliser cet outil pour modifier le message "Hello World!" en "Joyeux anniversaire !", puis vous apprendrez à définir le style du texte.

En ouvrant l'éditeur de mise en page, vous remarquerez qu'il comporte de nombreux composants. Dans cet atelier de programmation, vous allez apprendre à utiliser la plupart de ces options. Utilisez la capture d'écran annotée ci-dessous pour identifier les différentes fenêtres de l'éditeur de mise en page. Vous découvrirez chaque partie à mesure que vous modifierez votre application.

• À gauche (1) se trouve la fenêtre Projet, que vous avez vue précédemment. Elle recense les fichiers qui composent votre projet.
• Au centre, vous pouvez voir deux dessins, (4) et (5), qui représentent la mise en page de l'écran de votre application. La représentation de gauche (4) est une approximation relativement fidèle de ce à quoi ressemblera votre écran lorsque l'application s'exécutera. Il s'agit de l'affichage Conception.
• La représentation de droite (5) correspond à l'affichage Plan, qui peut s'avérer utile pour certaines opérations.
• La palette (2) contient des listes de différents types de Views que vous pouvez ajouter à votre application.
• L'arborescence des composants (3) est une autre façon de représenter l'ensemble des vues de votre écran
• Tout à droite de la page (6), on retrouve le volet Attributs. Il affiche les attributs d'une View et vous permet de les modifier.

Pour en savoir plus sur l'éditeur de mise en page et sur sa configuration, consultez le guide de référence à destination des développeurs.

Capture d'écran annotée de l'éditeur de mise en page dans son ensemble :

Apportons quelques modifications à l'aide de l'éditeur de mise en page pour que votre application ressemble davantage à une carte d'anniversaire !

Modifier le message Hello World

1. Dans Android Studio, accédez à la fenêtre Projet sur la gauche.
2. Prêtez attention à ces dossiers et fichiers : le dossier app contient la plupart des fichiers de l'application que vous allez modifier. Le dossier res est réservé aux ressources, telles que les images ou la mise en page. Le dossier layout est réservé aux mises en page de l'écran. Le fichier activity_main.xml contient une description de votre mise en page.
3. Développez le dossier app, puis le dossier res et enfin le dossier layout.
4. Double-cliquez sur activity_main.xml. Le fichier s'ouvre alors dans l'éditeur de mise en page et affiche la disposition des éléments qu'il décrit dans le volet Conception.

Remarque : Tout au long de ces ateliers de programmation, vous serez fréquemment invité à ouvrir un fichier, comme lors des étapes précédentes. Pour être plus concis, nous utiliserons parfois une abréviation de type "Ouvrez activity_main.xml (res > layout > activity_main.xml)" au lieu d'expliquer la manipulation étape par étape.

5. Consultez la liste des vues de l'arborescence des composants. Notez qu'il y a un élément ConstraintLayout avec un TextView en dessous. Ils représentent l'interface utilisateur de votre application. L'élément TextView est en retrait, car il se trouve dans ConstraintLayout. À mesure que vous ajoutez des Views à ConstraintLayout, elles sont ajoutées à cette liste.
6. Notez que la mention "Hello World!" apparaît à côté de TextView, ce qui correspond au texte qui apparaît lorsque vous exécutez l'application.

7. Dans l'arborescence des composants, cliquez sur l'élément TextView.
8. Sur la droite, consultez le panneau Attributs.
9. Accédez à la section Attributs déclarés.
10. Notez que l'attribut text de la section Attributs déclarés contient Hello World!.

L'attribut text indique le texte affiché dans un élément TextView.

11. Cliquez sur l'attribut text contenant Hello World!.
12. Remplacez-le par Happy Birthday!, puis appuyez sur la touche Entrée. Si un avertissement concernant une chaîne codée en dur s'affiche, ne vous en inquiétez pas pour le moment. Vous découvrirez comment éviter cet avertissement dans le prochain atelier de programmation.
13. Notez que le texte a été modifié dans l'affichage Projet. Ce qui est bien pratique, car vous pouvez voir vos modifications instantanément !
14. Exécutez votre application : le message Happy Birthday! s'affiche.

Bien joué ! Vous avez apporté vos premières modifications à une application Android.

3. Ajouter des éléments TextView à la mise en page

La carte d'anniversaire que vous créez aura une mise en page différente de celle qui est appliquée actuellement à l'application. Au lieu du texte en petit au centre, vous avez besoin de deux messages plus grands, l'un en haut à gauche et l'autre en bas à droite. Dans cette tâche, vous allez supprimer l'élément TextView existant, ajouter deux nouveaux TextViews et apprendre à les positionner dans le conteneur ConstraintLayout.

Supprimer l'élément TextView actuel

1. Dans l'éditeur de mise en page, cliquez sur l'élément TextView au centre de la mise en page pour le sélectionner.

2. Appuyez sur la touche Suppr. Android Studio supprime l'élément TextView et votre application n'affiche plus qu'un conteneur ConstraintLayout dans l'éditeur de mise en page et l'arborescence des composants.

Conseil : Si vous souhaitez faire un zoom avant sur la mise en page, vous pouvez utiliser les commandes situées en bas à droite de l'éditeur de mise en page pour régler la taille d'affichage. Cliquez sur l'icône tout en bas pour revenir au niveau de zoom pour lequel l'affichage s'adapte à la taille de la mise en page.

Ajouter un élément TextView

Au cours de cette étape, vous allez ajouter un élément TextView en haut à gauche de votre application pour écrire le message d'anniversaire.

La palette en haut à gauche de l'éditeur de mise en page contient des listes de différents types de Views, organisés par catégorie, que vous pouvez ajouter à votre application.

1. Celui qui nous intéresse est TextView, qui apparaît dans les catégories Common et Text.

2. À partir de la palette, faites un glisser-déposer d'un élément TextView en haut à gauche de la surface de conception dans l'éditeur de mise en page. Vous n'avez pas besoin d'être particulièrement précis. Il vous suffit de le déposer dans le coin supérieur gauche.

3. Notez que l'élément TextView a été ajouté à l'arborescence des composants avec un point d'exclamation rouge.
4. Pointez le curseur sur le point d'exclamation. Un message d'avertissement s'affiche, indiquant que la vue n'est pas fixée et qu'elle peut donc changer de position lorsque vous exécutez l'application. Vous corrigerez cela à l'étape suivante.

Positionner l'élément TextView

Pour votre carte d'anniversaire, l'élément TextView doit se trouver dans le coin supérieur gauche, en gardant un peu d'espace autour. Pour régler le problème signalé par l'avertissement, vous allez ajouter des contraintes à l'élément TextView, qui indiquent à votre application comment le positionner. Les contraintes sont des indications et des limites qui s'appliquent à la position d'une View dans une mise en page.

Les contraintes que vous ajoutez en haut et à gauche doivent comporter des marges. Une marge indique la distance entre une View et le bord de son conteneur.

1. À droite, dans Attributs, recherchez Widget de contrainte dans la section Mise en page. Le carré représente votre vue.

2. Cliquez sur le signe + au-dessus du carré. Il s'agit de la contrainte située entre le haut de l'affichage de texte et le bord supérieur du conteneur.
3. Un champ avec un nombre s'affiche pour définir la marge supérieure. La marge correspond à la distance entre l'élément TextView et le bord du conteneur, ConstraintLayout. Le nombre indiqué dépend de l'endroit où vous avez déposé l'élément TextView. Lorsque vous définissez cette marge supérieure, Android Studio ajoute automatiquement une contrainte correspondante en haut du conteneur ConstraintLayout.

4. Modifiez la marge supérieure pour indiquer la valeur 16.

Remarque : Dans l'interface utilisateur, les marges et autres distances sont exprimées en pixels indépendants de la densité (dp). Cela correspond à des centimètres ou à des pouces, mais pour les distances à l'écran. Android traduit cette valeur en nombre de pixels réel pour chaque appareil. En règle générale, 1 dp correspond à environ 1/160e de pouce, mais en fonction des appareils, cette taille réelle peut varier.

5. Répétez l'opération pour la marge de gauche.

6. Dans le champ text, saisissez un message d'anniversaire pour votre ami, par exemple "Happy Birthday, Sam!", et appuyez sur la touche Entrée.

7. La vue Conception est mise à jour pour refléter ce changement dans votre application.

Ajouter et positionner un autre élément TextView

Votre carte d'anniversaire doit comporter une deuxième ligne de texte en bas à droite. Pour l'ajouter, suivez la même procédure que pour la tâche précédente. Selon vous, quelles sont les marges à appliquer à l'élément TextView ?

1. À partir de la palette, de nouveau, faites un glisser-déposer d'un élément TextView dans l'éditeur de mise en page, en bas à droite de l'aperçu de l'application.

2. Définissez la marge de droite sur 16.
3. Définissez la marge inférieure sur 16.

4. Dans le volet Attributs, modifiez le champ text pour signer votre carte, par exemple "From Emma".
5. Exécutez votre application. Votre message d'anniversaire doit apparaître en haut à gauche et votre signature en bas à droite.

Félicitations ! Vous avez ajouté et positionné des éléments d'UI dans votre application.

4. Modifier le style de texte

Vous avez ajouté du texte à votre interface utilisateur, mais nous sommes encore loin de l'application finale. Dans cette tâche, vous allez apprendre à modifier la taille et la couleur du texte, mais aussi d'autres attributs qui définissent l'apparence des éléments TextView. Vous pourrez également tester différentes polices.

1. Cliquez sur le premier élément TextView de l'arborescence des composants, puis recherchez la section Common Attributes (Attributs communs) de la fenêtre Attributes (Attributs). Vous devrez peut-être faire défiler la page vers le bas pour la trouver.
2. Notez les différents attributs disponibles, en particulier fontFamily, textSize et textColor.

3. Recherchez textAppearance.
4. Si l'option textAppearance n'est pas développée, cliquez sur le triangle pointant vers le bas.
5. Dans le champ textSize, définissez la valeur sur 36sp.

Remarque : Tout comme les pixels indépendants de la densité (dp) sont une unité de mesure des distances à l'écran, les pixels indépendants de l'échelle (sp) sont une unité de mesure de la taille de la police. Dans les applications Android, les éléments d'UI utilisent deux unités de mesure distinctes. Les pixels indépendants de la densité (dp) servent à la mise en page, tandis que les pixels indépendants de l'échelle (sp) permettent de définir la taille du texte. Par défaut, ces deux unités sont équivalentes, mais en fonction de la taille de texte définie par les préférences de l'utilisateur, les éléments en sp sont redimensionnés.

6. Regardez l'éditeur de mise en page pour constater la modification.

7. Dans le champ fontFamily, indiquez casual.
8. Essayez différentes polices pour voir à quoi elles ressemblent. D'autres polices sont disponibles en bas de la liste, sous Autres polices….
9. Une fois que vous avez terminé, définissez fontFamily sur sans-serif-light.
10. Cliquez sur la zone de modification de l'attribut textColor, puis commencez à saisir black (noir). Notez qu'au fur et à mesure que vous écrivez, Android Studio affiche une liste de couleurs contenant le texte que vous avez saisi.

11. Dans la liste des couleurs, sélectionnez @android:color/black puis appuyez sur la touche Entrée.
12. Dans l'élément TextView contenant votre signature, modifiez les valeurs des champs textSize, textColor et fontFamily.
13. Exécutez votre application et examinez le résultat.

Félicitations, vous venez de terminer les premières étapes de la création d'une application de carte d'anniversaire !

5. Solution

URL du code de solution : https://github.com/google-developer-training/android-basics-kotlin-birthday-card-app-solution

1. Accédez à la page du dépôt GitHub fournie pour le projet.
2. Vérifiez que le nom de la branche correspond à celui spécifié dans l'atelier de programmation. Par exemple, dans la capture d'écran suivante, le nom de la branche est main.

3. Sur la page GitHub du projet, cliquez sur le bouton Code pour afficher une fenêtre pop-up.

4. Dans la fenêtre pop-up, cliquez sur le bouton Download ZIP (Télécharger le fichier ZIP) pour enregistrer le projet sur votre ordinateur. Attendez la fin du téléchargement.
5. Recherchez le fichier sur votre ordinateur (il se trouve probablement dans le dossier Téléchargements).
6. Double-cliquez sur le fichier ZIP pour le décompresser. Un dossier contenant les fichiers du projet est alors créé.

Ouvrir le projet dans Android Studio

1. Lancez Android Studio.
2. Dans la fenêtre Welcome to Android Studio (Bienvenue dans Android Studio), cliquez sur Open (Ouvrir).

Remarque : Si Android Studio est déjà ouvert, sélectionnez l'option de menu File > Open (Fichier > Ouvrir).

3. Dans l'explorateur de fichiers, accédez à l'emplacement du dossier du projet décompressé (il se trouve probablement dans le dossier Téléchargements).
4. Double-cliquez sur le dossier de ce projet.
5. Attendez qu'Android Studio ouvre le projet.
6. Cliquez sur le bouton Run (Exécuter) pour créer et exécuter l'application. Assurez-vous qu'elle fonctionne correctement.

Attention : Si Android Studio affiche un message d'erreur "Framework Android détecté. Cliquez pour configurer", si le projet n'est pas détecté ou si le bouton d'exécution est désactivé, vérifiez que vous ouvrez bien le sous-répertoire HappyBirthday et non son répertoire parent.

6. Résumé

• L'éditeur de mise en page vous permet de créer l'interface utilisateur de votre application Android.
• Dans une application, presque tout ce que vous voyez à l'écran est une View.
• Un élément TextView est un composant d'interface utilisateur permettant d'afficher du texte dans votre application.
• Un ConstraintLayout est un conteneur pour d'autres éléments d'UI.
• Les Views doivent être fixées horizontalement et verticalement dans un conteneur ConstraintLayout.
• Vous pouvez placer une View en utilisant des marges.
• Une marge indique la distance entre une View et le bord du conteneur dans lequel elle se trouve.
• Vous pouvez modifier les attributs d'un élément TextView, comme la police, la taille du texte et la couleur.

7. En savoir plus

• Vocabulaire pour les bases d'Android en Kotlin
• View
• TextView
• ConstraintLayout
• dp et sp
• L'éditeur de mise en page d'Android Studio