[TP2]

MASTER : INGÉNIERIE DES SYSTÉMES INFORMATIQUES

INITIATION À ANDROID
STUDIO

Date: [22/11/2019]
Encadré par: [M.Sadqi]
Réalisé par : [ELGANA Yasser & DAYR Hamza ]

1
 Table de figures

Figure 1 : Création de projet ................................................................................................... 2

Figure 2 : L’éditeur de mise en page ...................................................................................... 2
Figure 3: Changement de thème ............................................................................................ 2
Figure 4 : Changement de rotation ......................................................................................... 2
Figure 5 : Changement de version SDK ................................................................................ 2
Figure 6 : Activity_main.xml ..................................................................................................... 2
Figure 7: Application initial ...................................................................................................... 2
Figure 8 : Propriétés de Button_toast .................................................................................... 2
Figure 9 : Propriétés de TextView ........................................................................................... 2
Figure 10 : Application avant la modification........................................................................ 2
Figure 11: Création des ressources........................................................................................ 2
Figure 12: fichier : Strings.xml ............................................................................................... 2
Figure 13: Changement de design ......................................................................................... 2
Figure 14 : Fichier colors.xml .................................................................................................. 2
Figure 15: Fichier Strings.xml ................................................................................................ 2
Figure 16 : Fichier Activity_main.xml ...................................................................................... 2
Figure 17: Application Login .................................................................................................... 2
Figure 18 : Code complet de tache 4 ..................................................................................... 2
Figure 19 : Application finale .................................................................................................. 2
Figure 20: Application de commande café ........................................................................... 2

2
Tâche 1 : Créer un nouveau projet “Hello Toast”
2.1 Explorer l'éditeur de mise en page (Editor Layout)
Création d’un nouveau projet “ Hello Toast”
avec les paramètres suivants:
➢ Application Name : Hello Toast
➢ Package name: com.exemple.tp2
➢ Phone SDK: API17
➢ Template: Empty Activity

Figure 1 : Création de projet

Tâche 2 : Ajouter des vues à "Hello Toast" dans l'éditeur de mise en

page :
L'éditeur de mise en page offre la possibilité
de créer la mise en page de l'interface
utilisateur et pour prévisualiser l’application
à l'aide de différents appareils, thèmes,
résolutions et orientations.

Figure 2 : L’éditeur de mise en page

3
Dans l'éditeur de mise en page on peut :
➢ Changer le thème
Cette figure illustre que on peut toujours modifier ou
changer le theme d’application .

Figure 3: Changement de thème

➢ Changer la rotation
Comme vous pouvez voir dans la figure (4) on peut
aussi changer la rotation .

Figure 4 : Changement de rotation

➢ Changer la version SDK :

comme on peut modifier la version de SDK de
notre application

Figure 5 : Changement de version SDK

4
2.2 Modifier le groupe de vues à un LinearLayout :
Dans le fichier Activity_main.xml on a
changer “view group” vers une disposition
linéaire verticale qui est l'une des
dispositions les plus courantes. C'est simple,
rapide et toujours un bon point de départ

Figure 6 : Activity_main.xml

2.3. Ajouter des vues à « Linear Layout » dans l'éditeur de mise en page (Layout Editor) :

➢ On ajoute deux “BUTTON” et

“TextView ”dans notre layout .

Figure 7: Application initial

➢ De cette étage on peut changer ID de

Button 1 et son texte

Figure 8 : Propriétés de Button_toast

5
 ➢ Toujours on a la possibilité de changer les ID de
TextView et son texte via cette interface intuitive .

Figure 9 : Propriétés de TextView

➢ Ainsi on change ID de Button 2 et son texte .

6
Tâche 3: Modifier la mise en page "Hello Toast" en XML :

Figure 10 : Application avant la modification

La figure (10) présente l’application avant d’appliqué les instructions de modification sur la
mise en page « Hello Toast »

Création des ressources de chaîne de caractères

Figure 11: Création des ressources

7
 On constate qu’après l’extraction on trouve toute les ‘Strings’ dans le répertoire
src/res/values/strings.xml

Figure 12: fichier : Strings.xml

Définir des couleurs et des arrière-plans. Afin d’obtenir le résultat afficher dans la figure
ci-dessous :

Figure 13: Changement de design

8
On a modifier les ressources couleurs, styles(ActionBar) et les chaines de caractères comme
le montrant les figures ci-dessous :

Figure 14 : Fichier colors.xml

Figure 15: Fichier Strings.xml

Figure 16 : Fichier Activity_main.xml

9
Travail à faire
L’interface de login demande un identifiant ainsi qu'un mot de passe pour vérifier l'identité
de la personne qui se connecte à l’environnement. Donc on a réalisé ce projet avec 5
vues : imageView,deux editText et deux bouttons.

Figure 17: Application Login

10
Tache 4. Ajouter les handlers OnClick pour les boutons :

Figure 18 : Code complet de tache 4

➢ Exécution d’application :

Figure 19 : Application finale

11
 Travail à faire 3 :
➢ On choisit la quantité (la quantité par défaut
est 1) d’article après il suffit de confirmer
l’opération avec un simple clic sur valider la
commande.

Figure 20: Application de commande café

12