Développement Android

Formation développement Android, tutoriel & guide de travaux pratiques en pdf.

Les interfaces utilisateur

On commence par créer une interface utilisateur graphique. La gestion des événements liés à celle-ci sera entrevue en TP et approfondie plus tard.

Rendu visuel

Dans une application Android, l’interface utilisateur est construite à l’aide d ‘objets de type View et ViewGroup. Les objets de type View sont les unités de base, i.e. des composants gérant les interactions avec l’utilisateur. Les objets de type ViewGroup organisent la manière dont sont présents les composants. UnViewGroup est classiquement défini à l’aide d’un Layout.

Interface : programmation Java ou déclaration XML

La construction d’interface peut se faire selon deux approches complémentaires : la première est programmatique (Java) et la seconde est une déclaration à l’aide d’un fichier XML.

Programme Java

Dans la version programmatique, un objet ViewGroup est instancié dans le code Java (à l’aide du mot-clé new) comme un Layout particulier (ligne 4). Puis chaque composant est instancié (lignes 4 et 6) et ajouté à ce ViewGroup via la méthodeaddView (ligne 9 et 10) et enfin le ViewGroup est attaché à l’activité viasetContentView.
1 p u b l i c c l a s s P r o g r a m e x t e n d s A c t i v i t y {
2 p u b l i c v o i d o n C r e a t e ( B u n d l e s a v e d I n s t a n c e S t a t e ) {
3 s u p e r . o n C r e a t e ( s a v e d I n s t a n c e S t a t e ) ;
4 L i n e a r L a y o u t l l a y o u t = new L i n e a r L a y o u t ( t h i s ) ;
5 l l a y o u t . s e t O r i e n t a t i o n ( L i n e a r L a y o u t . VERTICAL ) ;
6 T e x t V i e w n l b l = new T e x t V i e w ( t h i s ) ;
7 n l b l . s e t T e x t ( « Nom » ) ;
8 E d i t T e x t n e d i t = new E d i t T e x t ( t h i s ) ;
9 l l a y o u t . a d d V i e w ( n l b l ) ;
10 l l a y o u t . a d d V i e w ( n e d i t ) ;
11 s e t C o n t e n t V i e w ( l l a y o u t ) ;
12 }
13 }
On se passe complètement du fichier XML de description de l’organisation (d ossier res/layout) dans une telle approche programmatique.

Déclaration XML

La philosophie est autre ici : l’organisation visuelle de l’activité est statiqueet définie une fois pour toute dans un fichier XML du dossier res/layout. Celui donné ci dessous aura la même interprétation visuelle que le programme donné avant.
<?xml version= »1.0″ encoding= »utf-8″?>
<LinearLayout xmlns:android= »http://schemas.android.com/apk/res/android »
android:orientation= »vertical »
android:layout_width= »fill_parent »
android:layout_height= »fill_parent »>
<TextView
android:id= »@+id/txtvname »
android:layout_width= »fill_parent »
android:layout_height= »wrap_content »
android:text= »@string/name » />
<EditText
android:id= »@+id/edtname »
android:layout_width= »fill_parent »
android:layout_height= »wrap_content »/>
</LinearLayout>
Il reste uniquement à attacher cette organisation à l’activité via setContentView (ligne 4).
1 p u b l i c c l a s s P r o g r a m e x t e n d s A c t i v i t y {
2 p u b l i c v o i d o n C r e a t e ( B u n d l e s a v e d I n s t a n c e S t a t e ) {
3 s u p e r . o n C r e a t e ( s a v e d I n s t a n c e S t a t e ) ;
4 s e t C o n t e n t V i e w ( R . l a y o u t . m a i n ) ;
5 }
6 }

Les principaux composants graphiques

Exercice

