Android Kotlin Fundamentals 02.1: Mise en page linéaire à l'aide de l'éditeur de mise en page

Cet atelier de programmation fait partie du cours Android Kotlin Fundamentals. Vous tirerez le meilleur parti de ce cours si vous suivez les ateliers de programmation dans l'ordre. Tous les ateliers de programmation du cours sont répertoriés sur la page de destination des ateliers de programmation Android Kotlin Fundamentals.

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éez une application simple qui utilise LinearLayout et un TextView.

Points abordés

• Travaillez avec View et ViewGroup.
• Comment organiser les vues dans une Activity à l'aide de LinearLayout.
• Utiliser ScrollView pour afficher le contenu à faire défiler
• Modifier la visibilité d'un View
• 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 À propos de moi.
• Ajoutez un TextView à la mise en page pour afficher votre nom.
• Ajouter : ImageView.
• Ajoutez un ScrollView pour afficher du texte à faire défiler.

L'application À propos de vous vous permet de présenter des informations intéressantes sur vous ou de personnaliser l'application pour un ami, un membre de votre famille ou un animal de compagnie. Cette application affiche un nom, un bouton OK, une image étoile et du texte à faire défiler.

Dans cette tâche, vous allez créer le projet À propos d'Android Studio.

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 File > New > New Project (Fichier > Nouveau > Nouveau projet).
   
   
   
3. Si un projet n'est pas encore 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), sélectionnez le modèle Empty Activity (Activité vide) dans l'onglet Phone and Tablet (Téléphone et tablette). Cliquez sur Next (Suivant).
   
   
   
5. Dans la boîte de dialogue Create New Project (Créer un projet), définissez les paramètres suivants, puis cliquez sur Finish (Terminer).
   

Attribut	Valeur
Nom de l'application	À propos de moi
Nom de l'entreprise Android	com.android.example.AboutMe (ou votre propre domaine)
Enregistrer le lieu	Laissez l'emplacement par défaut ou remplacez-le par votre répertoire préféré.
Langue	Kotlin
Niveau d'API minimal	API 19: Android 4.4 (KitKat)
Ce projet accepte les applis instantanées	Laissez cette case décochée.
Utiliser les artefacts AndroidX	Cochez cette option.

La génération des fichiers du projet prend un certain temps.

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

Le modèle "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 comporte ConstraintLayout en tant que racine ViewGroup et son contenu TextView est unique.

Dans cette tâche, vous allez remplacer la racine ViewGroup générée par une LinearLayout. Vous devez également réorganiser les éléments de l'interface utilisateur verticalement.

Afficher les groupes

ViewGroup est une vue qui peut contenir des vues enfants, c'est-à-dire d'autres vues et groupes de vues. Les vues qui composent une mise en page sont organisées sous la forme d'une hiérarchie de vues, avec un groupe de vues en tant que racine.

Dans un groupe de vues LinearLayout, les éléments de l'interface utilisateur sont disposé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 graphique disponible dans Android Studio. Au lieu d'écrire le code XML manuellement pour créer la mise en page de votre application, vous pouvez utiliser l'éditeur de mise en page pour faire glisser les éléments de l'interface utilisateur dans l'éditeur de conception.

Pour afficher l'éditeur de mise en page, cliquez sur l'onglet Design (Conception). La capture d'écran ci-dessous présente les 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, sur le plan ou dans 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 la mise en page dans l'éditeur de conception et de modifier certains attributs de la mise en page. Par exemple, pour modifier l'affichage de votre mise en page dans l'éditeur de conception, utilisez le menu déroulant Sélectionner une surface de conception :

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

Palette : fournit une liste des vues et des groupes de vues que vous pouvez faire glisser dans votre mise en page ou dans l'arborescence de composants.

Attributs : affiche les attributs de la vue ou du groupe de vues sélectionné. Pour parcourir la liste complète des attributs ou des attributs couramment utilisés, cliquez sur l'icône en haut du volet.

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

Étape 1: Ajoutez un TextView

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

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

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

