Faculté des sciences Agadir

PROGRAMMATION MOBILE
Centre d'excellence
AUTOMNE 2023
Filière ADIA

Programmaton Android : Laboratoire 1

Les premiers pas

Objectfs d’apprentssage
• Avoir un premier contact avec la programmaton mobile sous Android
• Réaliser une première applicaton avec Android Studio
• Comprendre l’arborescence d’un projet Android
• Comprendre l’environnement d’exécuton
• Comprendre la noton d’agencement des composants (Layout)
• Comprendre les diférentes façons de créer un composant de base (XML,
Programmaton, Graphique)
• Utliser les composants à l’aide de leur identfant
• Interacton avec l’applicaton

1. Créaton d’une première applicaton

Créez l'applicaton laboratoire 1
 À la première ouverture d’Android Studio, choisissez start a new Android Studio Project
dans l’écran de bienvenue

Page 1 sur 33
 Choisissez le modèle(template) Empty Views Actvity et cliquez sur Next. Une actvité
sera créée avec votre applicaton. Une actvité est une des composantes de base
d'Android qui vous permet de créer vos interfaces applicatves.

 Remplir les champs Applicaton Name et package name selon le modèle suivant :

Page 2 sur 33
 Important : le nom de l’applicaton doit commencer par une majuscule. C’est ce nom
qui apparaîtra pour l’utlisateur.

o package Name (ca.qc.cgodin.laboratoire1) est généré automatquement. Noter

laboratoire1 commence par une minuscule et ne content pas d’espace (règles
des noms des packages dans Kotlin). Ce nom de package doit être unique.
Modifez le nom pour ca.qc.cgodin.laboratoire1 comme indiqué ci-dessus si ce
n'est pas le cas.

o Project Locaton : Choisissez votre emplacement de travail pour héberger votre

projet

 Cliquez sur Finish.

Android Studio va créer un répertoire avec un ensemble de fchiers pour le projet en

utlisant Gradle. Ça peut prendre un pett bout.

Explorer Android Studio

 Si l'onglet Projet n'est pas déjà sélectonné, sélectonnez-le.

 L'onglet Projet se trouve dans le panneau vertcal à gauche de votre fenêtre dans
Android Studio.

 Cliquez sur l'onglet actvity_main.xml pour voir le fchier

 Cliquez ensuite sur l'onglet Design, si ce n'est pas déjà sélectonné, qui se trouve
complètement à droite.

 Cliquez sur l'onglet MainActvity.kt pour l'afcher dans l'éditeur.

 Pour afcher le projet comme une hiérarchie de projet Android standard,

sélectonnez Android dans le menu déroulant en haut du volet Projet si ce n'est pas déjà
fait (Android est supposé être la valeur par défaut.) Vous pouvez afcher les fchiers de
projet de diférentes façons, y compris l’afchage des fchiers comme ils apparaissent
dans la hiérarchie du système de fchiers. Cependant, le projet est plus facile à travailler
avec l’utlisaton de la vue Android.

Page 3 sur 33
 

Explorer le dossier de l'applicaton

 Dans le volet Projet > Android, développez le dossier app de l’applicaton. À l’intérieur du
dossier se trouvent trois ou quatre sous-dossiers :

Page 4 sur 33
 manifests, java, res et dans certains cas generatedJava qui content des fchiers générés
par Android Studio à la constructon de l'applicaton. Tout le code de votre applicaton se
trouve dans le répertoire java. Les ressources de votre applicaton se trouvent dans le
répertoire res.

 Développez le dossier java, puis développez le dossier ca.qc.cgodin.laboratoire1 pour

afcher le fchier Kotlin MainActvity.

Le dossier java content tout le code Kotlin principal d’une applicaton Android.

Il existe des raisons historiques pour lesquelles votre code Kotlin apparaît dans le dossier
java. Cete conventon permet à Kotlin d’interagir en toute transparence avec le code
écrit dans le langage de programmaton Java, même dans le même projet et applicaton.
Les fchiers de classe de votre applicaton sont contenus dans trois sous-dossiers, comme
le montre la fgure ci-dessus. Le dossier ca.qc.cgodin.laboratoire1 content présentement
le fchier MainActvity.kt qui est dans ce cas la porte d'entrée de votre applicaton. Les
deux autres sous-dossiers sont utlisés à des fns de test.

Explorer le dossier res

 Dans le volet Project>Android, développez le dossier res contenant les ressources de

l'applicaton.

Page 5 sur 33
Les ressources d'une applicaton Android sont du contenu statque. Elles incluent des
images, du texte, des styles, etc. Les applicatons Android séparent le plus que possible le
code des ressources. Cela permet de trouver assez facilement les textes ou icones utlisés
dans l'interface utlisateur. En outre, lorsque vous modifez l’un de ces fchiers de
ressources, la modifcaton prend efet partout où le fchier est utlisé dans l’applicaton.

 Dans le dossier res, développez le dossier layout pour afcher le