On considère une activité dont la vue est liée au layout défini par les fichiers res/layout/main.xml et res/values/arrays.xml ci-dessous. Dire quels éléments vont être affichés, comment . . .
1 < ? xml v e r s i o n = » 1 . 0 » e n c o d i n g = » u t f −8″ ? >
2 < L i n e a r L a y o u t x m l n s : a n d r o i d = » h t t p : / / s c h e m a s . a n d r o i d . com / a p k / r e s / a n d r o i d »
3 a n d r o i d : o r i e n t a t i o n = » v e r t i c a l »
4 a n d r o i d : l a y o u t _ w i d t h = » f i l l _ p a r e n t »
5 a n d r o i d : l a y o u t _ h e i g h t = » f i l l _ p a r e n t » >
6 < CheckBox a n d r o i d : i d = « @+ i d / cbxYN »
7 a n d r o i d : l a y o u t _ w i d t h = » 20 dp »
8 a n d r o i d : l a y o u t _ h e i g h t = » 20 dp »
9 a n d r o i d : c h e c k e d = » f a l s e » / >
10 < R a d i o G r o u p a n d r o i d : i d = « @+ i d / r g G r o u p 1 »
11 a n d r o i d : l a y o u t _ w i d t h = » f i l l _ p a r e n t »
12 a n d r o i d : l a y o u t _ h e i g h t = » w r a p _ c o n t e n t »
13 a n d r o i d : o r i e n t a t i o n = » v e r t i c a l » >
14 < R a d i o B u t t o n a n d r o i d : i d = « @+ i d / RB1 » a n d r o i d : t e x t = » B u t t o n 1 » / >
15 < R a d i o B u t t o n a n d r o i d : i d = « @+ i d / RB2 » a n d r o i d : t e x t = » B u t t o n 2 » / >
16 < R a d i o B u t t o n a n d r o i d : i d = « @+ i d / RB3 » a n d r o i d : t e x t = » B u t t o n 3 » / >
17 < / R a d i o G r o u p >
18 < S p i n n e r a n d r o i d : i d = « @+ i d / s p n S a i s o n s »
19 a n d r o i d : l a y o u t _ w i d t h = » w r a p _ c o n t e n t »
20 a n d r o i d : l a y o u t _ h e i g h t = » w r a p _ c o n t e n t »
21 a n d r o i d : e n t r i e s = » @ a r r a y / s a i s o n s » / >
22 < D a t e P i c k e r a n d r o i d : i d = « @+ i d / d P d a t e »
23 a n d r o i d : l a y o u t _ w i d t h = » w r a p _ c o n t e n t »
24 a n d r o i d : l a y o u t _ h e i g h t = » w r a p _ c o n t e n t » / >
25 < I m a g e V i e w a n d r o i d : i d = « @+ i d / i m g I c o n »
26 a n d r o i d : l a y o u t _ w i d t h = » w r a p _ c o n t e n t »
27 a n d r o i d : l a y o u t _ h e i g h t = » w r a p _ c o n t e n t »
28 a n d r o i d : l a y o u t _ g r a v i t y = » c e n t e r »
29 a n d r o i d : s r c = » @ d r a w a b l e / i c o n » / >
30 < / L i n e a r L a y o u t >
1 < ? xml v e r s i o n = » 1 . 0 » e n c o d i n g = » u t f −8″ ? >
2 < r e s o u r c e s >
3 < a r r a y name= » s a i s o n s » >
4 p r i n t e m p s 
5 e t e 
6 a u t o m n e 
7 h i v e r 
8 < / a r r a y >
9 < / r e s o u r c e s >

Les Layouts

Les Layouts organisent le positionnement des composants graphiques dans l’interface utilisateur. On énonce les principales ci-dessous. On pourra se référer àhttp://developer.android.com/guide/topics/ui/ layout-objects.html et http://developer.android.com/resources/tutorials/views/index.
html

FrameLayout

On empile les composant les uns sur les autres. Chacun est positionné dansle coin en haut à gauche en masquant plus ou moins celui du dessous sauf en cas de composant transparent.

LinearLayout

Cette organisation aligne les composants dans une seule direction : verticalement ou horizontalement (en fonction de la valeur l’attribut android:orientation). Gère l’alignement (android:gravity) du composant.

TableLayout

Cette organisation agence les composants selon un quadrillage (comme avec l’élément<table> en HTML). Il utilise pour cela l’élément<tableRow> qui déclare une nouvelle ligne. Les cellules sont définies par les composants qu’on ajoute aux lignes.

RelativeLayout

Permet de déclarer des postions relativement par rapport au parent ou par rapport à d’autres composants. Il n’est pas facile à utiliser et on essaiera de s’en passer.

Travaux Pratiques

Réaliser le TP intitulé « Les menus de l’utilisateur : Lanceur, menus et sudoku .»

Les menus des activités

On se restreint ici aux menus que l’on peut lancer à partir du bouton menu d u téléphone. Le modèle de construction est à nouveau basé sur le patron MVC :
1. le menu est défini statiquement en XML et gonflé via un inflater,
2. son contrôle se fait en gérant un événement et
3. le modèle est modifié en accédant à l’unique instance de celui-ci de manière statique.

Définition statique des menus

Les menus sont enregistrés dans un fichier xml du dossier /res/menu du projet. Ils contiennent éventuellement des sous-menus. Ci dessous on donne le fichier /res/menu/sudoku_menu.xml qui définit deux menus et un sous menu.
<?xml version= »1.0″ encoding= »utf-8″?>
<menu xmlns:android= »http://schemas.android.com/apk/res/android »> <item android:id= »@+id/menu_param »
android:icon= »@drawable/ic_menu_preferences »
android:title= »@string/libelle_param »>
<menu>
<group and
android:checkableBehavior= »single »>
<item android:id= »@+id/menu_n1″
android:title= »@string/libelle_niv_1″ />
<item android:id= »@+id/menu_n2″
android:title= »@string/libelle_niv_2″ />
<item android:id= »@+id/menu_n3″
android:title= »@string/libelle_niv_3″ />
</group>
</menu>
</item>
<item android:id= »@+id/menu_quitter » android:icon= »@drawable/ic_menu_close_clear_cancel » android:title= »@string/libelle_quitter » />
</menu>

