Principes de base d'Android en Kotlin 02.1 : Mise en page linéaire avec l'éditeur de mise en page

Cet atelier de programmation fait partie du cours Principes de base d'Android en Kotlin. Vous tirerez pleinement parti de ce cours en suivant les ateliers de programmation dans l'ordre. Tous les ateliers de programmation du cours sont listés sur la page de destination des ateliers de programmation Principes de base d'Android en Kotlin.

Ce que vous devez déjà savoir

• Créer une application Android de base en Kotlin.
• Exécuter une application Android sur un émulateur ou sur un appareil
• Principes de base de LinearLayout.
• Créer une application simple qui utilise LinearLayout et un TextView.

Points abordés

• Utiliser View et ViewGroup
• Organiser les vues dans un Activity à l'aide de LinearLayout.
• Comment utiliser ScrollView pour afficher le contenu défilant.
• Découvrez comment modifier la visibilité d'un View.
• Vous savez créer et utiliser des ressources de chaîne et de dimension.
• Créer une mise en page linéaire à l'aide de l'éditeur de mise en page d'Android Studio.

Objectifs de l'atelier

• Créez l'application AboutMe.
• Ajoutez TextView à la mise en page pour afficher votre nom.
• Ajouter un ImageView.
• Ajoutez un ScrollView pour afficher du texte défilant.

Dans l'application AboutMe, vous pouvez présenter des informations intéressantes vous concernant ou la personnaliser pour un ami, un membre de votre famille ou un animal de compagnie. Cette application affiche un nom, un bouton DONE, une image d'étoile et du texte à faire défiler.

Dans cette tâche, vous allez créer le projet Android Studio AboutMe.

1. Ouvrez Android Studio, si ce n'est pas déjà fait.
2. Si un projet est déjà ouvert dans Android Studio, sélectionnez Fichier > Nouveau > Nouveau projet.
   
   
   
3. Si aucun projet n'est déjà ouvert, sélectionnez + Start a new Android Studio project (Démarrer un nouveau projet Android Studio) dans la boîte de dialogue Welcome to Android Studio (Bienvenue dans Android Studio).
   
   
   
4. Dans la boîte de dialogue Create New Project (Créer un projet), dans l'onglet Phone and Tablet (Téléphone et tablette), sélectionnez le modèle Empty Activity (Activité vide). Cliquez sur Suivant.
   
   
   
5. Dans la boîte de dialogue Créer un projet suivante, définissez les paramètres suivants, puis cliquez sur Terminer.
   

Attribut	Valeur
Nom de l'application	AboutMe
Nom de l'entreprise android	com.android.example.AboutMe (ou votre propre domaine)
Enregistrer le lieu	Conservez l'emplacement par défaut ou remplacez-le par le répertoire de votre choix.
Langue	Kotlin
Niveau d'API minimal	API 19 : Android 4.4 (KitKat)
Ce projet prendra en charge les applications instantanées	Laissez cette case décochée.
Utiliser des artefacts AndroidX	Cochez cette case.

Android Studio mettra quelques instants à générer les fichiers du projet.

6. Exécutez votre application. La chaîne "Hello World" s'affiche sur l'écran vide.
   

Le modèle "Empty Activity" (Activité vide) crée une seule activité vide, Mainactivity.kt. Le modèle crée également un fichier de mise en page appelé activity_main.xml. Le fichier de mise en page a ConstraintLayout comme ViewGroup racine et un seul TextView comme contenu.

Dans cette tâche, vous allez remplacer le ViewGroup racine généré par un LinearLayout. Vous organisez également les éléments de l'UI verticalement.

Afficher les groupes

Un ViewGroup est une vue pouvant contenir des vues enfants, qui sont d'autres vues et groupes de vues. Les vues qui composent une mise en page sont organisées sous forme de hiérarchie de vues, avec un groupe de vues comme racine.

Dans un groupe de vues LinearLayout, les éléments d'UI sont organisés horizontalement ou verticalement.

Modifiez la mise en page racine pour qu'elle utilise un groupe de vues LinearLayout :