fchieractvity_main.xml. Vous devriez avoir un écran semblable à celui-ci ou du code
XML. Une actvité est en général associée à un fchier de layout, défni comme un
fchier XML dans le répertoire res/layout.

Remarque : si vous avez une erreur de rendu :

Rendering problems : missing styles....

o Cliquer sur rebuild si ce choix vous est ofert.

o Sinon, utlliser le menu Fichier/Invalidate caches/restart

Les fchiers ressources sont classés dans des sous-dossiers selon leur type dont voici
quelques sous-dossiers :

o mipmap-*dpi: content les images au format png, gif, jpeg et bmp.

Page 6 sur 33
 o layout : descriptons d’interfaces graphiques défnies dans des fchiers au format
xml. Noter la présence du fchier actvity_main.xml pour notre première
applicaton.

o values : valeurs de diférents types simples (exemple : chaines de caractères,

enters,...) contenus dans des fchiers xml. Chacune des valeurs est accessible via
un identfant unique.

Explorer le répertoire manifests et le fchier AndroidManifest.xml

1. Le dossier manifests content des fchiers fournissant des informatons essentelles à

propos de votre applicaton.

2. Développez le dossier manifests et double-cliquez sur AndroidManifest.xml pour l’ouvrir.

Le fchier AndroidManifest.xml content des détails dont a besoin le système Android pour
exécuter votre applicaton, y compris les actvités qui font parte de l’applicaton. Toute
composante de base Android telle qu'une Actvité, u n Service, u n Content provider, un
Broadcast Receiver doit être déclaré dans le fchier AndroidManifest.xml.

2. Notez que MainActvity est référencé dans l'élément <actvity>. Toute actvité (et plus
tard les Services, les Fournisseurs de Contenus (Content Provider), les récepteurs
d'événements (Broadcast Receivers)) faisant parte de votre applicaton doit être
déclarée dans le fchier manifest.

Voici un exemple de fchier manifest.

Page 7 sur 33
 3. Notez l'élément <intent-flter> dans <actvity>. Les éléments <acton> et <category>
indiquent à Android où commencer l'applicaton quand l'utlisateur clique sur l'icône de
démarrage.

Le manifeste est l'endroit où vous aurez à défnir les permissions de votre applicaton
telles qu'accéder aux contacts de votre téléphone, à la caméra, etc.

Explorer le répertoire app/build.gradle

 Android Studio utlise Gradle pour compiler l’applicaton. Gradle permet d'utliser
facilement des librairies externes.

 Un fchier build.gradle est généré pour chaque module d’un projet Android.

 Un fchier build.gradle est aussi généré pour le projet au complet (le module
d’applicaton app). C’est ce fchier qui nous intéresse. Ce fchier content les
dépendances et les paramètres de confguraton de l’applicaton (compiledSdkVersion,
applicatgionId, minSdkVersion, targetSdkVersion). Vous aurez assez souvent à le
modifer.

Page 8 sur 33
  Ouvrez le fchier build.gradle(Project: Laboratoire1).

Vous allez trouvez les confguratons pour le projet au complet, pour tous les modules.
Une variable déclarée dans ce fchier comme kotlin_version par exemple peut être utlisé
dans un fchier build.gradle de n'importe quel module du projet. Vous aurez rarement à
modifer ce fchier. Le bloc buildScript de ce fchier vous permet de défnir les
dépendances et les référentels (repositories) communs à tous les modules.

 Ouvrez le fchier build.gradle (Module:app).

Chaque module dans un projet Android Studio doit contenir un fchier build.gradle qui
permet de faire des confguraton propres à ce module. Vous aurez souvent à manipuler
ce fchier pour ajouter des dépendances à vos projets.

2. Accès aux ressources

Votre projet content des répertoires contenant des fchiers auto-générés. Il est mis à
jour automatquement quand on ajoute ou supprime des ressources au projet
(exemple : ajout d’un composant graphique). Il ne faut jamais modifer ces fchiers.

Accès aux ressources d'un projet

Les diférentes ressources de votre projet se trouvent dans le répertoire res (mis pour
ressources). Vous pouvez accéder à ces fchiers soit à partr d'un fchier Java/Kotlin, soit
à partr d'un fchier XML.

Accès aux ressources à partr d'un fchier Java ou kotlin

Page 9 sur 33
 [package].R.type.nom

type est le nom du sous-dossier du dossier res contenant la ressource.

nom est le nom du fchier dépourvu de son extension.

Exemples : R.layout.actvity_main (Voir fchier MainActvity.java ou MainActvity.kt)

R.mipmap.icon

Cete syntaxe fonctonne pour toutes les ressources à l’excepton de celles du dossier
res/values. Dans ce cas, le type de la ressource est le nom de la balise défnissant la
ressource et le nom de la ressource est le nom spécifé par l’atribut name de la balise
de la ressource.

Exemples : R.string.message

