Ce document traite du développement d'applications Android, en abordant divers éléments tels que les propriétés d'écran, les unités de mesure pour la mise en page, ainsi que la création et la gestion de menus. Il décrit les méthodes et classes nécessaires pour gérer les interfaces utilisateur, y compris les layouts, les widgets et les ListView. On y trouve également des exemples de code illustrant la gestion dynamique des menus et des sélections d'éléments.

1. Introduction aux
développement
d’applications pour Android
FETHIBENYAHIA@gmail.com
Unité 2.

2. Plan
 Paramètres de mise en page pour les
éléments View
 Menus
 ListView
 Intaller une app .apk sur l’emulateur

3. Paramètres de mise en page
pour les éléments View

4. Propriétés de l'écran
 Un écran a des propriétés physiques comme la taille
et la résolution.
 la taille de l'écran - une distance entre deux coins
opposés des écrans, habituellement mesurées en
pouces.
 Résolution - un certain nombre de points
horizontalement et verticalement, ce qui l'écran est
capable d'afficher, en pixels.
 Exemple :
 Ecran HTC Desire smartphone : Taille de l'écran 3,7 pouces,
résolution = 800x480 pixels.
1 inch = 2.54 cm, 1 cm = 0.39370079 in
1 inch = 2.54 cm, 1 cm = 0.39370079 in

5. Propriétés de l'écran (unités de mesure)
Pour le développement d'application Android, il y en a 6 unités de mesure :
 dp : Density Independent Pixel ( Densité de pixels indépendant) - Unité abstraite qui
est basés sur la densité physique de l'écran. Cette unité est égale à 160 DPI (Points
par pouce) par écran. Cette dimension sera utilisé pour la mise en page des éléments.
Elle permet aux applications de se ressemblent sur différents écrans et résolutions.
 sp : Scale independent Pixel (Echelle de pixels indépendant) - Utilisé pour les tailles
de polices. On pourrait comparé cette unité aux em du développement web. La police
peut être plus ou moins grosse suivant les préférences utilisateurs.
 pt : Point - 1/72 of an inch. basé sur la taille physique de l'écran.
 px : Pixels - Corresponds aux pixels réels de l'écran. Cette unité de mesure n'est pas
recommandées car le rendu sur les différents types d'écran peut être différents. Le
nombre de pixels par pouce peut varier suivant les appareils.
 mm : Millimètre - basée sur la taille physique de l'écran
 in : Inches (Pouces) - basée sur la taille physique de l'écran.

6. La base de l'IHM (Classe View)
 La vue est l'élément de base de l'IHM
tous les composants graphiques
Héritent de cette classe View
ViewGroup contient
plusieurs View
 Pattern Composite

7. Les layouts
 Les layouts sont de type ViewGroup (conteneurs de
composants graphiques)
 gèrent le placement des composants
 Attributs XML obligatoires
 largeur et hauteur (layout_width et layout_heigth)
 fill_parent: remplit l'espace du conteneur parent, moins la marge
 wrap_content: se dimensionne en fonction du contenu du
composant
 match_parent: est remplacé par fill_parent depuis la version 8
 les valeurs absolues: dip, px, mm, in, …

8. Paramètres de Layout
 Divers propriétés sont disponibles sur les layouts
pour paramétrer l'affichage (en fonction des
layouts)
 Il faut penser en terme
 d'orientation
 de remplissage
 de poids
 de gravité

9. Orientation
 L’orientation (android:orientation) précise si un LinearLayout
représente une ligne (horizontal) ou une colonne (vertical)
pour une colonne.
 En code java setOrientation() avec une paramètre constante
HORIZONTAL ou VERTICAL.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="@+id/view1" >
View =(LinearLayout)findViewById(R.id.view1);
view.setOrientation(LinearLayout.HORIZONTAL);

10. Modèle de remplissage
 Les widgets sont, par défaut, serrés les uns contre les autres. Vous
pouvez augmenter l’espace intercalaire à l’aide de la propriété
android:padding (ou en appelant la méthode setPadding() de l’objet
Java correspondant au widget).
 Pour utiliser des valeurs différentes en fonction des côtés, utilisez les
propriétés android:paddingLeft, android:paddingRight,
android:paddingTop et android:paddingBottom