1. Sélectionnez le volet Project > Android (Projet > Android). Dans le dossier app/res/layout , ouvrez le fichier activity_main.xml.
2. Sélectionnez l'onglet Text (Texte) et remplacez le groupe de vue racine ConstraintLayout par LinearLayout.
3. supprimer TextView. Dans l'élément LinearLayout, ajoutez l'attribut android:orientation et définissez-le sur vertical.

Avant :

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Après :

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

L'éditeur de mise en page est un outil de conception visuelle intégré à Android Studio. Au lieu d'écrire manuellement du code XML pour créer la mise en page de votre application, vous pouvez utiliser l'éditeur de mise en page pour faire glisser des éléments d'UI dans l'éditeur de conception.

Pour afficher l'éditeur de mise en page, cliquez sur l'onglet Conception. La capture d'écran ci-dessous montre les différentes parties de l'éditeur de mise en page.

Éditeur de conception : affiche une représentation visuelle de la mise en page de votre écran dans la vue Conception, la vue Plan ou les deux. L'éditeur de conception est la partie principale de l'éditeur de mise en page.

Barre d'outils  : fournit des boutons permettant de configurer l'apparence de votre mise en page dans l'éditeur de mise en page et de modifier certains attributs de mise en page. Par exemple, pour modifier l'affichage de votre mise en page dans l'éditeur de mise en page, utilisez le menu déroulant Sélectionner la surface de conception  :

• Utilisez Design pour obtenir un aperçu réaliste de votre mise en page.
• Utilisez Blueprint (Plan) pour afficher uniquement les contours de chaque vue.
• Utilisez Design + Blueprint (Conception + Plan) pour afficher les deux vues côte à côte.

Palette : fournit une liste de vues et de groupes de vues que vous pouvez faire glisser dans votre mise en page ou dans le volet Arborescence des composants.

Attributs : affiche les attributs de la vue ou du groupe de vues actuellement sélectionnés. Pour basculer entre une liste complète d'attributs et les attributs les plus courants, utilisez l'icône  en haut du volet.

Arborescence des composants  : affiche la hiérarchie de mise en page sous forme d'arborescence de vues. L'arborescence des composants est utile lorsque vous avez des vues petites, masquées ou qui se chevauchent que vous ne pouvez pas sélectionner dans l'éditeur de mise en page.

Étape 1 : Ajouter un élément TextView

1. Ouvrez le fichier res/layout/activity_main.xml, s'il n'est pas déjà ouvert.
2. Passez à l'onglet Texte  et inspectez le code. Le code comporte un LinearLayout comme groupe de vues racine. (Les groupes de vues sont des vues qui contiennent d'autres vues.)
   
   LinearLayout possède les attributs requis layout_height, layout_width et orientation, qui sont vertical par défaut.
3. Passez à l'onglet Design pour ouvrir l'éditeur de mise en page.

Remarque : Les onglets Conception et Texte affichent la même mise en page, mais de manière différente. Les modifications que vous apportez dans un onglet sont répercutées dans l'autre.

4. Faites glisser une vue de texte du volet Palette vers l'éditeur de mise en page.
   
   
   
5. Notez le volet Arborescence des composants. La nouvelle vue de texte est placée en tant qu'élément enfant du groupe de vues parent, qui est LinearLayout.
   
   
6. Ouvrez le volet Attributs, s'il n'est pas déjà ouvert. (Pour ouvrir le volet, double-cliquez sur le fichier TextView que vous venez d'ajouter dans l'éditeur de conception.)
7. Définissez les attributs suivants dans le volet Attributs :