R.color.bleu

 Accès à partr d'un fchier xml

@[package]type/nom

Exemples : @mimmap/icon

@layout/actvity_main

@string/message

@color/bleu

3. Exécuton de l’applicaton

 Dans un environnement simulé

Le SDK propose un émulateur Android Virtual Device (AVD), permetant de tester les
applicatons en local pour diférents types de périphériques.

Dans Android Studio, sélectonnez Tools->Android->AVD manager, ou cliquez sur le

bouton AVD Manager dans la barre d'outls. Créez un téléphone virtuel (AVD Name:

Page 10 sur 33
 Pixel 4XL) avec les optons suivantes: Release Name(R), API Level (30), ABI (x86), Target
(Android 11.0). Télécharger l'image au besoin. Laissez les optons par défaut au prochain
écran et cliquez sur Finish pour créer votre pour créer votre téléphone virtuel.

Suivez la même approche pour créer une tablete virtuelle (AVD Name: Tablet Pixel C)

 Directement sur un téléphone ou une tablete

Dans ce cas, il faut connecter l’appareil intelligent à l’ordinateur via un câble USB. Il faut
s’assurer que le pilote adéquat a été installé auparavant. Dans Paramètres/Optons de
développement de votre tablete, vérifer que débogage USB est coché. Sinon dans
Paramètres->À propos du téléphone (de la tablete)->Informatons sur le logiciel,
appuyez 7 fois sur Numéro de version.

 Exécuter l’applicaton sur votre émulateur (Tablete et téléphone)

Cliquez sur Run->Run App ou cliquez sur le bouton Run dans la barre d'outls pour
exécuter l'applicaton. Sélectonnez le téléphone dans un premier temps et ensuite la
tablete dans la barre d'outls pour exécuter votre applicaton sur les deux périphériques.

Créer le fchier style dans le repertoire values

Page 11 sur 33
 o Les résultats des exécutons devraient ressembler à ceci :

4. Modifcaton de l’applicaton
- Dans le dossier ressource (res), double-cliquez sur actvity _main.xml qui se trouve dans
le sous-dossier layout. Noter la présence des trois onglets (Code, Split et Design).
Vérifer que c’est l’onglet Design qui est actvé.

- Notez la présence de l’arborescence des composants (Component tree) qui se trouvent

dans l'éditeur de layout.

- Dans le panneau Component Tree, sélectonnez ConstraintLayout puis textView pour

distnguer les deux composants. Observez la diférence dans l'interface graphique.
Quand vous sélectonnez le textView, vous allez voir apparaitre diférentes contraintes
afchées en bleu qui lient ce dernier à la composante parent. Vous allez voir aussi les
diférentes propriétés de chacune de ces composantes dans le panneau Atributes.

- Utlisez le panneau Atributes pour metre la valeur de id à tvBienvenue (pour identfer

la zone de texte)

- Metez aussi la valeur de TextSize à 24sp.

Page 12 sur 33
- Metez la couleur(textColor) du texte à rouge(red). Défnissez la couleur rouge dans le
fchier values/colors.xml en lui ajoutant la ligne suivante avant la fermeture de la balise
</resources> queston

<color name="red">#FF0000</color>
Noter les changements dans l’interface graphique (onglet Design) et dans l'éditeur de
code actvity_main.xml (onglet Code).

- Remarquer que la propriété text a pour valeur Hello World

Note : Ce n’est pas une bonne pratque de placer directement une chaine dans ce
fchier. Pour corriger ce problème, nous allons placer la chaine dans le fchier strings.xml
et y faire référence.

- Remplacer android:text="Hello World" par android :text="@string/welcome_msg"

Pour que cete valeur soit efectve pour l'atribut android:text, il faut donc ajouter la
variable welcome_msg dans le fchier strings.xml.

Dans le dossier res/values, double-cliquez sur strings.xml et ajoutez la ligne suivante

avant la fermeture de la balise </ressources>:

<string name="welcome_msg">Bienvenue au cours 420-P5C!</string>

- Relancez l'applicaton et notez les changements dans l'interface graphique.

Page 13 sur 33
5. Ajout d’une zone de texte (TextView) avec des images en utlisant XML
Ouvrez le fchier actvity_main.xml et cliquez sur l'onglet Code pour voir le code XML. Notez
que le Layout créé par défaut par Android Studio est un ConstraintLayout. Les composants y
sont disposés les uns par rapport aux autres.

Vous devez ici ajouter les contraintes manuellement, d'où la nécessité de metre le bouton
Enable Autoconnecton to parent à of. Localisez le bouton dans la barre d'outls.

- Utlisez la barre d'outls pour metre la marge par défaut à 16dp. (La valeur par défaut
étant de 0dp.)

Page 14 sur 33
 Lorsque vous metez la marge par défaut à 16dp, les futures contraintes que vous rajouterez
plus tard seront créés avec cete marge. Vous n'aurez donc pas besoin d'ajouter la marge à
chaque fois que vous ajoutez une contrainte.

