Université Abdelmalek Essaadi

Ecole Nationale des Sciences Appliquées d'Al-Hoceima

Département Mathématiques et Informatique
Parcours : GI– S5 GL
Prof. Y. EL BORJI

Module : Développement des applications mobiles (DAM)

Travaux Pratiques N° 2 : Eléments Graphiques et Evènements

Création et manipulation d’éléments graphiques de base dans Android

 Objectifs :
 Construire interface graphique Android
 Manipuler les widgets les plus simples
 Organiser son interface avec des layouts
 Gérer les évènements d’une vue

 Outils utilisés dans ce TP :

 Android Studio v4.1
 Java SE Development Kit 15.0.1
 Android SDK - API 29
 NOX v6.6.1.3

 Besoins en matériel (Configuration requise) :

 Microsoft® Windows® 7/8/10 (64-bit)
 Mac® OS X® 10.10 (Yosemite) ou plus récent
 4 GO RAM minimum, 8 GO RAM recommandée
 + 10 Go d'espace disque pour tout installer
 Processeur puissant, la puissance pure qui compte le plus
rapide sera le mieux (1 cœur est suffisant)
 1280 x 800 résolutions d'écran minimal
 Module : Développement des applications mobiles (DAM)

 Partie I : Construction d'une IHM avec des composants Android

Le but de cet exercice est de construire une interface homme-machine
(IHM) présentant plusieurs composants graphiques Android (View).
Cette IHM permet de faire une authentification en demandant un
couple (nom de login, un mot de passe). Après avoir appuyé sur le
bouton « Se Connecter », un message de notification indiquant que la
connexion est en cours si la paire donnée convient sinon un message
d'erreur sera affiché. N'oubliez pas de limiter le nombre de tentatives de
connexion possibles à trois, sinon le bouton de connexion se désactivera
automatiquement.

Ecole Nationale des Sciences Appliquées d'Al-Hoceima 2/6 Prof : Yassine EL BORJI
Année universitaire : 2021 – 2022
 Module : Développement des applications mobiles (DAM)

I. Composants graphiques qui interviennent dans cette IHM

Une application de connexion est l'écran demandant vos informations
d'identification pour vous connecter à une application particulière. Vous
l'avez peut-être vu en vous connectant à Facebook, Twitter etc.

La construction de l’interface graphique de notre application implique non

seulement la mise en place des composants graphiques mais aussi
l’intégration graphique d’une interface à travers la conversion d'une
maquette graphique réalisée par un graphiste en widgets.

1) Lors de la création d'un projet, Android Studio introduit le

ConstraintLayout qui remplace l'ancien RelativeLayout comme gabarit
par défaut pour la première activité de ce projet. Nous envisageons
utiliser le "LinearLayout " comme présentation courante, simple et
efficace permettant d’organiser nos éléments de façon linéaire. Donc
comme son nom l'indique, ce layout se charge de mettre les vues sur
une même ligne, selon une certaine orientation.
2) Après la création de votre nouveau projet, votre interface commence
par mettre en place un Layout conteneur qui regroupera toutes les
sous-layouts alignant les vues verticalement ou horizontalement. Donc
nous remplaçons le Constraint Layout par défaut créé dans
activity_main.xml par un LinearLayout avec une orientation verticale.
3) Les trois premiers conteneurs de type LinearLayout sont réserver
respectivement à :
 Un header de type ImageView fixe en haut de votre interface
 un TextView indiquant le nom de l'application sur laquelle
nous voulons authentifier
 Suivi d’une View de type ImageView pour "Logo de l'ENSAH".
4) Les élément du formulaire de connexion sont regroupés et alignés dans
un seule LinearLayout :

Ecole Nationale des Sciences Appliquées d'Al-Hoceima 3/6 Prof : Yassine EL BORJI
Année universitaire : 2021 – 2022
 Module : Développement des applications mobiles (DAM)

 Vous devez d'abord définir deux EditText demandant le nom

d'utilisateur et le mot de passe de l'utilisateur précédés par des
TextView indiquant lequel est login et mot de passe.
 Un Bouton avec le texte de connexion "Se Connecter"

5) Au bas de votre interface, définissez trois Views alignés dans un seul

LinearLayout en parallèle:
 TextView : "Questions"
 TextView : "Mot de passe oublié"
 TextView : "Nous contacter"

Ecole Nationale des Sciences Appliquées d'Al-Hoceima 4/6 Prof : Yassine EL BORJI
Année universitaire : 2021 – 2022
 Module : Développement des applications mobiles (DAM)

II. Réaction aux interactions utilisateur (Evènements):

Dans le fichier java :

1) On commence tout d’abord par initialiser les objets crées en les

associant à ses équivalents dans le fichier XML :

2) à l'intérieur de la méthode onClick, récupérez le texte du nom

d'utilisateur et du mot de passe saisies en utilisant les méthodes
getText () et toString () et faites-les correspondre avec le « admin »»
en utilisant la fonction equals ().

Ecole Nationale des Sciences Appliquées d'Al-Hoceima 5/6 Prof : Yassine EL BORJI
Année universitaire : 2021 – 2022
 Module : Développement des applications mobiles (DAM)

3) La dernière chose que vous devez faire est de fournir un mécanisme

de sécurité, afin d'éviter les tentatives non désirées :

 Ajouter une mesure de sécurité permettant d’empêcher les

utilisateurs (robots en particulier) de faire plus de 3 tentatives en
ajoutant un TextView qui affiche le nombre des tentatives
restantes. Désactiver le bouton de connexion juste après les trois
fausses tentatives.

4) Essayons de lancer notre application. Je suppose que vous avez créé

votre AVD lors de la configuration de l'environnement. Android studio
installe l'application sur votre AVD et la démarre.

Ecole Nationale des Sciences Appliquées d'Al-Hoceima 6/6 Prof : Yassine EL BORJI
Année universitaire : 2021 – 2022