Attribut	Valeur
ID	name_text
texte	Définissez-le sur votre nom. (L'un des champs text affiche une icône en forme de clé à molette pour indiquer qu'il est destiné à l'espace de noms tools. Celui sans clé à molette correspond à l'espace de noms android. Il s'agit du champ text que vous recherchez.
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	Centre

Étape 2 : Créez une ressource de chaîne

Dans l'arborescence des composants, une icône d'avertissement  s'affiche à côté de l'élément TextView,. Pour afficher le texte d'avertissement, cliquez sur l'icône ou pointez dessus, comme indiqué dans la capture d'écran ci-dessous.

Pour résoudre l'avertissement, créez une ressource de chaîne :

1. Dans le volet Attributs, cliquez sur les trois points à côté de l'attribut text que vous avez défini sur votre nom. L'éditeur de ressources s'ouvre.
   
   
   
2. Dans la boîte de dialogue Ressources, sélectionnez Ajouter une ressource > Nouvelle valeur de chaîne.
3. Dans la boîte de dialogue New String Value Resource (Nouvelle ressource de valeur de chaîne), définissez le champ Resource name (Nom de la ressource) sur name. Définissez le champ Valeur de la ressource sur votre propre nom. Cliquez sur OK. Notez que l'avertissement a disparu.
   
   
   
4. Ouvrez le fichier res/values/strings.xml et recherchez la ressource de chaîne nouvellement créée appelée name.

<string name="name">Aleks Haecky</string>

Étape 3 : Créez une ressource de dimension

Vous venez d'ajouter une ressource à l'aide de l'éditeur de ressources. Vous pouvez également extraire des ressources dans l'éditeur de code XML pour en créer d'autres :

1. Dans le fichier activity_main.xml, accédez à l'onglet Texte.
2. Sur la ligne textSize, cliquez sur le nombre (20sp), puis saisissez Alt+Enter (Option+Enter sur un Mac). Sélectionnez Extraire la ressource de dimension dans le menu pop-up.
3. Dans la boîte de dialogue Extract Resource (Extraire la ressource), saisissez text_size dans le champ Resource name (Nom de la ressource). Cliquez sur OK.
   
   
   
4. Ouvrez le fichier res/values/dimens.xml pour voir le code généré suivant :

<dimen name="text_size">20sp</dimen>

Remarque  : Si le fichier dimens.xml n'était pas déjà présent dans votre dossier res/values, Android Studio le crée.

5. Ouvrez le fichier MainActivity.kt et recherchez le code suivant à la fin de la fonction onCreate() :

setContentView(R.layout.activity_main)

La fonction setContentView() connecte le fichier de mise en page à Activity. Le fichier de ressources de mise en page spécifié est R.layout.activity_main :

• R est une référence à la ressource. Il s'agit d'une classe générée automatiquement avec des définitions pour toutes les ressources de votre application.
• layout.activity_main indique que la ressource est une mise en page nommée activity_main.

6. Exécutez votre application. Un TextView avec votre nom s'affiche.
   
   

Lorsque vous regardez l'écran de votre application, votre nom est collé en haut de l'écran. Vous allez donc ajouter une marge intérieure et une marge extérieure.

Marge intérieure et marge extérieure

La marge intérieure correspond à l'espace à l'intérieur des limites d'une vue ou d'un élément. Il s'agit de l'espace entre les bords de la vue et son contenu, comme illustré dans la figure ci-dessous.

La taille d'une vue inclut sa marge intérieure. Voici les attributs de marge intérieure les plus couramment utilisés :

• android:padding spécifie la marge intérieure pour les quatre bords de la vue.
• android:paddingTop spécifie la marge intérieure pour le bord supérieur.
• android:paddingBottom spécifie la marge intérieure pour le bord inférieur.
• android:paddingStart spécifie la marge intérieure du bord "de départ" de la vue.
• android:paddingEnd spécifie la marge intérieure pour le bord "de fin" de la vue.
• android:paddingLeft spécifie la marge intérieure pour le bord gauche.
• android:paddingRight spécifie la marge intérieure pour le bord droit.

La marge correspond à l'espace ajouté en dehors des bordures de la vue. Il s'agit de l'espace entre le bord de la vue et son parent, comme illustré dans la figure ci-dessus. Voici les attributs de marge les plus couramment utilisés :

• android:layout_margin spécifie une marge pour les quatre côtés de la vue.
• android:layout_marginBottom spécifie l'espace en dehors du bas de cette vue.
• android:layout_marginStart spécifie l'espace en dehors du côté "début" de cette vue.
• android:layout_marginEnd spécifie l'espace sur le côté de fin de cette vue.
• android:layout_marginLeft spécifie l'espace sur le côté gauche de cette vue.
• android:layout_marginRight spécifie l'espace à droite de cette vue.

Droite/gauche ou début/fin

"Droite" et "gauche" font toujours référence aux côtés droit et gauche de l'écran, que votre application utilise un flux de gauche à droite (LTR) ou de droite à gauche (RTL). "Début" et "Fin" font toujours référence au début et à la fin du flux :

• Pour un flux LTR, start = gauche et end=droite.
• Pour un flux RTL, start=right et end=left.

Si votre application cible le niveau d'API 17 (Android 4.2) ou une version ultérieure :

• Utilisez "start" et "end" au lieu de "left" et "right".
• Par exemple, android:layout_marginLeft doit devenir android:layout_marginStart pour prendre en charge les langues qui se lisent de droite à gauche.

Si vous souhaitez que votre application fonctionne avec des versions antérieures à Android 4.2, c'est-à-dire si le fichier targetSdkVersion ou minSdkVersion de l'application est défini sur 16 ou une valeur inférieure :

• Ajoutez "start" et "end" en plus de "left" et "right".
• Par exemple, utilisez à la fois android:paddingLeft et android:paddingStart.

Étape 1 : Ajoutez une marge intérieure

Pour créer un espace entre votre nom et le bord supérieur de la vue de texte name, ajoutez une marge intérieure supérieure.

1. Ouvrez le fichier activity_main.xml dans l'onglet Design (Conception).
2. Dans l'arborescence des composants ou dans l'éditeur de mise en page, cliquez sur la vue de texte pour ouvrir son volet Attributs.
3. En haut du volet Attributs, cliquez sur l'icône double flèche  pour afficher tous les attributs disponibles.
4. Recherchez Padding (Marge intérieure), développez-le, puis cliquez sur les trois points ... à côté de l'attribut top (haut). La boîte de dialogue Ressources s'affiche.
5. Dans la boîte de dialogue Ressources, sélectionnez Ajouter une ressource > Nouvelle valeur de dimension.
6. Dans la boîte de dialogue New Dimension Value Resource (Nouvelle ressource de valeur de dimension), créez une ressource dimen appelée small_padding avec une valeur de 8dp.
   
   L'abréviation dp signifie density-independent (indépendant de la densité). Si vous souhaitez qu'un élément d'UI ait la même taille sur des écrans de densités différentes, utilisez dp comme unité de mesure. Toutefois, lorsque vous spécifiez la taille du texte, utilisez toujours sp (pixels indépendants de l'échelle).