- Cliquez sur le textView en mode Design et observez l'inspecteur de vue suivant dans le
volet Atributes.

L'inspecteur de vue comprend des commandes pour les atributs de mise en page tels que
les contraintes, les types de contraintes, le biais de contrainte et les marges de vue. Cet
inspecteur n'est disponible que pour les vues compris dans un ConstraintLayout.

- Biais de contrainte (Constraint bias)

Le biais de contrainte (Constraint bias) positonne l'élément de vue le long des axes
horizontal et vertcal. Par défaut, la vue est centrée entre les deux contraintes avec un biais
de 50 %.

Pour ajuster le biais, vous pouvez faire glisser les curseurs de biais dans
l'inspecteur de vue. Faire glisser un curseur de biais modife la positon de la vue le long de
l'axe.
- Ajoutez des marges au textView
Notez que dans l'inspecteur de vue, les marges gauche, droite, supérieure et inférieure de la
vue texte sont 0. La marge par défaut n'a pas été ajoutée automatquement, car cete vue a
été créée avant que vous ne modifiez la marge par défaut.
Pour les marges gauche, droite et supérieure, sélectonnez 16dp dans le menu déroulant de
l'inspecteur de vue. Par exemple, dans la capture d'écran suivante, vous
ajoutez layout_marginTop, layout_marginStart layout_marginEnd.
- Ajouter des contraintes et des marges au textView

Dans l'inspecteur de vue, les fèches à l'intérieur du carré représentent le type de

contrainte :

 Wrap-Content : la vue s'étend uniquement autant que nécessaire pour contenir son
contenu.

Page 15 sur 33
• Fixed : vous pouvez spécifer une dimension comme marge de vue dans la zone de
texte à côté des fèches de contrainte fxe.

• Match Constraints : la vue s'agrandit autant que possible pour répondre aux
contraintes de chaque côté, après avoir pris en compte les propres marges de la
vue. Cete contrainte est très fexible, car elle permet à la mise en page de s'adapter aux
diférentes tailles et orientatons d'écran. En laissant la vue correspondre aux
contraintes, vous avez besoin de moins de mises en page pour l'applicaton que vous
créez.

1. Dans l'inspecteur de vue, remplacez les contraintes de gauche et de droite par Match

Constraints . (Cliquez sur la fèche pour basculer entre les types de contraintes.)

2. Dans l'inspecteur de la vue, cliquez sur le point Delete Botom Constraint dans le
carré pour supprimer la contrainte.
3. Passez à l'onglet Code. Extrayez la dimension correspondant au layout_marginStart
dans la ressource auquel vous donnez le nom margin_wide (Faites pointer la souris sur
la valeur 16dp, une ampoule jaune apparait. Cliquez sur l'ampoule et sélectonnez
Extract dimension resource.) queston

Faites la même approche pour la marge supérieure (top) et la marge de droite (end).

Dans le code XML, vous devez avoir ceci:

android:layout_marginStart="@dimen/margin_wide"
android:layout_marginTop="@dimen/margin_wide"
android:layout_marginEnd="@dimen/margin_wide"

- Ajouter du style au TextView

Page 16 sur 33
Ajouter un font au TextView

Dans le panneau Atributes, faites une recherche sur fontFamily et sélectonnez la liste

déroulante à côté. Faites défler jusqu'à More Fonts… et sélectonnez-le. Dans la

boite de dialogue Ressources qui s'ouvre, recherchez roboto. Cliquez sur Roboto et
sélectonnez Regular dans la liste Preview, sélectonnez le bouton radio Add font to
project.

Cliquez sur OK.

Un dossier res/font contenant un fchier roboto.t sera ajouté au projet et l'atribut

@font/roboto sera appliquée au textView.

Ajout de style au textView

Ouvrez le fchier res/values/dimens.xml et ajoutez la ligne suivante défnissant une taille

de police de 24sp.
<dimen name="box_text_size">24sp</dimen>
Ouvrez le fchier res/values/styles.xml et ajoutez le style suivant que vous aurez à
utliser dans le textView.

<style name="whiteBox">
<item name="android:background">@android:color/holo_blue_dark</item>
<item name="android:textAlignment">center</item>
<item name="android:textSize">@dimen/box_text_size</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@android:color/white</item>

Page 17 sur 33
 <item name="android:fontFamily">@font/roboto</item>
</style>
Dans ce style, la couleur d'arrière-plan(android:background) et la couleur du texte
(android:textColor) sont défnies sur les ressources de couleur par défaut fournies par
Android. La police(android:fontFamily) est défnie sur Roboto. Le texte est centré et en
gras, et la taille du texte est box_text_size (24sp).

- Ajoutez le texte du textView dans strings.xml

- Recherchez l'atribut text dans le panneau Atributes. (Choisissez celui-là sans icone de
clé)