Exercices

1. Que sont @drawable/ic_menu_close_clear_cancel et ic_menu_preferences ? Où récupérer de tels objets ?
2. Comment compléter le projet pour qu’il devienne exécutable ?
3. A quoi servent les lignes <menu>…</menu> ?

Gonflage du menus défini en XML

Lors de l’appuie sur le bouton menu du telephone, la méthodeonCreateOptionsMenu(Menu menu) est invoquée dans l’objectif d’associer un menu xml à l’objet menu passé en paramètre.
Comme le LayoutInflater gonflait les layouts défini en xml, le MenuInflater gonfle les menus définis en xml. On effectue l’association comme suit :
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.sudoku_menu, menu);
return true;
}

Gestion des événements liés aux menu

La méthodeonOptionsItemSelected(MenuItem item) de l’activité où est crée le menu est invoqué lorsqu’un élément est sélectionné dans le menu apparu sur le téléphonesuffit.I de donner un code traitant tous les items du menu (et des éventuels sous-menus) comme suit :
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle item selection
switch (item.getItemId()) { case R.id.menu_n1:
…
return true;
case R.id.menu_quitter: this.finish();
return true;
}
}

Exercice

Compléter le code pour qu’on puisse choisir entre trois niveaux et que cela charge trois grilles différentes corre-spondantes aux niveaux.

Cycle de vie d’une activité

Méthodes du cylce de vie

La figure 3.1 résume le cycle de vie d’une activité en montrant quelles méthodes sont appelées lors des événement qu’elle peut rencontrer.
1. onCreate : Cette méthode est tout d’abord invoquée lorsque l’activité est créee :’estC là qu’on associe la vue, initialise ou récupère les données persistantes. . . La méthodeonCreate reçoit toujours en paramètreun objet Bundle qui contient l’état dans lequel était l’activité avant l’invocation.
2. onStart : Cette méthode est invoquée avant que l’activité soit visible et Une fois quel’exécution de cette méthode est finie,
– si l’activité apparaît en premier plan, c’est onResume qui est invoquée
– si l’activité ne peut apparaître en premier plan, c’est onStop qui est invoquée
3. onResume : Cette méthode est appelée immédiatement avant que l’activité ne passe en Ellesteappelée soit parce qu’elle vient d’être (re)lancée, par exemple lorsqu’une autre ctivitéa a pris le devant puis a été fermée, remettant votre activité en premier plan.
C’est souvent l’endroit où l’on reconstruit les interfaces en fonction de ce qui s’est passé depuis que l’utilisateur l’a vue pour la dernière fois.
4. onPause : Lorsque l’utilisateur est détourné de votre acivité, en la passant en condse plan, c’est cette méthode qui est invoquée avant de pouvoir afficher la nouvelle activité en premie plan. Une fois cette méthode exécutée, Android peut tuer à tout moment l’activité sans vous redonner le contrôle. C’est donc là qu’on arrête proprement les services, threads,. . . et que l’on sauvegarde les données utiles à l’activité lorsqu’elle redémarera.
5. onStop : Cette méthode est invoquée lorsque l’activité n’est plus visible soit par cequ’une autre est passée en premier plan, soit parce qu’elle est en cours de destruction.

Exercice

Réaliser le TP intitulé « Cycle de vie d’une activité Android : Vie, pause et mort».

1 Introduction à l’OS embarqué Android
I Composants principaux d’une application
I.1 Une activité
I.2 Un service
I.3 Une Intention
I.4 Un fournisseur de contenus
II Organisation d’un projet Android
II.1 Arborescence
II.2 Travaux Pratiques : Hello World
II.3 Exercice
2 Les interfaces utilisateur
I Rendu visuel
II Interface : programmation Java ou déclaration XML
II.1 Programme Java
II.2 Déclaration XML
III Les principaux composants graphiques
III.1 Exercice
IV Les Layouts
IV.1 FrameLayout
IV.2 LinearLayout
IV.3 TableLayout
IV.4 RelativeLayout
IV.5 Travaux Pratiques
V Les menus des activités
V.1 Définition statique des menus
V.2 Exercices
V.3 Gonflage du menus défini en XML
V.4 Gestion des événements liés aux menu
V.5 Exercice
3 Cycle de vie d’une activité
I Méthodes du cylce de vie
II Exercice
4 Sauvegarder des données
I Les préférences
I.1 Méthodes
I.2 Exercices
I.3 Travaux Pratiques
II Les fichiers
III Le cloud
III.1 Hériter de la classe BackupAgentHelper
III.2 Modifier le manifest pour toute l’application
III.3 La demande de synchronisation
III.4 Évaluer le développement
III.5 Travaux pratiques
5 Récupération périodique de données grâce à un service
I Organisation générale
II L’application web
II.1 La basse de données
II.2 Les pages PHP
III L’application Android
III.1 Vue organisée à l’aide d’onglets
III.2 L’envoi de messages
III.3 Le service de réception de messages
III.4 L’affichage des messages