7. Cliquez sur OK.

Étape 2 : Ajoutez une marge

Pour éloigner la vue de texte name du bord de l'élément parent, ajoutez une marge supérieure.

1. Dans le volet Attributs, recherchez "margin" (marge) pour trouver Layout_Margin.
2. Développez Layout_Margin, puis cliquez sur les trois points ... à côté de l'attribut top.
3. Créez une ressource dimen appelée layout_margin et définissez-la sur 16dp. Cliquez sur OK.

Étape 3 : Ajoutez une police

Pour améliorer l'apparence de la vue de texte name, utilisez la police Android Roboto. Cette police fait partie de la bibliothèque d'assistance et vous l'ajoutez en tant que ressource.

1. Dans le volet Attributes (Attributs), recherchez "fontFamily".
2. Dans le champ fontFamily, cliquez sur la flèche du menu déroulant, faites défiler la liste jusqu'en bas, puis sélectionnez Autres polices.
3. Dans la boîte de dialogue Resources (Ressources), recherchez rob et sélectionnez Roboto. Dans la liste Aperçu, sélectionnez Normal.
4. Sélectionnez la case d'option Ajouter une police au projet.
5. Cliquez sur OK.
   
   

Le dossier res contient désormais un dossier font qui contient un fichier de police roboto.ttf. L'attribut @font/roboto est ajouté à votre TextView.

Étape 4 : Extraire le style

Un style est un ensemble d'attributs qui spécifient l'apparence et le format d'une vue. Un style peut inclure la couleur et la taille de la police, la couleur de l'arrière-plan, la marge intérieure, la marge extérieure et d'autres attributs courants.

Vous pouvez extraire la mise en forme de la vue de texte name dans un style et réutiliser ce style pour n'importe quel nombre de vues dans votre application. La réutilisation d'un style permet à votre application d'avoir une apparence cohérente lorsque vous avez plusieurs vues. L'utilisation de styles vous permet également de conserver ces attributs courants dans un seul emplacement.