Cliquez sur la pette barre latérale complètement à droite de l'atribut text pour ouvrir la
boite de dialogue Resources.

Cliquez sur le bouton "+" > "String value". Ajoutez la chaine de caractère "Cégep Gérald
Godin" avec comme nom de ressource txt_cgodin. Cliquez sur OK.

Donnez l'id tvCGodin au textView.

Dans la fenêtre Atributes, changez la valeur de l'atribut style à @style/whiteBox.

queston

Pour netoyer le code, supprimez la valeur android:fontFamily="@font/roboto" dans le

champ text.

Metez vous en mode design. Dans la barre d'outls, cliquez sur le bouton "Device for
Preview", vous devez voir une liste de périphériques parmi lesquels le périphérique
Pixel qui est utlisé par défaut.

Sélectonnez diférents dans la liste et observez l'adaptaton du texview aux diférentes

confguratons d'écran.

Exécutez votre applicaton. Vous devez voir une fenêtre similaire à celle-ci.

Page 18 sur 33
- Ajout d'un deuxième textView à notre interface

Ouvrez le fchier actvity_main.xml en mode Design

Faites glisser un TextView du panneau Palete sous le premier textView

Cliquez sur le nouveau textView, puis maintenez le pointeur le point supérieur situé au
centre comme indiqué ci-dessous. On appelle ce point une poignée de contrainte. Vous
allez utliser ce point pour créer une contrainte reliant la parte supérieure du nouveau
textView au bas de l'ancien textVeiw.

Cliquez sur la poignée de contrainte supérieure du nouveau textView et faites-la glisser

vers le haut. Vous devez voir apparaitre une ligne de contrainte. Connectez la ligne de
contrainte à la poignée de contrainte inférieure du premier textView. Remarquez que la
poignée de contrainte supérieure du nouveau textView se remplisse automatquement
une fois la contrainte établie. Modifez la marge supérieure à 16dp si ce n'est pas déjà
fait.

Page 19 sur 33
Créez maintenant une contrainte de gauche:

Cliquez sur la poignée de contrainte sur le côté gauche du nouveau textView.

Faites glisser la ligne de contrainte complètement vers le côté gauche de votre interface.

Vous pourriez aussi créer les contraintes en cliquant sur les icônes dans l'inspecteur
de vue comme indiqué ci-dessous. Lorsque vous créez une contrainte de cete façon, la
contrainte est atachée au parent ou à une vus plus proche.

Ajoutez la ligne suivante au fchier strings.xml où votre_nom correspond à votre nom.

<string name="votre_nom">Gérald Godin</string>
Modifez les atributs du nouveau texView comme suit:

Atribut Valeur
id tvName
layout_height 130dp
layout_width 130dp
style @style/whiteBox
text @string/votre_nom
Important : lors du développement d'applicatons du monde réel, utlisez des
contraintes fexibles pour la hauteur et la largeur de vos éléments d'interface utlisateur,
dans la mesure du possible. Par exemple,
utlisez match_constraintou wrap_content. Plus vous avez d'éléments d'interface
utlisateur de taille fxe dans votre applicaton, moins votre mise en page est adaptatve
pour diférentes confguratons d'écran.

Exécutez votre applicaton. Vous devez avoir une fenêtre similaire à la capture suivante:

Page 20 sur 33
- Créaton d'une chaine de 3 textViews

Vous allez maintenant ajouter une chaine de 3 textViews à coté du deuxième textView
disposés de façon vertcale l'un après l'autre. Les textViews feront parte d'une chaine.

Chaine: Défniton

Une chaine est un groupe de vues liées les unes aux autres par des contraintes
bidirectonnelles. Les vues au sein d'une chaine peuvent être répartes vertcalement ou
horizontalement. Par exemple, le diagramme suivant montre deux vues contraintes
l'une à l'autre, ce qui créée une chaine horizontale.

Tête de chaine

La première vue d'une chaîne s'appelle la tête de la chaîne. Les atributs défnis sur la
tête de la chaîne contrôlent, positonnent et distribuent toutes les vues de la
chaîne. Pour les chaînes horizontales, la tête est la vue la plus à gauche. Pour les chaînes

Page 21 sur 33
vertcales, la tête est la vue la plus haute. Dans chacun des deux diagrammes ci-dessous,
"A" est la tête de la chaîne.

Style de chaine

Les styles de chaîne défnissent la manière dont les vues chaînées sont répartes et
alignées. Vous stylisez une chaîne en atribuant un atribut de style à cete chaîne, en
ajoutant un poids ou en défnissant un biais sur les vues.

Il existe trois styles de chaînes :

• Spread : Il s'agit du style par défaut. Les vues sont répartes uniformément dans
l'espace disponible, une fois les marges prises en compte.

• Spread inside : la première et la dernière vue sont atachées au parent à chaque

extrémité de la chaîne. Les autres vues sont répartes uniformément dans
l'espace disponible.

• Packed : les vues sont regroupées ensemble, après applicaton des