Attribut	Valeur
ID	name_text
text	Choisissez votre nom. (L'un des champs de type texte affiche une icône en forme de clé pour indiquer qu'il s'agit d'un espace de noms tools. Celle sans clé est destinée à l'espace de noms android, c'est-à-dire au champ text (texte).
textApparence > textSize	20sp
textApparence > textColor	@android:color/black
textApparence > textAlignment	Centre

Étape 2: Créez une chaîne

Dans l'arborescence des composants,, à côté de TextView,, vous verrez une icône d'avertissement . Pour afficher le texte de l'avertissement, cliquez sur l'icône ou placez le curseur dessus, comme illustré 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 pour votre nom. L'éditeur de ressources s'ouvre.
   
   
   
2. Dans la boîte de dialogue Resources (Ressources), sélectionnez Add new resource > New string Value (Ajouter une ressource > Nouvelle valeur de chaîne).
3. Dans la boîte de dialogue New String Value Resource (Nouvelle valeur de la chaîne), définissez le champ Resource name (Nom de la ressource) sur name. Attribuez un nom personnalisé au champ Valeur de la ressource. Cliquez sur OK. Notez que l'avertissement a disparu.
   
   
   
4. Ouvrez le fichier res/values/strings.xml et recherchez la ressource de chaîne name.

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

Étape 3: Créer 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 Text (Texte).
2. Sur la ligne textSize, cliquez sur le numéro (20sp) et saisissez Alt+Enter (Option+Enter sur un Mac). Sélectionnez Extraire la ressource de dimension dans le menu contextuel.
3. Dans la boîte de dialogue Extraire la ressource, saisissez text_size dans le champ 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 ne figurait pas déjà 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 à l'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. Une TextView s'affiche avec votre nom.
   
   

Lorsque vous regardez l'écran de votre application, votre nom est orienté vers le haut de l'écran. Ainsi, vous pouvez désormais ajouter une marge extérieure et une marge.

Marge intérieure et marge

L'option Remplissage désigne l'espace compris entre les limites d'une vue ou d'un élément. C'est l'espace entre les bords de la vue et le contenu de la vue, comme illustré dans la figure ci-dessous.

La marge intérieure d'une vue inclut sa marge intérieure. Voici les attributs de marge intérieure généralement utilisés:

• android:padding spécifie une marge extérieure pour les quatre bords de la vue.
• android:paddingTop définit la marge intérieure supérieure du bord supérieur.
• android:paddingBottom définit une marge intérieure inférieure.
• android:paddingStart définit une marge intérieure pour le début de la vue.
• android:paddingEnd définit une marge extérieure pour le bord de fin de la vue.
• android:paddingLeft définit une marge intérieure à gauche.
• android:paddingRight spécifie une marge intérieure à droite.

La marge est 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. Les attributs de marge suivants sont couramment utilisés:

• android:layout_margin spécifie une marge pour les quatre côtés de la vue.
• android:layout_marginBottom spécifie un espace en bas de cette vue.
• android:layout_marginStart spécifie un espace en dehors de ce point de départ.
• android:layout_marginEnd spécifie un espace à l'extrémité de cette vue.
• android:layout_marginLeft spécifie un espace à gauche de cette vue.
• android:layout_marginRight spécifie un espace à droite de cette vue.

Droite/Droite gauche/Début/Fin

"Droit" et "gauche" font toujours référence aux côtés droit et gauche de l'écran, que votre appli utilise un flux de gauche à droite ou de droite à gauche. « Start&quot » et « end » : font toujours référence au début et à la fin du parcours :

• Pour un flux LTR, démarrez = gauche et fin=droite.
• Pour un flux à droite, start=right et end=left.

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

• Utilisez "start" à la place de "right" et de "right".
• Par exemple, android:layout_marginLeft doit devenir android:layout_marginStart pour être compatible avec les langues qui se lisent de droite à gauche.

Si vous voulez que l'application fonctionne avec des versions antérieures à Android 4.2, c'est-à-dire si la version targetSdkVersion ou minSdkVersion de l'application est 16 ou antérieure:

• Ajouter des valeurs : début, fin et droite, gauche et droite.
• Par exemple, utilisez android:paddingLeft et android:paddingStart.

Étape 1: Ajouter une marge extérieure

Pour ajouter de l'espace entre votre nom et le bord supérieur de la vue Texte name, ajoutez une marge exté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 conception, cliquez sur la vue Texte pour ouvrir le volet Attributs correspondant.
3. En haut du volet Attributs, cliquez sur la flèche double flèche pour afficher tous les attributs disponibles.
4. Recherchez Remplissage, développez-le, puis cliquez sur les trois points ... à côté de l'attribut top. La boîte de dialogue Resources (Ressources) s'affiche.
5. Dans la boîte de dialogue Resources (Ressources), sélectionnez Add new resource > New dimen Value (Ajouter une ressource > Nouvelle valeur de réglage).
6. Dans la boîte de dialogue Nouvelle dimension de valeur, créez une ressource dimen appelée small_padding avec la valeur 8dp.
   
   L'abréviation dp signifie indépendance. Si vous souhaitez qu'un élément d'interface utilisateur ait la même taille sur des écrans de différentes densités, utilisez "dp" comme unité de mesure. Toutefois, lorsque vous spécifiez la taille du texte, utilisez toujours le préfixe sp (pixels évolutifs).
7. Cliquez sur OK.

Étape 2: Ajoutez une marge

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

1. Dans le volet Attributes (Attributs), recherchez "margin" pour trouver Layout_Margin.
2. Développez Layout_Margin (Configuration de la marge), puis cliquez sur les trois points (...) à côté de l'attribut top (haut).
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 du texte de name, utilisez la police Android Roboto. Elle fait partie de la bibliothèque Support. Vous l'ajoutez en tant que ressource.

1. Dans le volet Attributs, recherchez &fontt;fontFamily&quot.
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 Standard.
4. Sélectionnez la case d'option Add font to project (Ajouter une police au projet).
5. Cliquez sur OK.
   
   

Le dossier res contient désormais un dossier font contenant 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 de police, la taille de police, la couleur d'arrière-plan, la marge intérieure, la marge et d'autres attributs courants.

Vous pouvez extraire la mise en forme du texte name dans un style et le réutiliser pour un nombre illimité de vues. Vous pouvez réutiliser un style pour obtenir un rendu cohérent dans plusieurs applications. L'utilisation de styles vous permet également de conserver ces attributs communs à un emplacement unique.

1. Effectuez un clic droit sur le TextView dans l'arborescence des composants, puis sélectionnez Refactor > Extract Style (Refactoriser > Extraire le style).
2. Dans la boîte de dialogue Extraire un style Android, décochez les cases layout_width, layout_height et textAlignment. Ces attributs étant généralement différents pour chaque vue, vous ne souhaitez 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/ d'un fichier styles.xml. Ouvrez styles.xml et examinez le code généré pour le style NameStyle, qui ressemble à 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 (Texte). Notez que le style généré est utilisé dans la vue Texte en tant que style="@style/NameStyle".
7. Exécutez l'application et observez les modifications apportées à la police et au remplissage autour de votre TextView.

La plupart des applications Android réelles consistent en une combinaison de vues pour afficher les images et le texte, et accepter l'entrée utilisateur sous la forme de texte ou d'événements de clic. Dans cette tâche, vous allez ajouter une vue pour afficher une image.

Une ImageView est une vue permettant d'afficher des ressources d'images. Par exemple, un ImageView peut afficher des ressources Bitmap telles que les fichiers PNG, JPG, GIF ou WebP, ou afficher un document Drawable tel qu'un dessin vectoriel.

Des ressources illustrées pour Android sont disponibles, par exemple des icônes, des avatars et des arrière-plans. Vous allez ajouter l'une de ces ressources à votre application.

1. Affichez le fichier de mise en page dans l'onglet Design, puis faites glisser un élément ImageView du volet Palette vers le niveau name_text dans l'arborescence des composants. La boîte de dialogue Resources (Ressources) s'ouvre.
2. Sélectionnez Dessinable si ce n'est pas déjà fait.
3. Développez android, faites défiler l'écran, puis sélectionnez btn_star_big_on. C'est l'étoile jaune .
4. Cliquez sur OK.
   
   
   
   L'étoile s'affiche en dessous de la mise en page. Étant donné que vous avez un LinearLayout vertical, les vues que vous ajoutez sont alignées verticalement.
   
   
5. Accédez à l'onglet Text (Texte) et observez le code ImageView généré. La largeur étant définie sur match_parent, la vue sera aussi large que son élément parent. La hauteur étant définie sur wrap_content, la taille de la vue est aussi grande que son contenu. Le 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 id de ImageView, effectuez un clic droit sur "@+id/imageView", puis sélectionnez Refactor > Rename (Refactoriser &gt ; Renommer).
7. Dans la boîte de dialogue Renommer, définissez id sur @+id/star_image. Cliquez sur Refactoriser.
   
   
   

Conseil: Refactoriser &gt ; Renommer renomme toutes les occurrences d'un nom d'attribut ou de variable dans votre projet d'application.

8. Dans l'onglet Design (Conception), cliquez sur l'icône d'avertissement à côté de star_image dans l'arborescence des composants. L'avertissement concerne un élément 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 Resources (Ressources) s'ouvre.
10. Dans la boîte de dialogue Resources (Ressources), sélectionnez Add new resource > New string Value (Ajouter une ressource > Nouvelle valeur de chaîne). Définissez le champ Resource name (Nom de la ressource) sur yellow_star, puis le champ Resource value (Valeur de la ressource) sur Yellow star. Cliquez sur OK.
11. Utilisez le volet Attributs pour ajouter une marge supérieure de 16dp (@dimen/layout_margin), soit la séparation entre l'image et le nom yellow_star.
12. Exécutez votre application. Votre nom et l'image de suivi s'affichent dans l'interface utilisateur de votre application.
    
    

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

L'image suivante illustre un exemple de ScrollView contenant un LinearLayout contenant plusieurs autres vues.

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

Étape 1: Ajoutez un ViewView contenant un 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 en la faisant glisser dans l'éditeur de conception ou dans l'arborescence des composants. Placez la vue de défilement sous l'image de suivi.
3. Accédez à l'onglet Text (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 à l'élément parent. Une fois que la vue de texte name_text et la vue de l'image star_image ont utilisé assez d'espace vertical pour afficher leur contenu, le système Android dispose de ScrollView pour remplir le reste de l'espace disponible à l'écran.

4. Ajoutez un id au ScrollView, puis appelez-le bio_scroll. L'ajout d'une id au ScrollView fournit 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 le fichier ScrollView, supprimez le code LinearLayout, car votre application ne peut contenir qu'une vue à faire défiler (TextView).
6. Faites glisser un élément TextView de la palette vers l'arborescence des composants. Placez le TextView sous le bio_scroll, en tant qu'élément enfant de bio_scroll.
   
   
7. Définissez le paramètre id de la nouvelle vue textuelle sur bio_text.
8. Ajoutez ensuite un style pour la nouvelle vue Texte. Dans le volet Attributes (Attributs), cliquez sur l'icône à trois points ... à côté de l'attribut style (style) pour ouvrir la boîte de dialogue Resources (Ressources).
9. Dans la boîte de dialogue Resources (Ressources), recherchez NameStyle. Sélectionnez NameStyle dans la liste, puis cliquez sur OK. La vue Texte utilise maintenant le style NameStyle, que vous avez créé dans une tâche précédente.
   
   

Étape 2: Ajoutez votre biographie au nouvel TextView

1. Ouvrez strings.xml, créez une ressource de chaîne appelée bio, puis saisissez un long texte vous concernant ou consacré à ce que vous souhaitez.
   

Remarque :

• Utilisez \n pour indiquer un saut de ligne.
• Si vous utilisez une apostrophe, vous devez l'échapper par 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>. 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 Texte bio_text, définissez la valeur de l'attribut text sur la ressource de chaîne bio contenant votre biographie.
3. Pour faciliter la lecture du texte bio_text, ajoutez des espaces entre les lignes. Utilisez l'attribut lineSpacingMultiplier et attribuez-lui la valeur 1.2.
   
   
   
   Observez que l'éditeur de conception affiche le texte bio jusqu'aux bords de l'écran. Pour résoudre ce problème, vous pouvez ajouter des attributs de marge gauche, de début, de droite et de fin à la racine LinearLayout. Vous n'avez pas besoin d'ajouter de marge intérieure, car le texte qui s'affiche jusqu'au bas indique à l'utilisateur qu'il peut faire défiler l'écran.
4. Ajoutez la marge intérieure de début et de fin de 16dp à la racine LinearLayout.
5. Accédez à l'onglet Text (Texte), extrayez la ressource de dimension et nommez-la layout_padding.
   
   

Remarque: À partir du niveau d'API 17, utilisez &startt; and "end" au lieu de &nott;left" et "right" pour la marge intérieure et l'adaptation de votre application pour des langues qui se lisent 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 vous êtes satisfait !

Projet Android Studio : AboutMe (À propos de moi)

Remarque:Toutes les questions d'authentification à la programmation sont facultatives.

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

Astuce : La vue défilante ne peut avoir qu'une seule vue enfant. Vous devez encapsuler les deux vues déroulantes, ImageView et TextView, dans un LinearLayout.

• ViewGroup est une vue pouvant contenir d'autres vues. LinearLayout et ScrollView sont des groupes de vue.
• LinearLayout est un groupe de vues qui organise ses vues enfants horizontalement ou verticalement.
• Utilisez une ScrollView lorsque vous devez afficher du contenu à l'écran, comme du texte long 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'une LinearLayout à la ScrollView, puis placez les vues à faire défiler dans cette ViewGroup.
• L'éditeur de mise en page est un éditeur de conception visuelle dans Android Studio. L'éditeur de mise en page vous permet de créer la mise en page de votre application en faisant glisser des éléments de l'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, la taille de la police, la couleur de l'arrière-plan, la marge intérieure et la marge.
• Vous pouvez extraire et collecter toute la mise en forme d'une vue dans un style. Pour donner un style cohérent à votre application, réutilisez le style pour d'autres vues.

Cours Udacity:

• Développer des applications Android avec Kotlin

Documentation pour les développeurs Android:

• Dispositions
• ViewGroup
• View
• Mise en page linéaire
• ScrollView
• Compatibilité avec différentes densités de pixels (dp)
• Créer une interface utilisateur 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 effectuent cet atelier de programmation dans le cadre d'un cours animé par un enseignant. C'est à l'enseignant de procéder comme suit:

• Si nécessaire, rendez-les.
• Communiquez aux élèves comment rendre leurs devoirs.
• Notez les devoirs.

Les enseignants peuvent utiliser ces suggestions autant qu'ils le souhaitent, et ils n'ont pas besoin d'attribuer les devoirs de leur choix.

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

Répondez à ces questions.

Question 1

Parmi les propositions suivantes, laquelle est un groupe de vues ?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

Question 2

Parmi les hiérarchies de vues suivantes, 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 et de nombreuses autres caractéristiques d'une vue. Vrai ou faux ?

▢ Vrai

▢ Faux

Question 4

Un ScrollView est un groupe de vues qui peut contenir un nombre illimité de vues ou de groupes de vues en tant qu'enfants. Vrai ou faux ?

▢ Vrai

▢ Faux

Question 5

Quel élément d'interface utilisateur permet d'afficher des images dans votre application ?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

Démarrez la leçon suivante : 2.2: Ajouter de l'interactivité aux utilisateurs.

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