11. Propriétés pour les marges externes
 android:layout_marginBottom
 android:layout_marginLeft ,
 android:layout_marginRight
 android:layout_marginTop
 Exemple avec TableLayout :
 margin left = 10 dp
margin top = 20 dp

12. Poids
 comment deux widgets se partagent l'espace disponible ?
 layout_weigth indique la proportion par widget
 si 1 pour deux widgets l'espace libre est divisé en 2
 si 1 pour un widget, et 2 pour le second, le second utilisera deux fois
moins d'espaces que le premier
layout_weigth=1 pour les deux boutons
layout_weigth = 1 pour B1
layout_weigth = 3 pour B2
layout_weigth = 1 pour B1
layout_weigth = 3 pour B2
layout_weigth = 2 pour B3

13. Gravité
 Le paramètre layout_gravity gère le placement du widget dans le
layout. Il serait plus pratique de le démontrer à l'aide du
FrameLayout. Tous les éléments mis en elle, sont par défaut positionné
dans le coin en haut à gauche et ne sont pas alignés en aucune façon. Il
s'adapte très utile pour montrer les paramètres d'alignement.
<?xml version="1.0" encoding="utf­8"?>
<LinearLayout … >
<FrameLayout
android:id="@+id/frameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:text="gravity = top left/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:text="gravity = top right"/> ….

14. Positions relatives par rapport à un conteneur
 layout_alignParentTop : haut du widget aligné avec
celui du conteneur
 layout_alignParentBottom : bas du widget aligné
avec celui du conteneur
 layout_alignParentLeft : bord gauche du widget
aligné avec celui du conteneur
 layout_alignParentRigth : bord droit du widget aligné
avec celui du conteneur
layout_alignCenterHorizontal : widget centré
horizontalement
 layout_alignCenterVertical : widget centré
verticalement

15. Position relative des widgets
 Le contrôle du placement d'un widget par
rapport à un autre est effectué par :
 android:layout_above le widget doit être placé
au-dessus de celui qu'il désigne
 android:layout_below le widget doit être placé
sous celui qu'il désigne
 android:layout_toLeftOf le widget doit être placé
à gauche de celui qu'il désigne
 android:layout_toRightOf le widget doit être
placé à droite de celui qu'il désigne
andr
oi
d:
l
ayout
_t
oRi
ght
O f
= "@ + i
d/
bt
nLogi
n"

16. Alignement d'un widget
Alignement d'un widget par rapport à un autre
 android:layout_alignTop le haut du widget est
aligné avec le haut du widget désigné
 android:layout_alignBottom le bas du widget est
aligné avec le bas du widget désigné
 android:layout_alignLeft le bord gauche du
widget est aligné avec le bord gauche du widget
désigné
 android:layout_alignRight le bord droit du widget
est aligné avec le bord droit du widget désigné
 android:layout_alignLBaseLine les lignes de base
des deux widgets doivent être alignées
<TextView android:id="@+id/labelURL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="URL:"
android:layout_alignBaseline="@+id/entry"
android:layout_alignParentLeft="true"/>
<EditText
android:id="@id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/labelURL"
android:layout_alignParentTop="true"/>

17. Les Menus

18. Les Menus
 Android supporte deux types de menu
 les menus d'activité
 les menus contextuels
 La construction des menus peut être effectuée
 Dynamiquement par programmation (programmatique)
 Statiquement par déclaration dans un fichier XML
(déclarative)
 méthode à privilégier

19. Menu : déclaration dans un fichier XML
 La déclaration des menus est effectuée dans un fichier XML
situé dans res/menu
 La syntaxe est simple
 la racine menu accepte des balise
 item pour un élément de menu
 menu pour déclarer un sous-menu
 Deux niveaux maximum (menu  sous-menu  )
 Principaux attributs de la balise item
 title: titre de l'élément de menu
 icon: icône de l'élément de menu
 onClick: méthode de l'activité à invoquer (depuis Android 3)
 checked: présélection de l'élément du menu

20. Construction statique (menu.xml)
 Exemple
<menu xmlns:android=http://schemas.android.com/apk/res/android>
<item
android:id="@+id/agenda"
android:icon="@drawable/agenda"
android:orderInCategory="100"
android:title="Agenda">
<menu>
<item
android:id="@+id/rdv"
android:title="RDV"/>
<item
android:id="@+id/rappel"
android:title="Rappel"/>
</menu>
</item>
</menu>