marges. Vous pouvez ensuite ajuster la positon de toute la chaîne en modifant
le de la tête de la chaîne.

Page 22 sur 33
 Packed chain

Chaines de Vues regroupées avec biais

• Weighed (Pondéré) : les vues sont redimensionnées pour remplir tout l'espace,
en foncton des valeurs défnies dans les atributs
layout_constraintHorizontal_weight ou layout_constraintVertcal_weight. Par
exemple, imaginez une chaîne contenant trois vues, A, B et C. La vue A utlise un
poids de 1. Les vues B et C utlisent chacune un poids de 2. L'espace occupé par
les vues B et C est le double de celui de la vue A , comme indiqué ci-dessous.

Pour ajouter du style à une chaîne, atribuez une valeur à l'atribut

layout_constraintHorizontal_chainStyle/layout_constraintVertcal_chainStyle de la tête
de la chaîne. Vous pouvez ajouter des styles de chaîne dans l'éditeur de Layout. Vous
pouvez en faire de même dans le fchier XML. Par exemple:

// Horizontal spread chain

app:layout_constraintHorizontal_chainStyle="spread"

// Vertcal spread inside chain

app:layout_constraintVertcal_chainStyle="spread_inside"

// Horizontal packed chain

app:layout_constraintHorizontal_chainStyle="packed"

Ajout des 3 vues et créaton de la chaine vertcale

Ouvrez le fchier actvity_main.xml en mode Design. Faites glisser 3 TextView à partr du

panneau Palete à la droite du deuxième textView comme suit.

Page 23 sur 33
Ajoutez les chaines suivantes au fchier strings.xml.

<string name="txt_cours1">Android</string>
<string name="txt_cours2">ASP.Net</string>
<string name="txt_cours3">PHP</string>
Modifez les atributs des trois textView suivant ce tableau:

Atributs textView3(Android) textView4(ASP.net) textView5(PHP)

id tvCours1 tvCours2 tvCour3
text @string/txt_cours1 @string/txt_cours2 @string/txt_cours3
style @style/whiteBox @style/whiteBox @style/whiteBox

Vous devez voir présentement des erreurs de contraintes que vous aurez à corriger un
peu plus tard.

Créez maintenant une chaine avec les 3 textViews et contraignez la chaine à la hauteur
du deuxième textView.

Sélectonnez ensemble les trois nouveaux textViews. Faites ensuite un clic droit,
sélectonnez Chains > Create Vertcal Chain. Une chaine vertcale sera créée
automatquement s'étendant du textView1 au pied de page.

Page 24 sur 33
Ajoutez une contrainte s'étendant du haut du textView3 au sommet du texView2. La
contrainte supérieure existante sera automatquement remplacée par la nouvelle
contrainte. Vous n'avez pas à supprimer cete contrainte de façon explicite.

Ajoutez une contrainte du bas du textView5 au bas du textView2.

Observer que les 3 textViews sont maintenant limités en haut et en bas par rapport au
textView2.

Ajout de contraintes gauche et droite

Contraignez le côté gauche du textView3 au coté droit du textView2. Faites-en de même

pour textView4 et textView5.

Contraignez le côté droit des trois derniers textViews au côté droit de l'interface.

Modifez la valeur de l'atribut layout_width des trois derniers textViews à 0dp, ce qui
équivaut à Math Constraints.

Ajout de marge

Utlisez le panneau Atributes pour modifer les marges des 3 derniers textViews comme
suit. Utlisez la valeur @dimen/margin_wide pour ces marges.

textView3: début et fn (start et end). Supprimer les autres marges.

textView4: début et fn, haut et bas (start et end, top et botom). Supprimer les autres
marges.

textView5: début et fn (start et end). Supprimer les autres marges.

Pour voir maintenant comment les textViews s'adaptent aux changements de

confguraton de votre périphérique, modifez l'orientaton de l'aperçu. Pour ce faire,

Page 25 sur 33
cliquez sur l'icône Orientaton for Preview (O) dans la barre d'outls et sélectonnez
Landscape (Paysage).

Exécutez l'applicaton sur un émulateur de tablete et un émulateur de téléphone. Vous

devriez voir les 5 textViews afchés comme sur les captures ci-dessous.

Ajouter des gestonnaires d'événements aux textViews

Dans cete parte, vous allez modifer l'applicaton pour la rendre un peu plus
dynamique et coloréDans cete parte, vous allez modifer l'applicaton pour la rendre un
peu plus dynamique et coloré

<item
Ouvrez le fchier MainActvity.kt, ajoutez la foncton makeColored() après la foncton
onCreate().

private fun makeColored(view: View) {

}
Chacun des textViews créé dans le fchier actvity_main.xml possède un id. Pour défnir
une couleur, le code basculera à l'aide de l'instructon when sur l'ID de ressource de la
vue. C'est un modèle courant d'utliser une foncton de gestonnaire de clic pour de
nombreuses vues lorsque l'acton de clic est la même.

