Cours développement d’application mobile

native

Chapitre2:
Création d’interfaces
utilisateur

Hend Ben Ayed kharrat

2023-2024
 2 Ordre du Jour
• Activités

• Relations entre un source Java et des ressources Layouts et

vues

• On ne s’intéresse qu’à la mise en page. L’activité des interfaces

sera étudiée la semaine prochaine.

2/44
3

Applications et activités
 Composition d’une application
L’interface utilisateur d’une application Android est composée
d’écrans(layout). Un écran correspond à une activité, ex:
• afficher des informations
• éditer des informations
Les dialogues et les pop-up ne sont pas des activités, ils se
superposent temporairement à l’écran d’une activité.
Android permet de naviguer d’une activité à l’autre, ex :
• une action de l’utilisateur, bouton,
• menu où l’application fait aller sur l’écran suivant
• le bouton back ramène sur l’écran précédent.

4
Création d’un écran

Chaque écran est géré par une instance d’une sous-classe perso de
Activity. Sa méthode onCreate définit, entre autres, ce qui doit être
affiché sur l’écran :

Public class MainActivity extends Activity {

@Override
Protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

L’interface est mise en place par setContentView(identifiant de

ressource).
5
 6/44

Ressources

6/44
 Identifiant de ressource
7/44

La méthode setContentView spécifie l’identifiant de l’interface à

afficher dans l’écran : R.layout.main.
C’est un entier, identifiant d’une disposition de vues : un layout.
Le SDK Android construit automatiquement une classe statique
appelée R. Elle ne contient que des constantes entières
groupées par catégories : id, layout, menu. . . :
Public final class R {
Public static final class string {
Public static final int app_name=0x7f080000; public
static final int message=0x7f080001;
}
Public static final classlayout {
public static final int main=0x7f030000;
}

7
La classe R

Cette classe R est générée automatiquement par ce que vous mettez

dans le dossier res : dispositions, identifiants, chaînes. .

Certaines de ces ressources sont des fichiers XML, d’autres sont des
images PNG.
Par exemple, res/values/strings.xml:
<?xmlversion="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Exemple</string>
<string name="message">Bonjour !</string>
<resources>

8
Espaces de nommage dans un fichier XML

Dans le cas d’Android, il y a un grand nombre d’éléments et

d’attributs normalisés. Pour les distinguer, ils ont été regroupés dans
le namespace android.
Dans la norme XML, le namespace par défaut n’est jamais appliqué
aux attributs, donc il faut mettre le préfixe sur chacun d’eux.
<menu xmlns:android=
"http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:showAsAction="never"
android:title="Configuration"/>

</menu> 9
Création d’une interface par programme

Il est possible de créer une interface par programme, comme avec

JavaFX et Swing, mais c’est assez compliqué :

Protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
Context ctx = getApplicationContext();
TextView tv =newTextView(ctx);
tv.setText("Demat !");
RelativeLayout rl =new RelativeLayout(ctx);
LayoutParams lp =new LayoutParams();
lp.width = LayoutParams.MATCH_PARENT;
lp.height = LayoutParams.MATCH_PARENT;
rl.addView(tv, lp);
setContentView(rl);
}
10
Programme et ressources
Il est donc préférable de stocker l’interface dans un fichier
res/layout/main.xml:

<RelativeLayout ...>
<TextView android:text="Bonjour!" ... />
</RelativeLayout>

qui est référencé par son identifiant R.layout.nom_du_fichier

(ici c’est main) dans le programme Java :

Protected void onCreate(Bundle bundle) {

super.onCreate(bundle);
setContentView(R.layout.main);
}
11
Ressources de type chaînes

Dans res/values/strings.xml, on place les chaînes de l’application,

au lieu de les mettre en constantes dans la source :

<?xmlversion="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">HelloWorld</string>
<string name="main_menu">Menu principal</string>
<string name="action_settings">Configuration</string>
<string name="bonjour">Bonjour!</string>
</resources>

Intérêt : pouvoir traduire une application sans la recompiler.

12
Traduction des chaînes (localisation)

Lorsque les textes sont définis dans res/values/strings.xml, il suffit de

faire des copies du dossier values, en values-us, values-fr, values-de,
etc. et de traduire les textes en gardant les attributs name. Voici par
exemple res/values-de/strings.xml :

<?xmlversion="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">HelloWorld</string>
<string name="main_menu">Hauptmenü</string>
<string name="action_settings">Einstellungen</string>
<string name="bonjour">Guten Tag</string>
</resources>
Le système android ira chercher automatiquement le bon texte en
fonction des paramètres linguistiques configurés par l’utilisateur.
13
Référencement des ressources texte
Voici comment affecter une ressource chaîne à une vue en Java :

TextView tv =new TextView(ctx);

tv.setText(R.string.bonjour);

R.string.bonjour désigne le texte de

<string name="bonjour">... dans le fichier res/values*/strings.xml
Voici comment spécifier un titre de label dans un layout.xml:
<RelativeLayout>
<TextView android:text="@string/bonjour"/>
</RelativeLayout>

@string/nom est une référence à une ressource, la chaînede

res/values/strings.xml ayant cenom.
14
Identifiants et vues
La méthode setContentView fait afficher le formulaire défini par
l’identifiant R.layout indiqué. Lorsque l’application veut manipuler
l’une de ses vues, elle doit faire utiliser R.id.symbole, ex :
TextView tv = findViewById(R.id.message);
avec la définition suivante dans res/layout/main.xml:
<RelativeLayout>
<TextViewandroid:id="@+id/message"
android:text="@string/bonjour"/>
</RelativeLayout>
La notation @+id/nom définit un identifiant pour leTextView.

l'option la plus courante pour accéder à une vue à partir du

code de l'application impliquait l'écriture de code pour
rechercher manuellement une vue en fonction de son
identifiant via la méthode findViewById()
15
View Binding
Inconvénient de findViewById() : possible d’obtenir une référence à une vue qui n'a pas encore
été créée dans la mise en page, ce qui conduit à une valeur nulle.
16/44

Lorsque View Binding est activée dans un module d'application, Android Studio génère
automatiquement une classe de liaison pour chaque fichier de mise en page. Les layout views
sont accessibles depuis le code à l'aide de View Binding sans utiliser findViewById() .

Android Studio Girafe ne supporte pas View Binding  solution

1. Modifeir le fichier build.gradle.kts
2. Recompiler votre projet avec Sync Now
3. Modifier le fichier MainActivity.javca

16
@id/nom ou @+id/nom?

Il y a les deux notations :

@id/nom pour référencer un identifiant déjà défini (ailleurs)

@+id/nom pour définir (créer) cet identifiant
Exemple, le Button btn désigne le TextView titre :
<RelativeLayoutxmlns:android="..." ... >
<TextView ...
android:id="@+id/titre"
android:text="@string/titre"/>
<Button ...
android:id="@+id/btn"
android:layout_below="@id/titre"
android:text="@string/ok"/>
</RelativeLayout>
17
Images : R.drawable.nom

De la même façon, les images PNG placées dans res/drawableet

res/mipmaps-* sont référençables:

<ImageView
android:src="@drawable/velo"
android:contentDescription="@string/mon_velo"/>

La notation @drawable/nom référence l’image portant ce nom dans

l’un des dossiers.
NB: les dossiers res/mipmaps-* contiennent la même image à des
définitions différentes, pour correspondre à différents téléphones et
tablettes. Ex: mipmap-hdpi contient des icônes en 72x72 pixels.

18
Tableau de chaînes : R.array.nom

Voici un extrait du fichier res/values/arrays.xml:

<resources>
<string-array name="planetes">
<item>Mercure</item>
<item>Venus</item>
<item>Terre</item>
<item>Mars</item>
</string-array>
</resources>

Dans le programme Java, il est possible de faire :

Resources res = getResources();
String[] planetes = res.getStringArray(R.array.planetes);

19
 Autres

D’autres notations existent :

@style/nom pour des définitions de res/style
@menu/nom pour des définitions de res/menu
Certaines notations, @package:type/nom font référence àdes
données prédéfinies, comme :
@android:style/TextAppearance.Large
@android:color/black

20
Mise en page

21/44
 Construire une IHM
Construire une IHM, c'est mettre des composants graphiques les uns
à l'intérieur des autres
• Les ensembles de composants graphiques sont des classes. On
aura la classe des boutons, la classe des cases à cocher, etc.
• Un composant graphique particulier sera une instance
particulière d'une classe. Par exemple le bouton "Quitter" et le
bouton ''Sauvegarder" d'une
• IHM seront deux instances de la classe des boutons

Un composant graphique a 3 parties :

• les données qu'il représente : le modèle (model)
• le dessin d'affichage : la vue (view)
• ce qui prend en charge les actions de l'utilisateur sur ce
composant : le controleur (controler)

INTERESSONS NOUS A LA PARTIE VIEW

22
 Construire une IHM
Android fournit une collection de vues et de groupes de vues qui offrent :
 les principales entrées (textes, champs de texte, listes, etc.) ;
 différents modèles d’organisation (linéaire, etc.).

Une classe est associée à chaque type de vue ou groupe de vue.

Un groupe de vues contient d’autres vues (les gabarits conteneurs des vues)
 Un groupe de vues organise l’affichage des vues qu’il contient
 Un groupe de vues est une vue.

Des V iew G ro u p
pa r t icu lier s
sont pr éd éfin is :
ce sont les gabarits
(layout en anglais)
qui proposent une
prédisposition
des objets graphiques
Structure d’une interface Android
Un écran Android de type formulaire est généralement composé de
plusieurs vues. Entre autres :
TextView, ImageView : titre, image
EditText : texte àsaisir
Button, CheckBox : bouton à cliquer, case àcocher

Ces vues sont alignées à l’aide de groupes de sous-classes de

ViewGroup, éventuellement imbriqués :
•LinearLayout : positionne ses vues en ligne ou colonne
•RelativeLayout : positionne ses vues l’une par rapport à l’autre
•TableLayout : positionne ses vues sous forme d’un tableau
•ScrollView, un récipient conçu pour aider à la mise en œuvre des
conteneurs de défilement.
•ConstraintLayout , ce gestionnaire de mise en page est recommandé
pour la plupart des mises en page. Permet a des mises en page
complexes d’être créé rapidement et facilement sans qu'il soit
nécessaire d'imbriquer d'autres types de mise en page les uns dans les
autres.
24
•Autres (ListView, GridView, WebView, MapView, ...)
Groupe de vues LinearLayout

Il range ses vues soit horizontalement, soit verticalement

<LinearLayout android:orientation="horizontal"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:text="Ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button android:text="Annuler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Il faut seulement définir l’attribut android:orientation à
"horizontal" ou "vertical".
25
android:gravity : définit l'alignement des éléments.
 26/44
Groupe de vues LinearLayout
Il y a une différence entre: android:gravity et
android:layout_gravity

android: gravity spécifie la manière de placer le contenu d'un

objet, à la fois sur les axes : x (abcisses) –y (ordonnées) , à
l'intérieur de l'objet lui-même.

•android:gravity="center" => centrer le contenu du

composant (par exemple centrer le texte)

•android: layout_gravity="center" => centrer le composant

lui-même dans son conteneur (layout)

26
Arbre des vues

Les groupes et vues forment un arbre:

27
Représentation en XML

Cet arbre s’écrit en XML :

<LinearLayout android:id="@+id/groupe1" ...>

<TextView android:id="@+id/titre" .../>
<EditText android:id="@+id/saisie" .../>
<LinearLayout android:id="@+id/groupe2" ...>
<Button android:id="@+id/ok" .../>
<Button android:id="@+id/raz" .../>
<Button android:id="@+id/annuler" .../>
</LinearLayout>
</LinearLayout>

28
Paramètres de positionnement

La plupart des groupes utilisent des paramètres de placement sous

forme d’attributs XML. Par exemple, telle vue à droite de telle autre,
telle vue la plus grande possible, telle autre la plus petite.
Ces paramètres sont de deux sortes :
• ceux qui sont demandés pour toutes les vues :
android:layout_width et android:layout_height,
• ceux qui sont demandés par le groupe englobant et qui en sont
spécifiques, comme
android:layout_weight, android:layout_alignParentBottom,
android:layout_centerInParent...

29
Paramètres généraux
Toutes les vues doivent spécifier ces deux attributs :

android:layout_width largeur de la vue

android:layout_height hauteur de la vue

Ils peuvent valoir :

"wrap_content" : la vue est la plus petite possible
"match_parent" : la vue est la plus grande possible "valeur dp":
une taille fixe, ex : "100dp" mais c’est peu recommandé, sauf
0dp pour un cas particulier, voir plus loin
Les dp sont une unité de taille indépendante de l’écran:
100dp font 100 pixels sur un écran de 100 dpi (100 dots per inch)
tandis qu’ils font 200 pixels sur un écran 200dpi.
Ça fait la même taille apparente.
30
Autres paramètres géométriques

Il est possible de modifier l’espacement des vues :

Padding espace entre le texte et les bords, géré par chaque vue
Marginespace autour des bords, géré par les groupes

31
Marges et remplissage

On peut définir les marges et les remplissages séparément surchaque

bord (Top, Bottom, Left, Right), ou identiquement sur tous :

<Button
android:layout_margin="10dp"
android:layout_marginTop="15dp"
android:padding="10dp"
android:paddingLeft="20dp"/>

32
33/44

CONTENEURS :ATTRIBUTS PRINCIPAUX

Orientation
Sens de placement des vues dans un conteneur
android:orientation = vertical | horizontal
Taille
Surface prise par la vue
android:layout_width = ??px | fill_parent | wrap_content
android:layout_height = ??px | fill_parent | wrap_content

Les unités dp et sp sont indépendants de la résolution de l’écran, Il

est recommandé d’utiliser dp pour les objets et sp pour les polices
du texte.

Gravité
Alignement d'une vue dans son conteneur
android:layout_gravity = left | center_horizontal | top | bottom | right
Pondération des tailles
Une façon intéressante de spécifier les tailles des vues dans un
LinearLayout consiste à leur affecter un poids avec l’attribut
android:layout_weight.
Un layout_weight égal à 0 rend la vue la plus petite possible
Un layout_weight non nul donne une taille correspondant au
rapport entre ce poids et la somme des poids des autres vues
Pour cela, il faut aussi fixer la taille de ces vues (ex :
android:layout_width) soit à "wrap_content", soit à "0dp".
Si la taille vaut "wrap_content", alors le poids agit seulement sur
l’espace supplémentaire alloué aux vues.
Mettre “0dp” pour que ça agisse sur la taille entière.

34
Exemple de poids différents

Voici 4 LinearLayout horizontaux de 3 boutons ayant des poids égaux

à leurs titres. En 3e ligne, les boutons ont une largeur de 0dp

35
36/44
LINEARLAYOUT: EXEMPLE

36
Groupe de vues TableLayout
C’est une variante du LinearLayout : les vues sont rangées en
lignes de colonnes bien tabulées. Il faut construire une structure
XML comme celle-ci.
<TableLayout ...>
<TableRow>
<item 1.1... />
<item 1.2... />
</TableRow>
<TableRow>
<item 2.1... />
<item 2.2... />
</TableRow>
<TableLayout>

NB : les <TableRow> n’ont aucun attribut.

37
Largeur des colonnes d’un TableLayout
Ne pas spécifier android:layout_width dans les vues d’un
TableLayout, car c’est obligatoirement toute la largeur du tableau.
Seul la balise <TableLayout> exige cetattribut.
Deux propriétés intéressantes permettent de rendre certaines
colonnes étirables. Fournir les numéros (première = 0).
android:stretchColumns : numéros des colonnes étirables
android:shrinkColumns : numéros des colonnes reductibles

<TableLayout
android:stretchColumns="1,2"
android:shrinkColumns="0,3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
38
Largeur des colonnes d’un TableLayout
• Par défaut, chaque colonne sera dimensionnée en fonction de la "naturelle"
de la plus grande widget dans cette colonne.
• Si votre contenu est moins large que l'espace disponible, vous pouvez utiliser
la propriété TableLayout: android:stretchColumns=“…”
• Sa valeur doit être un nombre unique de colonne (0-based) ou une liste
séparée par des virgules des numéros de colonne. Ces colonnes seront
étirés de manière occuper tout l'espace encore disponible sur la ligne.
Exemple : nous étirons les colonnes 2, 3, et 4 pour remplir le reste de la
ligne.

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myTableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff0033cc"
android:stretchColumns="2,3,4"
android:orientation="vertical" > 39
<TableRow >
40/44

TABLELAYOUT : DISPOSITION MATRICIELLE

<TableLayout>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button" />

</TableRow>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button2"
/>
</TableRow>
</TableLayout>

40
Groupe de vues RelativeLayout

C’est le plus complexe à utiliser mais il donne de bons résultats. Il

permet de spécifier la position relative de chaque vue à l’aide de
paramètres complexes : (LayoutParams)
Tel bord aligné sur le bord du parent ou centré dans son
parent :
• android:layout_alignParentTop,
android:layout_centerVertical...
Tel bord aligné sur le bord opposé d’une autre vue :
• android:layout_toRightOf, android:layout_above,
android:layout_below...
Tel bord aligné sur le même bord d’une autre vue :
• android:layout_alignLeft,
android:layout_alignTop...
41
42/44
Groupe de vues RelativeLayout

• android:layout_alignParentTop : si true, le haut

de la View est calé sur le haut de la vue parente

• android:layout_centerVertical : si true, la View

est centrée verticalement à l'intérieur de la vue
parente

• android:layout_below : le haut de la vue est en

dessous de la View indiquée (par son l’id)

• android:layout_toRightOf : le coté gauche de la

vue est à droite de la View indiquée(par son l'id)
42
43/44
Groupe de vues RelativeLayout
Pour se référer au conteneur :
• android: layout_alignParentTop indique que le haut du
composant doit être aligné avec le haut du conteneur
• android: layout_alignParentBottom en bas du composant
doit être aligné avec le bas du conteneur
• android: layout_alignParentLeft côté gauche du
composant
doit être aligné avec le côté gauche du conteneur
• android: layout_alignParentRight côté droit du composant
doit être aligné avec le côté droit du conteneur
• android: layout_centerInParent le composant doit être
positionnée à la fois horizontalement et verticalement au
centre du conteneur
• android: layout_centerHorizontal le composant doit être
positionné horizontalement au centre du conteneur
• android: layout_centerVertical le widget doit être
positionnée verticalement au centre du conteneur 43
Groupe de vues RelativeLayout
Pour se réferer à d’autres composants:
• android: layout_above indique que le composant doit être placé au
44/44
dessus du composant référencé dans la propriété
• android: layout_below indique que le composant doit être placé au
dessous du composant référencé dans la propriété
• android: layout_toLeftOf indique que le composant doit être placé à la
gauche du composant référencé dans la propriété
• android: layout_toRightOf indique que le composant doit être placé à
la
droite du composant référencé dans la propriété
• android: layout_alignTop indique que le haut du composant doit être
aligné avec le haut du composant référencé dans la propriété
• android: layout_alignBottom indique que le bas du composant doit
être
aligné avec le bas du composant référencé dans la propriété
• android: layout_alignLeft indique que le gauche du composant doit
être
aligné avec la gauche du composant référencé dans la propriété
• android: layout_alignRight indique que le droit du composant doit être
aligné avec la droite du composant référencé dans la propriété
• android: layout_alignBaseline indique que les lignes de base des deux
composants doivent être alignés 44
Exemple: android: layout_below = "@ id /ediUserName"
Utilisation d’un RelativeLayout
Pour bien utiliser un RelativeLayout, il faut commencer par définir
les vues qui ne dépendent que des bords du Layout : celles qui sont
collées aux bords ou centrées.

<TextView android:id="@+id/titre"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true" .../>

Puis créer les vues qui dépendent des vues précédentes.

<EditText android:layout_below="@id/titre"
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true" .../>
Et ainsi de suite. 45
RELATIVELAYOUT: EXEMPLE

46
Groupe de vues ConstraintLayout
47/44ConstraintLayout
utilise des contraintes pour contrôler l'alignement et
le positionnement des widgets par rapport à l'instance
ConstraintLayout parent, aux lignes directrices, aux barrières et aux
autres widgets de la mise en page.

Références

Constraint Layout Tutorial With Example In Android Studio [Step by Step]

CONSTRAINT LAYOUT BASICS - Android Fundamentals

LES GABARITS: SCROLLVIEW LAYOUT

Lorsque nous avons plus de données que ce qui peut être sur
un seul écran, vous pouvez utiliser la ScrollView control.

• Il offre un accès glissement de défilement ou pour les

données. De cette façon, l'utilisateur ne peut voir qu'une
partie de votre mise en page en une seule fois, mais le
reste est disponible via le défilement.

• Ceci est similaire à la navigation un page Web

volumineuse qui oblige l'utilisateur à faire défiler la page
pour voir la partie inférieure du formulaire.

48
LES GABARITS: SCROLLVIEW LAYOUT

Pour appliquer ce layout, on met à son intérieur un autre type de layout (LinearLayout par
exemple) dans laquelle on met un contenu.

<?xml version ="1.0" ?>

<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingMultiplier="2"
android:text="@string/texteAndroid"
android:textColor="@android:color/black" />
</LinearLayout>
</ScrollView>

HORIZONTAL SCROLLVIEW
Ce layout nous permettra de défiler le contenu mais cette fois-ci d’une manière horizontale.
Exemple:

49
HORIZONTALSCROLLVIEW (2)
<?xml version ="1.0"?>
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="72dp"
android:layout_weight="0.07"
android:src="@drawable/contact" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="72dp"
android:layout_weight="0.07"
android:src="@drawable/support" />
</LinearLayout>
</HorizontalScrollView>

50
ScrollView et HorizontalScrollView
51
Composants d’interface

52
Vues
Android propose un grand nombre de vues, à découvrir en TP :
Textes : titres, saisies
Boutons, cases à cocher
Curseurs
Beaucoup ont des variantes. Ex: saisie de texte = no de téléphone ou
adresse ou texte avec suggestion ou ...
À noter que les vues évoluent avec les versions d’Android, certaines
changent, d’autres disparaissent.

53
 TextView

Le plus simple, il affiche un texte statique, comme un titre. Son

libellé est dans l’attribut android:text.

<TextView
android:id="@+id/tvtitre"
android:text="@string/titre"
... />

On peut le changer dynamiquement :

TextView tvTitre = findViewById(R.id.tvtitre);

tvTitre.setText("blablabla");

54
39/44
Button
L’une des vues les plus utiles est le Button:

<Button
android:id="@+id/btn_ok"
android:text="@string/ok"
... />
En général, on définit un identifiant pour chaque vue active, ici :
android:id="@+id/btn_ok"
Son titre est dans l’attribut android:text.
Voir la semaine prochaine clicpour son activité : réaction à unclic.

Intercepter l’évènement de CLICK

Button b = (Button)findViewById(R.id.Button01);
b.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(v.getContext(), « C’est un clic!",Toast.LENGTH_LONG).show();
}
});
55
}
Bascules

Les CheckBox sont des cases à cocher :

<CheckBox
android:id="@+id/cbx_abonnement_nl"
android:text="@string/abonnement_newsletter"
... />

Les ToggleButton sont unevariante : . On peut définir le

texte actif et le texte inactif avec android:textOn et
android:textOff.

56
EditText

Un EditTextpermet de saisir un texte :

<EditText
android:id="@+id/email_address"
android:inputType="textEmailAddress"
... />

L’attribut android:inputType spécifie le type de texte : adresse,

téléphone, etc. Ça définit le clavier qui est proposé pour la saisie.

57
 LES IMAGES

Déclaration dans le layout

<ImageView android:id="@+id/logoISET"
android:src="@drawable/iset"
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
</ImageView>

Créer « dynamiquement »

ImageView image = new ImageView(this);

image.setImageResource(R.drawable.iset);
gabarit.addView(image);

58
Autres vues

On reviendra sur certaines de ces vues les prochaines semaines, pour

préciser les attributs utiles pour une application. D’autres vues
pourront aussi être employées à l’occasion.

59