1. Effectuez un clic droit sur TextView dans l'arborescence des composants, puis sélectionnez Refactor > Extract Style (Refactoriser > Extraire le style).
2. Dans la boîte de dialogue Extract Android Style (Extraire le style Android), décochez les cases layout_width, layout_height et textAlignment. Ces attributs sont généralement différents pour chaque vue. Vous ne souhaitez donc pas qu'ils fassent partie du style.
3. Dans le champ Nom du style, saisissez NameStyle.
4. Cliquez sur OK.
   
   
   
5. Un style est également une ressource. Il est donc enregistré dans le dossier res/values/ dans un fichier styles.xml. Ouvrez styles.xml et examinez le code généré pour le style NameStyle, qui devrait ressembler à ceci :

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. Ouvrez activity_main.xml et passez à l'onglet Text. Notez que le style généré est utilisé dans la vue de texte en tant que style="@style/NameStyle".
7. Exécutez l'application et notez les modifications apportées à la police et à la marge intérieure autour de votre TextView.

La plupart des applications Android réelles se composent d'une combinaison de vues permettant d'afficher des images et du texte, et d'accepter les saisies de l'utilisateur sous forme de texte ou d'événements de clic. Dans cette tâche, vous allez ajouter une vue pour afficher une image.

Un ImageView est une vue permettant d'afficher des ressources d'image. Par exemple, un ImageView peut afficher des ressources Bitmap telles que des fichiers PNG, JPG, GIF ou WebP, ou une ressource Drawable telle qu'un dessin vectoriel.

Android est fourni avec des ressources d'images, telles que des exemples d'icônes, d'avatars et d'arrière-plans. Vous allez ajouter l'une de ces ressources à votre application.

1. Affichez le fichier de mise en page dans l'onglet Conception, puis faites glisser une ImageView du volet Palette sous name_text dans l'arborescence des composants.  La boîte de dialogue Ressources s'ouvre.
2. Sélectionnez Drawable (Élément graphique) si ce n'est pas déjà fait.
3. Développez android, faites défiler l'écran, puis sélectionnez btn_star_big_on. Il s'agit de l'étoile jaune .
4. Cliquez sur OK.
   
   
   
   L'image de l'étoile est ajoutée à la mise en page sous votre nom. Comme vous avez un LinearLayout vertical, les vues que vous ajoutez sont alignées verticalement.
   
   
5. Passez à l'onglet Texte et examinez le code ImageView généré. La largeur est définie sur match_parent. La vue sera donc aussi large que son élément parent. La hauteur est définie sur wrap_content, de sorte que la vue sera aussi haute que son contenu. La valeur ImageView fait référence au drawable btn_star_big_on.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. Pour renommer le id de ImageView, effectuez un clic droit sur "@+id/imageView", puis sélectionnez Refactor > Rename (Refactoriser > Renommer).
7. Dans la boîte de dialogue Renommer, définissez id sur @+id/star_image. Cliquez sur Refactor (Refactoriser).
   
   
   

Conseil : Refactor > Rename (Refactoriser > Renommer) renomme toutes les occurrences d'un nom d'attribut ou de variable dans le projet de votre application.

8. Dans l'onglet Conception, dans l'arborescence des composants, cliquez sur l'icône d'avertissement  à côté de star_image. L'avertissement concerne un contentDescription manquant, que les lecteurs d'écran utilisent pour décrire les images à l'utilisateur.
9. Dans le volet Attributs, cliquez sur les trois points ... à côté de l'attribut contentDescription. La boîte de dialogue Ressources s'ouvre.
10. Dans la boîte de dialogue Ressources, sélectionnez Ajouter une ressource > Nouvelle valeur de chaîne. Définissez le champ Nom de la ressource sur yellow_star et le champ Valeur de la ressource sur Yellow star. Cliquez sur OK.
11. Utilisez le volet Attributs pour ajouter une marge supérieure de 16dp (soit @dimen/layout_margin) à yellow_star afin de séparer l'image en forme d'étoile du nom.
12. Exécutez votre application. Votre nom et l'image de l'étoile s'affichent dans l'UI de votre application.
    
    