Modifez la foncton makeColored() comme suit en utlisant la foncton

setBackgroundColor sur chaque textView.

Page 26 sur 33
private fun makeColored(view: View) {
when (view.id) {

// textViews using Color class colors for the background

R.id.tvCGodin -> view.setBackgroundColor(Color.DKGRAY)
R.id.tvName -> view.setBackgroundColor(Color.GRAY)
R.id.tvCours1 -> view.setBackgroundColor(Color.BLUE)
R.id.tvCours2 -> view.setBackgroundColor(Color.MAGENTA)
R.id.tvCours3 -> view.setBackgroundColor(Color.BLUE)
else -> view.setBackgroundColor(Color.LTGRAY)
}
}
Ouvrez le fchier actvity_main.xml, donnez un id constraint_layout à la vue racine
constraintLayout.

Ouvrez le fchier MainActvity.kt et ajoutez la foncton setListeners() suivante après la

foncton makeColored(). Utlisez fndViewByID pour obtenir une référence pour chacune
des vues défnies dans le fchier actvity_main.xml.

private fun setListeners() {

val tvCGodin = fndViewById<TextView>(R.id.tvCGodin)

val tvName = fndViewById<TextView>(R.id.tvName)
val tvCours1 = fndViewById<TextView>(R.id.tvCours1)
val tvCours2 = fndViewById<TextView>(R.id.tvCours2)
val tvCours3 = fndViewById<TextView>(R.id.tvCours3)

val rootConstraintLayout = fndViewById<View>(R.id.constraint_layout)

}
Ajoutez les lignes suivantes à la fn de la foncton setListeners. Vous vous créez une liste
des vues défnis précédemment.

val clickableViews: List<View> =

listOf(
tvCGodin, tvName, tvCours1,
tvCours2, tvCours3, rootConstraintLayout
)
Ajoutez un écouteur pour chacune des vues ajoutées à la liste comme suit:

for (item in clickableViews) {

item.setOnClickListener { makeColored(it) }

}
Ajoutez la ligne suivante à la fn de la foncton onCreate().
setListeners()
Exécutez votre applicaton. Au début, vous allez avoir un écran vide. Cliquez ou touchez
votre écran pour révéler les cases et l'arrière-plan.

Page 27 sur 33
 Exercice

Utlisez des images à la place du texte avec une couleur d'arrière-plan. L'applicaton doit
révéler des images quand l'utlisateur appuie sur les textViews.

Astuce: Ajoutes les images dans le répertoire drawable pour en faire des ressources
pouvant être dessinées. Utlisez la foncton setBackgroundResource() pour défnir une
image comme arrière-plan d'un textView.

Exemple:

R.id.tvCours2 -> view.setBackgroundResource(R.drawable.ic_launcher_background)

Parte 2

Créez un nouveau projet Laboratoire1b dans Android Studio.

1. Copier le morceau de code suivant dans le fchier actvity_main.xml (onglet code) avant la
ligne </ConstraintLayout>

<TextView
android:id="@+id/textView_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBotom="8dp"
android:layout_marginLef="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:text="@string/message_textView_img"
android:textAlignment="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLef_toLefOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:text="@string/message_textView_img" />
A consulter pour mieux comprendre:
htps://developer.android.com/reference/android/support/constraint/ConstraintLayout.ht
ml

2. Ajoutez la ligne suivante au fchier strings.xml :

<string name="message_textView_img"> Ceci est une zone de texte avec 4 images</string>

Observez le résultat en mode Design. Vous pouvez exécuter à nouveau pour voir le résultat
sur votre téléphone/tablete. Le nouveau composant apparaît complètement en bas dans

Page 28 sur 33
 l'interface. Utliser la fenêtre de propriétés du nouveau composant pour comprendre les
diférents atributs.
3. Relancez votre applicaton.

4. Elle doit ressembler à ceci :

5. Complétez le code XML ci-dessus pour metre le texte du nouveau textView en gras,
changer sa couleur à blanc, son arrière-plan à holo_blue_dark (déjà présent dans Android
Studio) et sa taille à 16sp (à insérer dans le fchier dimens.xml). Utlisez un style comme
dans le projet 1 pour ce faire. Le texte doit être centré.

6. Ajout d’un champ de texte de saisie par programmaton

Donner un id rootLayout au ContstraintLayout se trouvant à la racine. Donnez un id aussi à
votre premier textView contenant le texte "Hello World"

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="htp://schemas.android.com/apk/res/android"
xmlns:app="htp://schemas.android.com/apk/res-auto"
xmlns:tools="htp://schemas.android.com/tools"
android:id="@+id/rootLayout"
6. Sauvegarder le fchier actvity_main_xml

7. Modifez la foncton onCreate comme suit dans la classe MainActvity.kt.

Page 29 sur 33
 public override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.actvity_main)

val constraintLayout = fndViewById<ConstraintLayout>(R.id.rootLayout)

