[Tuto] Développer son application Android – Episode 3

Notre interface, la page de notre application, est définie dans le fichier « main.xml ». 
Eclipse nous propose un éditeur ou l’on pourra construire l’interface par « drag and drop » : 
editeur main.xml eclipse 
Nous verrons que le drag and drop montrera très vite ses limites et nous serons contraints de mettre les mains dans le cambouis xml du code source de notre page qui rappelez vous est aussi appelée Activity  :

En cliquant du l’onglet « main.xml » en bas de cette fenêtre d’édition , nous ouvrons l’éditeur de code source de notre page :

Pour l’instant notre page est très simple. Elle comporte un LinearLayout en orientation verticale. 
Ce LinearLayout est un container où tous les éléments graphiques de notre interface s’empilent les uns au dessus des autres automatiquement. 
Il existe différentes formes de Layout, pour les voir cliquer sur l’onglet « Graphical Layout » pour retourner dans l’éditeur graphique de l’activity puis déployer « Layouts » dans la partie gauche de la fenêtre :

layout SDK android eclipse 
Ici nous n’utiliserons que le LinearLayout en mode horizontal (pour empiler sur le côté gauche) et en mode vertical (pour empiler vers le bas).

Notre application (moche ok) doit ressembler à ça :

tuto creation apk android 
En haut un champ texte de saisie : un EditText 
Et à sa gauche un Button « Hello » suivi d’un autre Button « Nav ».En dessous du WebView (un navigateur web) on a un champ texte non éditable, un TextView et juste en dessous de ce textview on a une ProgressBar.

Schématiquement nous aurons : 
organisation des layouts android SDK 

Un Layout en mode vertical principal en orange saumon, un Layout en mode horizontal en bleu qui contient 3 éléments puis encore en dessous 3 autres éléments. 
Le code source de notre « main.xml » sera :

Ce qui nous donne en mode Graphical Layout :

Nous ne gérerons par ici la notion de rotation de l’application, nous verrons ça dans des tutos à venir.

Attardons nous sur le Layout en mode horizontal avec son EditText et ses 2 Buttons. 
Comme toute balise XML elle s’ouvre, se ferme et possède des attributs 
<LinearLayout ses attributs>…… </LinearLayout> 
et pour ses attributs :

 android:layout_width= »match_parent » android:layout_height= »wrap_content » qui veulent dire que le Layout prendra toute la place disponible verticalement et horizontalement.

Dans ce Layout :

Le champ texte de saisie : 
edittext 
nous allons voir comment « récupérer » le texte saisi dans le code source java de l’application.

Et les boutons : 
boutons 
pour les boutons nous allons intercepter l’évenement « click » qui déclenchera une action.

Le texte qui s’affiche sur les boutons et leur nom (qui doit être unique) sont fixés dans leurs déclarations en xml :

Le premier bouton s’appelle « button1″ et son texte est fixé a « Hello ». 
Nous avons construit l’interface de notre première application à la main en XML mais nous pouvons aussi la construire via Drag en Drop en mode Graphical Layout. 
Pour avoir un aperçu de tous les éléments dont nous disposons, ouvrez tous les menus de la Palette : 
pallette element android sdk layouts android 
Il faudra commencer par déposer les Layout sachant que par défaut l’application contient déjà un Layout en mode vertical. 
Amusez vous avec ce mode de construction d’interface, vous découvrirez vite ses limites et devrez éditer à la main le code source du main.xml afin de placer vos éléments exactement où vous les voulez.

Jetons un oeil maintenant au code Java de l’application car pour l’instant notre application ne sait rien faire. 
Le code source de l’application se trouve ici : 
source-java android SDK 
Et pour l’instant il n’y a que ça :

On retrouve le package que nous avions définis lors de la création du projet : « package fr.apln.TutoAndroid_1″

Puis les imports qui représente les éléments (d’autres packages) que l’application utilisera, nous devrons en rajouter.

Puis la déclaration de notre classe java qui hérite d’Activity. On se prend pas la tête avec ses notion pour l’instant.

Ensuite nous avons   »public void onCreate(… » … mais c’est quoi ? C’est le code qui est exécuté lors du lancement de l’application (on va dire comme ça pour faire simple).

On remarque que pour l’instant il n’ y a aucune trace de nos boutons, champs textes,  barre de progression que nous avons mis dans notre « main.xml ». 
Ne vous inquiétez pas nous allons spécificier ces éléments, les nommer et dire ce qu’ils doivent faire.


Daniel Bort
Spécialisé dans les gadgets informatiques, je cuisine également des plats exotiques à la maison pour équilibrer mon immersion constante dans les dernières technologies et les actualités du LLM.
Création FBKW