Un ScrollView est un groupe de vues qui permet de faire défiler la hiérarchie des vues qu'il contient. Une vue de défilement ne peut contenir qu'une seule autre vue ou qu'un seul autre groupe de vues, en tant qu'enfant. La vue enfant est généralement un LinearLayout. Vous pouvez ajouter d'autres vues dans un LinearLayout.

L'image suivante montre un exemple de ScrollView contenant un LinearLayout qui contient plusieurs autres vues.

Dans cette tâche, vous allez ajouter un ScrollView qui permet à l'utilisateur de faire défiler une vue de texte affichant une brève biographie. Si vous ne faites défiler qu'une seule vue, vous pouvez la placer directement dans ScrollView, comme vous le faites dans cette tâche.

Étape 1 : Ajoutez une ScrollView contenant une TextView

1. Ouvrez le fichier activity_main.xml dans l'onglet Design (Conception).
2. Faites glisser une vue de défilement dans la mise en page, soit dans l'éditeur de conception, soit dans l'arborescence des composants. Placez la vue de défilement sous l'image de l'étoile.
3. Passez à l'onglet Texte pour inspecter le code généré.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

La hauteur et la largeur de ScrollView correspondent à celles de l'élément parent. Une fois que la vue de texte name_text et la vue d'image star_image ont utilisé suffisamment d'espace vertical pour afficher leur contenu, le système Android dispose la ScrollView pour remplir le reste de l'espace disponible sur l'écran.

4. Ajoutez un id au ScrollView et appelez-le bio_scroll. L'ajout d'un id au ScrollView donne au système Android un handle pour la vue, de sorte que lorsque l'utilisateur fait pivoter l'appareil, le système conserve la position de défilement.
5. Dans ScrollView, supprimez le code LinearLayout, car votre application n'aura qu'une seule vue défilable : TextView.
6. Faites glisser un TextView de la palette vers l'arborescence des composants. Placez TextView sous bio_scroll, en tant qu'élément enfant de bio_scroll.
   
   
7. Définissez l'id de la nouvelle vue de texte sur bio_text.
8. Vous allez ensuite ajouter un style pour la nouvelle vue de texte. Dans le volet Attributs, cliquez sur les trois points ... à côté de l'attribut style pour ouvrir la boîte de dialogue Ressources.
9. Dans la boîte de dialogue Ressources, recherchez NameStyle. Sélectionnez NameStyle dans la liste, puis cliquez sur OK. La vue de texte utilise désormais le style NameStyle que vous avez créé dans une tâche précédente.
   
   

Étape 2 : Ajoutez votre biographie à la nouvelle TextView

1. Ouvrez strings.xml, créez une ressource de chaîne nommée bio et saisissez un long texte sur vous ou sur ce que vous voulez.
   

Remarque :

• Utilisez \n pour indiquer un saut de ligne.
• Si vous utilisez une apostrophe, vous devez l'échapper avec une barre oblique inverse. Par exemple :
  "You mustn\'t forget the backslash."
• Pour mettre du texte en gras, utilisez <b>...</b>. Pour le mettre en italique, utilisez <i>...</i>. Par exemple :
  "This text is <b>bold</b> and this text is <i>italics</i>."

Voici un exemple de biographie :

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. Dans la vue de texte bio_text, définissez la valeur de l'attribut text sur la ressource de chaîne bio qui contient votre biographie.
3. Pour faciliter la lecture du texte bio_text, ajoutez de l'espace entre les lignes. Utilisez l'attribut lineSpacingMultiplier et attribuez-lui la valeur 1.2.
   
   
   
   Notez que dans l'éditeur de conception, le texte bio s'étend jusqu'aux bords latéraux de l'écran. Pour résoudre ce problème, vous pouvez ajouter des attributs de marge intérieure gauche, de début, de droite et de fin à la racine LinearLayout. Vous n'avez pas besoin d'ajouter de marge intérieure en bas, car le texte qui s'étend jusqu'en bas indique à l'utilisateur qu'il peut le faire défiler.
4. Ajoutez une marge intérieure de début et de fin de 16dp à la racine LinearLayout.
5. Passez à l'onglet Texte, extrayez la ressource de dimension et nommez-la layout_padding.
   
   