21. Construction dynamique
 Exemple (suite)
@Override
public boolean onCreateOptionsMenu(Menu menu) {
SubMenu submenu = menu.addSubMenu(99, 777, 101, "Signets");
submenu.add(99, 778, 101, "Adrooid­Note");
submenu.add(99, 779, 101, "Java­Note"));
menu.getItem(0).setIcon(R.drawable.bookmarks);
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
menu.getItem(0).setTitle("Agenda" +
System.currentTimeMillis());
return super.onPrepareOptionsMenu(menu);
}
transformer le
fichier menu.xml
en menu
transformer le
fichier menu.xml
en menu

22. Événement lors d'un choix (clique) dans un menu
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.agenda: Toast.makeText(this, "Agenda",
Toast.LENGTH_SHORT).show(); break;
case R.id.rdv: Toast.makeText(this, "RDV " + System.currentTimeMillis(),
Toast.LENGTH_SHORT).show(); break;
case R.id.rappel : Toast.makeText(this, "Rappel " +
System.currentTimeMillis(),
Toast.LENGTH_SHORT).show(); break;
case 777: Toast.makeText(this, "Signets", Toast.LENGTH_SHORT).show(); break;
case 778: Toast.makeText(this, "Adrooid­Note", Toast.LENGTH_SHORT).show();
break;
case 779: Toast.makeText(this, "Java­Note", Toast.LENGTH_SHORT).show();break;
}
return super.onOptionsItemSelected(item);
}

23. Menu Contextuel
 Un menu contextuel apparaît si l'utilisateur effectue un appui long sur
l'écran
 Il faut donc que l'appui long soit géré par le widget possédant le
menu contextuel
 méthode registerForContextMenu: appeler cette méthode après
setContentView, lorsque la vue est construite.
 la méthode reçoit l'identifiant du widget sur lequel ajouter le menu contextuel
 La création du menu est effectuée dans la méthode
onCreateContextMenu
 La méthode onContextItemSelected est utilisée pour traiter le choix
de l'utilisateur

24. Création d’un menu contextuel
RelativeLayout view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = ((RelativeLayout) findViewById(R.id.view1));
registerForContextMenu(view);
}
@Override
public void onCreateContextMenu(ContextMenu menu, View v,ContextMenuInfo
menuInfo) {
this.onCreateOptionsMenu(menu);
super.onCreateContextMenu(menu, v, menuInfo);
}
@Override
protected void finish() {
unregisterForContextMenu(view);
super.finish();
}
@Override
protected void finish() {
unregisterForContextMenu(view);
super.finish();
}
Vous pour spécifier une
autre façon de présenté le
menu
Vous pour spécifier une
autre façon de présenté le
menu

25. Evénement lors du choix dans le menu
contextuel
@Override
public boolean onContextItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.agenda:
Toast.makeText(this, "Context Menu (Agenda)",
Toast.LENGTH_SHORT).show();
break;
case 777:
Toast.makeText(this, "context Menu (Signets)",
Toast.LENGTH_SHORT).show();
break;
}
return super.onContextItemSelected(item);
}
@Override
public boolean onLongClick(View v) {
v.showContextMenu();
return false;
}

26. Résumé : méthodes relatives aux menus et
menus contextuels
 onCreateOptionsMenu - est invoqué que lorsque le menu est affiché pour la première
fois. Crée un menu et n'est pas plus utilisé. Nous ajoutons des éléments de menu ici.
 onPrepareOptionsMenu - invoqué à chaque fois avant d'afficher le menu. Nous apportons
des changements au menu déjà existant si cela est nécessaire.
 onOptionsItemSelected(MenuItem) appelée lors d'un choix dans un menu de
l'activité. Le paramètre est le choix effectuéon
 onOptionsMenuClosed(Menu) appelée lors de la fermeture d'un menu de l'activité. Le
paramètre est le menu fermé.
 onCreateContextMenu(ContextMenu, View, ContextMenu.ContextMenuInfo) appelée
lorsqu'un menu contextuel est affiché. Le 1er paramètre est ce menu contextuel, le
2ème est l'élément d'interface auquel il est associé, le dernier donne des informations sur le
contenu de l'élément d'interface qui a causé l'apparition du menu contextuel

