Vous êtes sur la page 1sur 6

Responsable du cours : Rim WALHA

ENVIRONNEMENT DE
DEVELOPPEMENT INTEGRE

TP n°3

L’objectif de ce TP est de :
 Créer un projet Android avec plusieurs activités,
 Manipuler différents types de Layout comme LinearLayout et TableLayout,
 Accéder au web à partir d’une activité,
 Passer d’une activité à une autre via les intentions.
Environnement de Développement Intégré

Environnement de Développement
Intégré
TP N°3

I. Création d’une interface graphique en utilisant le layout


LinearLayout

LinearLayout : ce layout permet de placer les éléments (vues) sur une même ligne selon une
certaine orientation (horizontale ou verticale).

1) Créez un nouveau projet Android.


2) Insérez deux boutons dans l’activité principale.
3) Modifiez ConstraintLayout par LinearLayout dans le fichier activity_main.xml.
4) Ajoutez l’attribut android:orientation pour préciser l’orientation du layout. Cet attribut
peut prendre l’une des deux valeurs suivantes:
o Vertical : les composants graphiques seront placés de haut en bas (en colonne).
o Horizontal : les composants graphiques seront placés de gauche à droite (en
ligne).

5) Testez les deux valeurs possibles de cet attribut. Que se passe-t-il ?


6) Mettez cet attribut avec android:orientation="vertical".
7) Modifiez la largeur et la hauteur des 2 boutons comme suit :
android:layout_width="match_parent"
android:layout_height="wrap_content"
Vous devez aboutir au rendu suivant :

Page 1
Environnement de Développement Intégré

8) Inversez les 2 valeurs des attributs qui concernent la largeur et la hauteur des 2 boutons.
Que se passe-t-il ?
9) Testez d’autres combinaisons pour la largeur et la hauteur des 2 boutons et observez le
changement.
10) Insérez pour chaque bouton un attribut android :layout_gravity et lui donnez une
valeur parmi « center, bottom, top, … »
11) Insérez pour chaque bouton un attribut android : gravity et lui donnez une valeur parmi
« bottom, right, top, center, left,… »
12) Observez le changement.
13) Quelle est la différence entre android :layout_gravity et android : gravity ?

II. Création d’une interface graphique en utilisant le layout


TableLayout

TableLayout : ce layout permet d'organiser les éléments en tableau comme en HTML, mais
sans les bordures.

1) Créez une nouvelle activité « Activity2 » dans le même projet Android.


2) Utilisez dans cette activité un TableLayout contenant 5 lignes et 2 colonnes. On vous
donne le code du fichier activity_2.xml suivant :

Page 2
Environnement de Développement Intégré

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="2"
tools:context=".Activity2">
<TableRow> </TableRow>
<TableRow> </TableRow>
<TableRow> </TableRow>
<TableRow> </TableRow>
<TableRow> </TableRow>
</TableLayout>

3) Insérez dans cette nouvelle activité des objets graphiques (4 vues TextView, 2 vues
EditText, et un bouton) comme indiqué sur la figure suivante :

A noter que :
 L’attribut android:layout_span permet d’étendre une vue dans des cellules fusionnées.
 L’attribut android:layout_column permet d’afficher une vue dans la colonne spécifiée.

4) Modifiez le fichier AndroidManifest.xml afin d’afficher cette deuxième activité au


démarrage de l'application.
5) Exécutez le projet.
6) Modifiez le titre du layout en modifiant le contenu de <resources> dans le fichier
strings.xml. On peut mettre « Test Layout » comme nouveau titre.
7) Pour cette seconde activité, développez un code source qui permet de traiter l’évènement
clic sur le bouton « Valider ». Suite à cet évènement, le programme doit concaténer au

Page 3
Environnement de Développement Intégré

champ « Bonjour » (TextView) le nom et le prénom saisis dans les deux zones de texte
(EditText) comme indiqué sur la figure suivante :

III. Accès au web à travers une activité


Android offre un mécanisme permettant d’afficher une page HTML dans une activité. On
utilise pour cela une vue du type WebView.

1) Créez une troisième activité « Activity3 » dans le même projet Android.


2) Insérez la vue WebView dans cette activité.
3) Mettez la largeur (android:layout_width) et la hauteur (android:layout_height) du
WebView à "match_parent".
4) Récupérez la ressource de la vue dans le code source Java de l’activité 3 et chargez la
page web google en utilisant : webview.loadUrl("http://www.google.com");

Page 4
Environnement de Développement Intégré

5) Ajoutez dans le fichier « AndroidManifest.xml » la permission permettant à l’activité


de se connecter à l’internet :
<uses-permission android:name="android.permission.INTERNET" />
6) Modifiez le fichier AndroidManifest.xml afin d’afficher cette troisième activité au
démarrage de l'application.
7) Exécutez le projet.

IV. Passage d’une activité à une autre via les intents

L’objectif de cette partie est de relier les trois activités précédentes via les intents.

1) Modifiez le fichier AndroidManifest.xml afin d’afficher la première activité crée


« Main_Activity » au démarrage de l'application.
2) Développez le code source permettant de gérer les évènements suivants : à partir de
l’activité principale,
 Lorsque l’utilisateur clique sur le « Premier bouton », l’« Activity2 » s’ouvre.
 Lorsque l’utilisateur clique sur le « Second bouton », l’« Activity3 » s’ouvre.
3) Exécutez le projet.

Page 5