Remarque  : À partir du niveau d'API 17, utilisez "start" et "end" au lieu de "left" et "right" pour la marge intérieure et extérieure afin d'adapter votre application aux langues RTL (de droite à gauche) comme l'arabe.

6. Exécutez votre application et faites défiler le texte.
   
   

Félicitations !

Vous avez créé une application complète à partir de zéro, et elle est superbe !

Projet Android Studio : AboutMe

Remarque : Tous les défis de programmation sont facultatifs.

Dans ScrollView, ajoutez un ImageView au-dessus de TextView. Lorsque vous exécutez l'application, cette image, contrairement à l'étoile, disparaît de l'écran lorsque le texte défile vers le haut.

Conseil : La vue de défilement ne peut avoir qu'une seule vue enfant. Vous devez encapsuler les deux vues à faire défiler, ImageView et TextView, dans un LinearLayout.

• Un ViewGroup est une vue qui peut contenir d'autres vues. LinearLayout et ScrollView sont des groupes de vues.
• LinearLayout est un groupe de vues qui organise ses vues enfants horizontalement ou verticalement.
• Utilisez ScrollView lorsque vous devez afficher du contenu à l'écran, comme un long texte ou une collection d'images. Une vue de défilement ne peut contenir qu'une seule vue enfant. Si vous souhaitez faire défiler plusieurs vues, ajoutez un ViewGroup tel qu'un LinearLayout au ScrollView, et placez les vues à faire défiler à l'intérieur de ce ViewGroup.
• L'éditeur de mise en page est un éditeur de conception visuelle intégré à Android Studio. Vous pouvez utiliser l'éditeur de mise en page pour créer la mise en page de votre application en faisant glisser des éléments d'interface utilisateur dans la mise en page.
• Un style est un ensemble d'attributs qui spécifient l'apparence d'une vue. Par exemple, un style peut spécifier la couleur de la police, sa taille, la couleur de l'arrière-plan, la marge intérieure et la marge extérieure.
• Vous pouvez extraire et collecter toute la mise en forme d'une vue dans un style. Pour donner à votre application un aspect cohérent, réutilisez le style pour d'autres vues.

Cours Udacity :

• Développer des applications Android avec Kotlin

Documentation pour les développeurs Android :

• Mises en page
• ViewGroup
• View
• Mise en page linéaire
• ScrollView
• Assurer la compatibilité avec différentes densités de pixels (dp)
• Créer une UI avec l'éditeur de mise en page
• Documentation Android Studio
• Styles et thèmes

Cette section répertorie les devoirs possibles pour les élèves qui suivent cet atelier de programmation dans le cadre d'un cours animé par un enseignant. Il revient à l'enseignant d'effectuer les opérations suivantes :

• Attribuer des devoirs si nécessaire
• Indiquer aux élèves comment rendre leurs devoirs
• Noter les devoirs

Les enseignants peuvent utiliser ces suggestions autant qu'ils le souhaitent, et ne doivent pas hésiter à attribuer d'autres devoirs aux élèves s'ils le jugent nécessaire.

Si vous suivez cet atelier de programmation par vous-même, n'hésitez pas à utiliser ces devoirs pour tester vos connaissances.

Répondre aux questions suivantes

Question 1

Quel élément correspond à un groupe de vues ?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

Question 2

Parmi les hiérarchies de vues ci-dessous, laquelle n'est pas valide ?

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

Question 3

Les styles sont des ressources définies dans styles.xml. Les styles vous permettent de définir les couleurs, les polices, la taille du texte ainsi que beaucoup d'autres caractéristiques d'une vue. Vrai ou faux ?

▢ Vrai

▢ Faux

Question 4

Un ScrollView est un groupe de vues pouvant contenir un nombre indéfini de vues ou de groupes de vues en tant qu'enfants. Vrai ou faux ?

▢ Vrai

▢ Faux

Question 5

Quel élément d'UI peut être utilisé pour afficher des images dans votre application ?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

Passez à la leçon suivante : 2.2 : Ajouter des éléments interactifs

Pour obtenir des liens vers d'autres ateliers de programmation de ce cours, consultez la page de destination des ateliers de programmation Principes de base d'Android en Kotlin.