Commen Cons Par L'interface Graphique - . .: TP N 1 Premier Pas Sur Android

Informatique Mobile
TP n˚1
Faculté des Sciences de Bizerte Classe: SI3
Premier pas sur Android Enseignante: N. Bel Hadj Aissa
L’objectif de cette séance est de découvrir les composants graphiques (Textfield, EditText et Bouton).
Commençons par l’interface graphique . . .

L’objectif de la séance est de créer une interface qui permet de saisir une chaine de caractères correspondant à un
prénom puis de valider en appuyant sur un bouton. En réponse, le système doit afficher le message ”Bonjour prénom !”.
L’interface à obtenir sera semblable à la figure 1.
Figure 1 – Interface de l’application
1. Les chaines de caractères : Ouvrir le fichier strings.xml , et supprimer les chaı̂nes déjà existantes en cliquant
sur Remove . Puis ajouter les chaines suivantes:
Nom Valeur
app name hello prenom
prenom Entrez votre prénom :
prenomHint Tapez votre prénom ...
bouton Valider
2. Les couleurs: Créer le fichier couleur.xml dans le dossier /res/values. Puis ajouter les couleurs suivantes:
Nom Valeur
couleurMessage #221596
couleurTitre #000000
couleurFond #DDDDDD
3. Les dimensions: Créer le fichier dimension.xml dans le dossier /res/values . Puis ajouter la dimension suivante:
Nom Valeur
dimMessage 30
Une fois ces variables créées, il est possible à présent de composer l’interface de l’application selon le modèle de la
Figure 2. Pour cela, commencer par ouvrir le fichier main.xml dans le dossier /res/layout.
D’abord, il faut créer un Linear Layout avec une orientation verticale qui contiendra tous les autres composants
puis lui attribuer la couleur ”couleurFond” créée dans le fichier couleur.xmlcomme couleur d’arrière-plan.
Ensuite, placer un TextView qui contiendra le titre. Puis:
– Lui attribuer l’identifiant TextViewPrenom. Cet identifiant permettra de l’appeler dans la partie Java.
– Lui affecter le texte entré dans la variable prenom créée dans le fichier strings.xml.
– Lui affecter la couleur ”couleurTitre” créée dans le fichier couleur.xml.
Puis, on insère un Linear Layout avec une orientation horizontale qui contiendra un EditText (où l’utilisateur
entrera son prénom) et un Button.
Pour le EditText,
1
Figure 2 – Interface de l’application
– Lui attribuer l’identifiant EditTextPrenom.

– Lui attribuer une priorité par rapport au bouton qui sera sur la même ligne (il faut qu’soit sur plus de la moitié de
l’écran).
– le positionner en bas du Linear Layout.
– Lui affecter la chaine prenomHint créée dans le fichier strings.xml. Cette chaine sera affichéé comme un texte
d’indication.
Pour le Button,
– Lui attribuer l’identifiant ButtonEnvoyer.
– Lui affecter le texte entré dans la variable bouton créée dans le fichier strings.xml.
Après avoir fermé le Linear Layout horizontal, Ajouter le TextView qui affichera le prénom rentré dans l’EditText
quand on clique sur le bouton.
– Lui attribuer l’identifiant TextViewHello.
– Le positionner au centre.
– Lui attribuer la dimension dimMessage créée précédemment dans le fichier dimension.xml.
– Enfin lui attribuer la couleur ”couleurMessage” créée dans le fichier couleur.xml.
Maintenant parlons java . . .

D’abord, aller dans l’arborescence du projet dans Eclipse, dans le dossier src, aller sur le fichier hello.java. Ajouter
ces lignes au début du fichier pour permettre d’instancier tous les objets nécessaires pour réaliser l’application..
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
Ensuite, déclarer les composants dynamiques:
private EditText editText;

private Button button;
private String prenom;
Dans la méthode onCreate, instancier les composants:
editText = (EditText) findViewById(R.id.EditTextPrenom);

button = (Button) findViewById(R.id.ButtonEnvoyer);
Ajouter un écouteur sur le bouton:

button.setOnClickListener(
new OnClickListener() {
public void onClick(View v) {
prenom = editText.getText().toString();
Toast.makeText(hello.this, "Bonjour " + prenom + " !", Toast.LENGTH_LONG).show();
((TextView)findViewById(R.id.TextViewHello)).setText("Bonjour " + prenom + " !");
}
}
);
Sauvegarder puis tester sur votre émulateur déjà lancé.
2

Commen Cons Par L'interface Graphique - . .: TP N 1 Premier Pas Sur Android

Transféré par

Droits d'auteur :

Formats disponibles

Commen Cons Par L'interface Graphique - . .: TP N 1 Premier Pas Sur Android

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Commen Cons Par L'interface Graphique - . .: TP N 1 Premier Pas Sur Android

Transféré par

Droits d'auteur :

Formats disponibles

Informatique Mobile

Commençons par l’interface graphique . . .

Figure 1 – Interface de l’application

– Lui attribuer l’identifiant EditTextPrenom.

Maintenant parlons java . . .

Ensuite, déclarer les composants dynamiques:

private EditText editText;

Dans la méthode onCreate, instancier les composants:

editText = (EditText) findViewById(R.id.EditTextPrenom);

Ajouter un écouteur sur le bouton:

Vous aimerez peut-être aussi