val editText = EditText(this)
editText.id = View.generateViewId()

editText.hint="Tapez votre texte ici"

editText.layoutParams = ConstraintLayout.LayoutParams(0, ConstraintLayout.Lay
outParams.WRAP_CONTENT)

constraintLayout.addView(editText)
val constraintSet = ConstraintSet()
constraintSet.clone(constraintLayout)
constraintSet.connect(editText.id,ConstraintSet.TOP, R.id.textView_img, Constrai
ntSet.BOTTOM,20)
constraintSet.connect(editText.id,ConstraintSet.LEFT, ConstraintSet.PARENT_ID, C
onstraintSet.LEFT,20)
constraintSet.applyTo(constraintLayout)
}

Noter l’utlisaton de l’instructon :

val constraintLayout = fndViewById<ConstraintLayout>(R.id.rootLayout)

Elle permet de récupérer l’identfant d’un composant de votre fchier xml afn de
l’utliser dans Kotlin.

Vous devez aussi ajouter la ligne suivante avant la ligne </ressources> à votre fchier
strings.xml pour pouvoir donner un identfant à votre editText.

<item name="myEditText" type="id" />

8. Exécuter.

Votre applicaton doit ressembler à ceci : (le clavier apparaît de manière systématique
pour la saisie)

Modifez l'applicaton pour aboutr à l'interface ci-dessous.

Utlisez les atributs du drawableStart, drawableEnd, drawableTop et drawableBotom

pour ajouter les images à votre TextView.

Page 30 sur 33
 Vous devez avoir le résultat suivant quand vous exécutez à nouveau.

Modifez par la suite l'arrière-plan du textView pour avoir un fond bleu et le texte en
blanc comme suit:

Modifez l'applicaton pour que le champ EditText soit centré dans l'interface.

7. Ajout d’un bouton en utlisant l’interface graphique (drag and drop)

9. Cliquer sur actvity_main.xml. Choisir Design.

10. À partr du panneau Palete, développer Widgets, sélectonner le composant Buton et

glissez-le sur le layout. Ajuster les propriétés du bouton pour avoir ce qui suit à l’exécuton:

Le bouton Afcher doit être placé au milieu dans le sens horizontal et au milieu des deux
texview dans le sens vertcal

Page 31 sur 33
8. Interactons avec les composants

Nous allons programmer le clic sur le bouton Afcher, pour afcher le message saisi
dans la zone de texte editText créée par programmaton. Dans les deux cas qui suivent,
il faut d’abord récupérer l’identfant du bouton, puis programmer l’écouteur
d’événement qui réalisera l'afchage

8.1 Utlisaton d’un objet Toast

Un Toast est un message qui s’afche pendant quelques secondes en premier

plan dans une fenêtre dont la taille est imposée par la taille du message.
Intéressant dans le cas des messages purement informatfs.

o Copier le code suivant dans MainActvity.java

val btnAfcher = fndViewById<Buton>(R.id.buton)

btnAfcher.setOnClickListener {
val context = applicatonContext
val text = editText.text
val duree = Toast.LENGTH_LONG
val toast = Toast.makeText(context, text, duree)
toast.show()
}

o Importez les classes nécessaires

o Exécuter, entrer du texte dans la zone de saisie, puis cliquer sur le

bouton Afcher. Observer le résultat.

Page 32 sur 33
 Note: Dans les cas d’un bouton créé à l’aide de l’interface graphique, il est aussi
possible d’associer, dans la fenêtre de propriétés, un nom de méthode à
l’événement onClick, puis de programmer son corps dans l’actvité
correspondante. L’entête de la méthode serait :
public void nom_methode(View v).

8.2 Utlisaton d’une boite de dialogue

Il s’agit d’utliser une boite de dialogue d’alerte très simplifée.

o Metre en commentaires l’écouteur d’événement du bouton Afcher

créé précédemment.

o Copier et bien comprendre le code suivant dans MainActvity

btnAfcher.setOnClickListener{
val alertDialog = AlertDialog.Builder(this)
alertDialog.setTitle(" Texte saisi ");
alertDialog.setMessage(editText.text);
alertDialog.setIcon(android.R.mipmap.sym_def_app_icon);

alertDialog.setPositveButon("OK") { _, _ ->
val toast = Toast . makeText (this, "vous avez choisi OK",
Toast.LENGTH_LONG);
toast.show();
}

alertDialog.setNegatveButon("Annuler") { _, _ ->
val toast = Toast . makeText (this, "vous avez choisi Annuler",
Toast.LENGTH_LONG);
toast.show();
}

alertDialog.show()
}

À remetre
L'applicaton compressé dans un fchier zippé.
Au plus tard, Vendredi, le 01 décembre 2023 durant la séance du TP.
AUCUN RETARD ACCEPTÉ. LES EXERCICES REMIS EN RETARD NE SERONT PAS CORRIGÉS.

Page 33 sur 33