République Algérienne Démocratique et Populaire
Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
Université Belhadj Bouchaib Ain Témouchent
Faculté des Sciences et de la Technologie
3ème année LMD MI (S6) année universitaire 2024/2025
Matière :Application mobile TP n° : 6
Interfaces graphiques en Android (les images )
Mise en page
1. Objectifs
• Le but de ce TP est d’apprendre comment ajouter des images dans l’application, et
utiliser les ressources pour les chaines de caractères.
• Ce Tp est une continuation du projet créé durant le Tp 4
2. Ajouter une image à notre Application
a. Sur Android Studio dans les menus , cliquer sur View > Tool Windows > Resource
Manager ou cliquez sur l'onglet Ressource Manager à gauche de la fenêtre Projet.
b. Cliquer sur + et sélectionnez Import Drawables, sélectionnez une image d’arrière-
plan et cliquez sur suivant puis importer
• Android studio ajoute l’image dans la liste des Drawable
• Basculer sur l’onglet du projet et confirmer que l’image existe sur le chemin
app>res>drawable
c. Dans la fenêtre Project ouvrez activity_main.xml ( app > res > layout >
activity_main.xml)
d. Allez dans Palette et glissez ImageView (située dans widgets) dans la vue de
conception dans la partie haute qui est vide pour ne pas la chevaucher avec le
texte, la fenêtre Picka Ressource apparait , sélectionnez l’image et cliquez sur
ok
République Algérienne Démocratique et Populaire
Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
Université Belhadj Bouchaib Ain Témouchent
Faculté des Sciences et de la Technologie
3ème année LMD MI (S6) année universitaire 2024/2025
e. L’image ne remplis pas l’écran, nous allons régler ça par la suite
3. Positionner et dimensionner l'ImageView
a) Maintenez le pointeur sur le cercle en haut du contour de l'ImageView, et déplacez le
vers la partie haute de l’écran de l’application
b) Ajoute une contrainte du bas de l'ImageView au bas de la ConstraintLayout.
République Algérienne Démocratique et Populaire
Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
Université Belhadj Bouchaib Ain Témouchent
Faculté des Sciences et de la Technologie
3ème année LMD MI (S6) année universitaire 2024/2025
c) Dans la partie Constraint widget dans le volet Layout à droite , assurez-vous que la
marge du haut et du bas est égale à zéro (de notre imageView), mettez la même valeur
(0) à droite et à gauche
L’image est maintenant centrée mais ne couvre pas tout l’écran
d) En dessous du Constraint widget se trouve la section Constraints. Mettez layout_width
et layout_height sur 0dp.
Ce qui veut dire que la largeur et la longueur de notre ImageView prend les mêmes
dimensions que ConstraintLayout (moins les marges)
République Algérienne Démocratique et Populaire
Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
Université Belhadj Bouchaib Ain Témouchent
Faculté des Sciences et de la Technologie
3ème année LMD MI (S6) année universitaire 2024/2025
e) Pour l’instant l’image ne couvre pas toute l’écran de l’application ,pour remédier à cela
nous allons utiliser l’attribut scaleType, vous pouvez le chercher manuellement ou
cliquez directement dans l’icône de recherche dans la fenêtre Attributes
f) Choisissez le scaleType centerCrop, pour couvrir tout l’écran sans déformer l’image
Maintenant l’image couvre tout l’écran. Mais les textes sont cachés.
g) Pour résoudre ce problème, vous allez changer l'ordre des vues et déplacer l'ImageView
au début de la liste pour qu'elle soit dessinée en premier.
• Dans l’arborescence des composants déplacez l’imageView en premier, et
les textView viennent après.
h) Maintenant l’image couvre tout l’écran , vous pouvez lancez l’application et voir le
résultat
République Algérienne Démocratique et Populaire
Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
Université Belhadj Bouchaib Ain Témouchent
Faculté des Sciences et de la Technologie
3ème année LMD MI (S6) année universitaire 2024/2025
4. La Ressource String
Lorsque nous avons ajouté les TextViews dans les tps précédents , Android Studio
les a signalés avec des triangles d'avertissement, car les textes codées en dur dans le
code source.
Lorsque vous écrivez des applications, il est important de se rappeler qu'elles peuvent être
traduites dans une autre langue à un moment donné.
Une chaîne codée en dur est une chaîne qui est écrite directement dans le code de
l’application. Les chaînes codées en dur rendent plus difficile la traduction de l’application dans
d'autres langues, et plus difficile la réutilisation d'une chaîne à différents endroits de
l’application.
Nous pouvons résoudre ces problèmes en "extrayant les chaînes dans un fichier de ressources".
Cela signifie qu'au lieu de coder en dur la chaîne de caractères dans le code, nous la plaçons
dans un fichier, lui donnez un nom, puis utilisez ce nom chaque fois que nous voulons utiliser
République Algérienne Démocratique et Populaire
Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
Université Belhadj Bouchaib Ain Témouchent
Faculté des Sciences et de la Technologie
3ème année LMD MI (S6) année universitaire 2024/2025
cette chaîne. Le nom restera le même, même si nous modifions la chaîne ou la traduisons dans
une autre langue.
a) Cliquez sur l’icône d’avertissement en haut à gauche de la fenêtre des vues pour afficher
la liste des avertissements, la fenêtre d’avertissement s’affiche en bas
b) Cliquez sur l’un des textViews que vous voulez modifier
c) Dans la fenêtre d’avertissement, glissez en bas, vous trouvez le bouton « Fix »
permettant d’extraire la ressource de cette chaine de caractères
République Algérienne Démocratique et Populaire
Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
Université Belhadj Bouchaib Ain Témouchent
Faculté des Sciences et de la Technologie
3ème année LMD MI (S6) année universitaire 2024/2025
d) la boite de dialogue extract Ressource s’affiche :
• Ressource Name : le nom de variable est créé automatiquement, vous
pouvez le modifier, mais il faut qu’il soit unique, il est dont préférable
de laisser le nom généré automatiquement
• Ressource value : La chaine de caractère actuelle
• Laissez les autres champs avec leurs valeurs par défaut et cliquez sur Ok
e) Faites la même chose tous les textViews que vous avez ajouté
f) Pour vérifier que les variables sont bien générées, ouvrir [Link] (app > res > values
> [Link])
Le fichier [Link] contient une liste de chaînes que l'utilisateur verra dans
l’application. Notez que le nom de l’application est également une ressource de type
chaîne. En regroupant les chaînes au même endroit, nous pouvons traduire plus
facilement tout le texte de l’application et réutiliser plus facilement une chaîne dans
différentes parties de l’application.
Pour l’avertissement de l’image, l'image dans cette application n'est incluse qu'à des fins
décoratives, vous pouvez désactiver l’avertissement en cliquant sur Attributes> All Attributes
>importantForAccessibility et mettre la valeur no
Lancez maintenant l’application
Mme BEDDAD .F