27. Résumé : méthodes relatives aux menus et
menus contextuels
 registerForContextMenu(View) associe un menu contextuel à
l'élément passé en paramètre
 unregisterForContextMenu(View) supprime l'association du
menu contextuel à l'élément passé en paramètre
 onContextItemSelected(MenuItem) appelée lors d'un choix
dans un menu contextuel. Le paramètre est le choix effectué.
 onContextMenuClosed(ContextMenu) appelée lors de la
fermeture d'un menu contextuel.Le paramètre est le menu fermé.

28. Widgets de
sélection
(ListView)

29. Widgets de sélection (ListView)
 Les cases à cocher ou boutons radio
permettent des sélection sur une petite
groupe d'items
 ListView (comme Spinner, Gallery, …)
 Permet la sélection sur une large groupe
d'items.
 Il peut aussi afficher plus d'informations

30. Widgets de sélection (Vues – Adaptateurs)
 Le développement autour de ces widgets utilise
 des layouts spécifiques
 Android fournit des layouts de base
 nous pouvons développer les nôtres
 des adaptateurs de données
 permet de remplir le composant graphique avec le contenu d'une source
de données
 tableau, liste, base de données
Database
Database
Adapteur
Adapteur
ligne de données
liaison et mise en
forme des données
ListView
ListView

31. ListView
 ListView est de type ViewGroup et constituée de lignes
 chaque ligne est une vue enfant du ViewGroup qui prend en
charge l'affichage des données d'un élément de la liste.
 Les données à afficher sont de provenance divers
 la liste utilise un ListAdpater qui lie la vue aux données
 Android fournit plusieurs ListAdapter
 ArrayAdapter<T> pour les données de type tableau
 CursorAdapter pour les données stockées en base
 SimpleCursorAdapter pour les données de type String ou
image stockées en base
 etc.

32. ListView et Activity
 ListView peut être géré par une activité
 ListActivity simplifie la gestion de
l'activité en fournissant des méthodes
support
 récupère une ListView depuis les
ressources layout
 Qui doit être identifiée par @android:id/list

33. ListView et adaptateur
 La classe ListView possède une méthode setAdapter(...) qui lie
la vue avec les données
 L’adaptateur possède son propre constructeur
 si l'activité hérite de ListActivity, la méthode est dans l'activité.
 en cas d'utilisation des layout par défaut l'identifiant de la
ListView doit être android:id/list
< Li
st
Vi
ew
andr
oi
d:
i
d= "@ androi
d:
i
d/
l
i
st
"
andr
oi
d:
l
ayout
_w i
dt
h= "fi
l
l
_parent
"
andr
oi
d:
l
ayout
_hei
ght= "fi
l
l
_cont
ent
"/
>

34. Exemple ListView avec ArrayAdapter<T>
public class MainActivity extends ListActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String[] values = new String[] { "Android", "iPhone",
"WindowsMobile",
"Blackberry", "WebOS", "Ubuntu",
"Windows7", "Max OS X",
"Linux", "OS/2" };
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, values);
setListAdapter(adapter);
}
@Override
protected void onListItemClick(ListView l,View v,int
position,long id) {
String item = (String) getListAdapter().getItem(position);
Toast.makeText(this, item + " selected",
Toast.LENGTH_LONG).show();
}
• android.R.layout.simple_list_item_1 : layout par défaut pour les lignes. Il
comprend un objet unique de type TextView
• android.R.layout.simple_list_item_2 : comprend deux objets de type
TextView, le second en dessous du premier dans une taille plus petite
• android.R.layout.simple_list_item_1 : layout par défaut pour les lignes. Il
comprend un objet unique de type TextView
• android.R.layout.simple_list_item_2 : comprend deux objets de type
TextView, le second en dessous du premier dans une taille plus petite

35. Installer un application .apk
sur l’émulateur

36. Installer un app .apk sur l’émulateur
 Exécuter votre émulateur
 Lancer l’invite de commandes (Windows Exécuter ->
taper cmd, et changer le chemin vers répertoire platform-
tools de l’installation du SDK android (cd
c:chemin_vers platform-tools)
 Vous pouvez utiliser la commande adb :
 adb install [apk file name]
 Example:
 adb install chemin_versTest.apk