Développement Mobile sous Android (TP n°1)
TP n°1
ère
1 application Android
Objectif
L’objectif de ce TP est de vous permettre de vous familiariser avec l’environnement de développement
à travers une 1ère application simple mais regroupant la plupart des éléments de base à savoir les
activités, les fichiers de ressources, la gestion des évènements, les intents, etc.
Partie I: Activité 0
Sous Android Studio, créer un nouveau projet Android: File – New – New Project ou New Project dans
l’interface de démarrage.
Assurez-vous que vous êtes dans l’onglet "Phone and Tablet", choisissez "Empty Views Activity", puis
cliquez sur « Next ».
Remplissez le formulaire avec les informations nécessaires suivantes : Nom « TP1X » où X est votre
nom, Nom du package « isim.ia2Y.tp1X » où Y est votre groupe, « Kotlin » comme langage de
programmation et cibler l'API 26 comme version minimale du SDK (Ainsi, l'application peut tourner
sur le maximum de Smartphones).
Une fois c’est fait, cliquez sur « Finish ».
Le projet créé comporte déjà votre première activité nommée par défaut « MainActivity ».
NB : Afin de pouvoir tester une application Android, il faut soit créer un émulateur via Device
Manager, soit se doter d'un Smartphone Android sur lequel le débogage USB est déjà activé.
o Référez-vous aux parties V et VI du TP0 pour configurer l’émulateur ou votre
Smartphone.
Dans la suite, il vous est demandé de :
1) Lancer cette application en cliquant sur le bouton . Vous devez voir le texte "Hello World !"
affiché sur l’activité lancée.
2) Ajouter un objet d’interface de type TextView ayant comme id « mytextview » et comme texte
« This is My Android App ».
3) Ajouter une nouvelle ressource chaine de caractères nommée « mytext » et ayant comme valeur
« Welcome to My First Android Application ». Puis, afficher son contenu dans le TextView
« mytextview » en utilisant la référence « @string/… ».
o Ici, on veut bien que la chaine de caractères à afficher dans le nouveau TextView soit
définie dans le fichier res/values/[Link].
4) Attribuer la couleur bleue à ce texte de bienvenue (#0000FF).
Naoufel KHAYATI 1
Développement Mobile sous Android (TP n°1)
5) Attribuer la même couleur bleue au message « Hello World ! ».
6) Créer une nouvelle ressource couleur dans le fichier res/values/[Link] ayant comme nom
« mycolor » et comme valeur « #FF5722 ».
7) Attribuer cette nouvelle couleur aux deux textes précédents: « Welcome… » et « Hello… » en
utilisant les références « @color/… ».
8) Mettez la taille du texte « Welcome… » à 35sp.
9) Mettez la taille du texte « Hello… » à 50sp.
10) Créer un fichier de ressources [Link] sous le dossier res/values et y stocker une nouvelle
taille nommée « mydimen » et ayant la valeur 40sp.
o Clic droit sur le dossier « values », puis « New », ensuite « Values Resource File », mettez
« dimensions » dans le champ « File name », puis « OK ».
o La balise à utiliser est « dimen ».
11) Appliquer cette nouvelle taille aux deux textes de votre interface en utilisant les références
« @dimen/… ».
12) Au lancement de l'activité, afficher un Toast (message pop-up qui apparait puis disparaît) contenant
le message suivant: « This app is developed by X » où X est votre nom et prénom.
o Ce toast est à créer dans la méthode onCreate() de votre activité et plus exactement après
l’instruction setContentView() comme suit:
Partie II: Activité 1
Ajouter à l'application une nouvelle activité de nom « AuthenticationActivity ».
Clic droit sur la racine du projet (app) - New - Activity – Empty Views Activity.
NB: Ceci ajoutera à la fois, un fichier kotlin sous java let un fichier xml sous res/layout
Créer l’interface de la figure 1 (voir page 4) en suivant les étapes ci-dessous:
1) Cette activité contiendra en bas à droite, un TextView dont le rôle est d’afficher la date et l’heure
courantes dans deux cas:
a. Lors du chargement de l’activité.
b. Lors du clic sur le bouton « Update Date and Time » qui se trouve en bas à gauche.
Naoufel KHAYATI 2
Développement Mobile sous Android (TP n°1)
2) Cette activité représentera une interface d’authentification par un login et un mot de passe. Lorsque
l'utilisateur aurait rempli ces 2 champs, il doit cliquer sur le bouton « Sign In ».
Dans un premier temps:
- Si le couple login et mot de passe est correct (mot de passe = login préfixé par « pw », par
exemple si login = « ali », le mot de passe doit être « pwali »), on affiche un toast informant
que les données sont correctement saisies.
- Sinon, on affiche un toast signalant que les informations saisies sont erronées.
NB:
- Utiliser la classe Date pour la question 1.
- Tous les textes affichés dans les différentes vues (TextView, EditText (les hints) ou Button)
doivent correspondre à des chaines stockées dans le fichier [Link] (à l’exception de la date
bien sûr).
- La couleur bleue (#0000FF) des trois TextView est à lire à partir du fichier [Link] déjà
existant.
- La taille (18sp) des mots Login et Password est à lire à partir du fichier de ressources
[Link] créé dans la partie I.
- La gestion du clic sur les boutons « Sign In » et « Update Date and Time » se fait par
association d'un listener à ces boutons via la méthode setOnClickListener() puis en
implémentant le code nécessaire.
[Link] {
// Ici votre traitement
}
o « xxxxxxxxx» dans cet exemple est à remplacer par l’objet binding suivi de l’id du
bouton concerné.
- Pour avoir accès aux objets graphiques, il faut activer le ViewBinding en :
o Ajoutant la configuration de gauche dans le fichier [Link] (niveau module) sous la
section android. Il faut cliquer ensuite sur « Sync Now ».
o Ajoutant le code de droite dans la méthode onCreate() de l’activité au-dessous de
l’appel à onCreate() de la super-classe tout en remplaçant la ligne setContentView()
existante.
Naoufel KHAYATI 3
Développement Mobile sous Android (TP n°1)
Figure 1. Interface de « AuthenticationActivity »
Partie III: Activité 2
Ajouter une deuxième activité « ComputeActivity » de type « Empty Activity » qui contiendra un
TextView, un RadioGroup composé de deux RadioButton(s), un autre TextView et son EditText, un
troisième TextView et l’EditText correspondant, un Button et enfin deux derniers TextView(s).
Au départ, « ComputeActivity » doit être dans l’une des formes représentées par les figures 2 et 3. En
effet, l’affichage dépend du bouton radio sélectionné (des vues qui apparaissent et qui disparaissent, ou
même qui changent de texte).
Lors du clic sur le bouton « Calculate », l’une des deux choses suivantes peut se produire:
- Calcul de la somme de deux entiers (Value 1 et Value 2) si le bouton radio « Sum » est
sélectionné.
- Calcul du carré d’un entier donné (Value) si le bouton radio « Square » est sélectionné.
NB:
- L’affichage des résultats se fait dans le dernier TextView comme le montrent les figures 4 et 5.
- Le passage vers « ComputeActivity » se fait suite au succès de l’authentification au niveau de
la première activité (Si le compte est valide, on passe, sinon, on garde le toast du message
d’erreur).
o Ce passage de "AuthenticationActivity" vers "ComputeActivity" se fait grâce à un objet
Intent comme suit (créé puis lancé via la méthode startActivity())
Naoufel KHAYATI 4
Développement Mobile sous Android (TP n°1)
igure 2. Interface de « ComputeActivity » Figure 3. Interface de « ComputeActivity »
pour le calcul de la somme de 2 entiers. pour le calcul du carré d’un nombre.
Figure 4. Le résultat de la somme de 2 et 7. Figure 5. Le résultat du carré de 4.
Naoufel KHAYATI 5