Vous êtes sur la page 1sur 23

Atelier 2

Développement
Android et interfaces
graphiques.

Développement Android Page 1


Première application
Création d un projet
Android Studio contient un assistant de création d’applications :

Application name : c’est le nom qui va apparaitre dans la liste des applications sur l’appareil
et dans le Play Store.

Company domain : c’est un qualifiant qui apparaitra dans le nom du package

Package name : il est utilisé comme identifiant de l’application. Il doit être unique parmi tous
les packages installés sur le système.

Minimum required SDK : c’est la version Android la plus ancienne sur laquelle l’application
peut tourner. Il faut éviter de remonter trop en arrière, ça réduirait les fonctionnalités que
vous pourriez donner à votre application. Pour vous aider dans votre choix, cliquez sur le lien
Help me choose. Vous verrez apparaître l'écran suivant :

Développement Android Page 2


Ce graphique vous permet d'un coup d'œil de vérifier le pourcentage d'appareils qui seront
capables d'installer et de lancer votre application.

Plates-formes ciblesDans cet écran, vous avez la possibilité de définir la ou les cibles sur
lesquelles votre application va fonctionner. Cela permet de déterminer les SDKs à installer
dans votre projet. Vous avez le choix entre :

Phone and Tablet : les téléphones et tablettes. C'est l'option par défaut ;

Wear : les montres et objets connectés ;

TV : la télévision, en l'occurrence les équipements qui supportent Android TV ;

Android Auto : la voiture.

Pour l'instant, seuls les téléphones et tablettes nous intéressent, vous allez donc laisser la
première case cochée et ne pas cocher les autres.

Développement Android Page 3


Création d’une activité
Une activité (ou Activity en anglais) est une brique fondamentale dans l'interaction avec
l'utilisateur. C'est elle qui va contenir l'ensemble des éléments graphiques du type champ
texte, bouton, titre, etc.

Pour faciliter la tâche du développeur, l'assistant de création permet de créer


automatiquement des activités pré-définies. Par exemple, une activité pour afficher une carte
Google Map ou une activité pour un affichage en mode paysage sur tablette.

Dans notre cas, nous allons choisir une activité "vide", en sélectionnant Empty Activity. Eh oui,
nous allons tout développer nous-mêmes, c'est le meilleur moyen d'apprendre ! Cliquez sur
Next.

Développement Android Page 4


L’assistant a créé de nombreux éléments visibles dans la colonne de gauche de l’IDE :

• manifests : description et liste des classes de


l’application

• java : les sources, rangés par paquetage,

• res : ressources = fichiers XML et images de l’interface, il


y a des sous-dossiers :

– layout : interfaces (disposition des vues sur les


écrans)

– drawable : contient tout élément qui peut être


dessiné sur l’écran : images

(en PNG de préférence), formes, animations, transitions, etc.. Cinq dossiers

drawable permettent aux développeurs de proposer des éléments graphiques

pour tout genre d’appareil Android en fonction de sa résolution. En populant

correctement ces dossiers on peut ainsi créer des applications avec

une interface qui s’adapte à chaque résolution d’écran avec un seul fichier

.apk.

ldpi low-resolution dots per inch. Pour des images destinées à des

écrans de basse résolution (~120dpi)

mdpi pour des écrans de moyenne resolution (~160dpi)

hdpi pour des écrans de haute résolution (~240dpi)

xhdpi pour des écrans ayant une extra haute résolution (~320dpi)

xxhdpi pour des écrans ayant une extra extra haute résolution (~480dpi).

– menu : menus contextuels ou d’application

– mipmap : contient les images de l’icône de votre applications sous différentes

résolutions.

– values : valeurs de configuration, textes. . .

• Gradle scripts : Android Studio utilise un système qu’on appelle Gradle pour compiler

Développement Android Page 5


et générer les applications. Pour fonctionner le Gradle a besoin d’un script qui définit les
règles de compilation et génération (configuration et dépendances). Android Studio crée
ainsi un script gradle pour chaque module (build.gradle (Module :app)) du projet ainsi qu’un
script pour le projet entier (build.gradle (Project : MonAppli)) 4. Dans le build.gradle de

l’application on définit entre autre la version du SDK utilisée pour la compilation,

la version minimale du SDK nécessaire pour faire tourner l’application (rétro-compatibilité),


l’identifiant de l’application (le nom du package),etc. ..

Création d’un AVD


On peut lancer l application sur un appareil virtuel appelé Android Virtual Device

AVD qui émule le comportement d’un téléphone, une tablette ou autre.

Pour configurer un émulateur, allez dans Tools > Android > AVD Manager

Create Virtual Device . Dans cet exemple nous rajoutons une tablette Nexus 10 avec une extra
haute résolution (xhdpi).

Nous sélectionnons ensuite le processeur qui sera émulé . En cochant Show downloadable

system images vous pouvez télécharger d’autres images systèmes avec d’autres

versions Android. En cliquant sur Next Vous avez ensuite la possibilité de configurer

d’autres paramètres.

Notez qu’à la création de l’appareil sa résolution vous est signalée. Ceci est important

à noter pour l’intégration d’images dans l’application.

Développement Android Page 6


Pour lancer l’exécution sur l’émulateur, appuyez sur le bouton d’exécution

et sélectionnez l’émulateur sur lequel vous souhaitez lancer l’application. Vous pouvez

cochez Use same device for future launches pour éviter d’avoir à sélectionner

l’appareil à chaque lancement. L’émulateur se lance, ça peut prendre quelques minutes

soyez patients. Rassurez-vous, vous n’aurez pas à le relancer à chaque fois que vous compilez
votre projet, laissez-le ouvert et à chaque fois que vous compilez et relancez votre application,
elle pourra être chargée dans l’émulateur en cours (il vous le proposera parmi les Running
devices ).

Exécution sur un appareil réel


Connectez votre appareil par câble USB à l’ordinateur et installez le pilote.

Activez l’option de débogage USB sur l’appareil en allant dans les paramètres, sous
développement ou options pour les développeurs.

Pour les versions supérieures à 4.2, cette option est cachée par défaut, pour la faire
apparaitre, allez dans Paramètres>A propos .. et touchez Numéro de build sept fois. Retournez
ensuite à l’écran Paramètres , vous verrez apparaitre Options pour les développeurs, rentrez

y et activez le débogage.

Lancez l’application depuis Android Studio comme précédemment. Si on vous

demande de choisir l’appareil, sélectionnez Choose a running device, puis votre

téléphone ou tablette. Android Studio installera l’application sur votre appareil

et la lancera.

Ou est alors mon apk ?


Une fois que votre application est compilée, un fichier .apk est créé

dans le dossier app\build\outputs\apk de votre répertoire de travail.

C’est l’exécutable de votre application. C’est ce fichier que vous devez

déployer pour distribuer votre application.

Développement Android Page 7


Les interfaces utilisateurs

Rappel
La création d’interfaces est indispensable lors de la conception d’une application dédiée aux
Smartphones car de nouveaux critères sont à prendre en compte dont :

- Les différentes tailles d’écran.

- Les différentes résolutions etc…

La classe centrale et la base pour réaliser une vue sous Android composent la classe “View“.

Cette classe est le bloc basique pour les interfaces utilisateurs (disposition d’écran,
interaction…).

Une ou plusieurs vues peuvent être regroupées dans ce que l’on appelle “ViewGroup“.

Ces groupes de vues sont utilisés pour gérer la mise en page des interfaces graphiques.

On distingue :

- Button (http://developer.android.com/reference/android/widget/Button.html) : Un
bouton cliquable.

- CheckBox (http://developer.android.com/reference/android/widget/CheckBox.html) : Une


checkbox.

- EditText (http://developer.android.com/reference/android/widget/EditText.html) : Un
champ de texte éditable.

- DatePicker (http://developer.android.com/reference/android/widget/DatePicker.html) :
Sélection de dates.

Développement Android Page 8


- RadioButton (http://developer.android.com/reference/android/widget/RadioButton.html)
: Représente les boutons radios.

- Toast (http://developer.android.com/reference/android/widget/Toast.html) : Un pop up


message qui s’affiche sur l’écran.

- ImageButton
(http://developer.android.com/reference/android/widget/ImageButton.html): Une image
qui se comporte comme un bouton.

Sous Android, la notion de mise en page est reliée à la notion de “Layout“. Cette
dernière représente l’agencement des différents éléments graphiques dans votre interface.
Voici quelques exemples de layouts :

Parmi les conteneurs proposés par Android, nous pouvons noter par exemple :

- FrameLayout : Ce layout est très simple et permet d’afficher un élément dans votre interface
et permet de positionner les éléments les uns au dessus des autres ;

Vous pouvez l’utiliser pour ajouter plusieurs éléments et jouer sur leur visibilité.

- LinearLayout : Il organise les différents éléments de votre interface sur une ligne ou sur
une colonne. La direction peut être définie à l’aide de la méthode setOrientation().

- RelativeLayout : Il permet de définir la position des éléments en fonction de la position de


leurs éléments parents.

- ConstraintLayout comme le RelativeLayout, mais avec des règles de positionnement


beaucoup plus puissantes.

On peut déclarer les Layouts par code Java ou par XML. La déclaration en XML convient pour
les interfaces statiques et la déclaration Java convient aux interfaces dynamiques. Vous
pouvez combiner les deux types de déclarations.

Développement Android Page 9


Création de notre première application

Interface : Dans ce premier écran, nous souhaitons accueillir l'utilisateur en lui


demandant de saisir son prénom. De fait, cet écran va être composé d'un champ
texte, d'une zone de saisie et d'un bouton. Le résultat attendu est le suivant :

1. Activité et layout : Une activité a pour rôle principal d'interagir avec


l'utilisateur. C'est une classe Java qui hérite obligatoirement de la classe
Android Activity ou AppCompatActivity.

Par convention, le nom d'une activité est toujours suffixé par Activity et écrit en
CamelCase. Ainsi, vous nommerez vos activités LoginActivity et TutorialActivity.

Afin de déterminer quels éléments graphiques utiliser et comment les


positionner à l'écran, nous utilisons un fichier layout. Un fichier layout est un
fichier XML que l'activité va charger après avoir été instanciée.

Construction de l'interface :

Sous Android Studio, naviguez dans l'arborescence du projet et ouvrez le fichier


activity_main.xml situé dans res/layout en double-cliquant dessus.

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

Développement Android Page 10


xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Welcome what's your name!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:textSize="20dp"/>
<EditText
android:id="@+id/EditName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="tape your name here"
android:textSize="20dp"
/>
<Button
android:id="@+id/btnLetsPlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="let'splay"
android:layout_marginLeft="70dp"
android:layout_marginRight="70dp"

android:textColor="@color/colorPrimary"/>

</LinearLayout>

Comprendre le LinearLayout
Le LinearLayout est un Layout qui repose sur une idée de boite, c’est-à-dire que les conteneurs
ou les widgets appartenant à ce Layout sont soit alignés en ligne horizontale ou verticale.

Plusieurs éléments sont disponibles pour permettre aux développeurs de personnaliser ce


Layout:

 Orientation du Layout :

C’est la première chose que vous précisez quand vous créez votre LinearLayout
(android:orientation). Cette option spécifie la façon dont seront alignés les éléments contenus
dans ce Layout. Deux options sont disponibles :

- Verticale : Oriente les éléments sur une ligne verticale.

- Horizontale : Oriente les éléments sur une ligne horizontale.

 Taille des éléments :

Développement Android Page 11


Le LinearLayout ainsi que tous les widgets qui le composent doivent fournir une taille (hauteur
et largeur). Donc ils doivent définir les deux propriétés suivantes :

- android:layout_width

- android:layout_height

Ces deux propriétés peuvent prendre 3 types de valeur :

- Une taille fixe : par exemple 50px (pixels). Donc quelque soit la taille de l’écran, l’élément
occupera exactement 50px.

- match_parent : l'élément doit s'étendre le plus possible afin d'occuper le maximum d'espace
disponible offert par son parent (vous pourriez voir apparaître de temps en temps fill_parent
au détour d'un tutorial ou d'un site web : c'est un attribut obsolète, ancêtre de match_parent)

- wrap_content : Pour demander au Widget d’occuper une taille naturelle (la taille de son
contenu pour le texte par exemple). S’il est trop gros par rapport à la taille disponible. Android
s’occupera par exemple de couper le texte s’il n’y a plus de place.

Développement Android Page 12


 Gravité des éléments :

Dans un LinearLayout les éléments sont alignés de gauche à droite et de haut en bas. Donc la
question qui se pose est comment faire si l’on veut placer notre élément tout en bas ou a
droite. La réponse se trouve dans la gravité (android: gravity).

Les gravités les plus couramment utilisées sont left, center_horizontal, top, bottom, right,
pour respectivement aligner les éléments à gauche, au centre, en haut, en bas et à droite.

 Poids des éléments :

Vous vous demandez sûrement ce que l’on veut dire par le poids d’un élément. Prenons un
exemple, imaginez que vous avez 2 boutons en colonne et que vous voulez que chacun occupe
tout l’espace disponible.

Développement Android Page 13


Si on leur affecte la même valeur au poids (android:layout_weight), l’espace libre sera partagé
équitablement entre les deux. Si l’on met une valeur 1 au premier et 2 au second, le deuxième
prendra deux fois plus d’espace libre que le premier (Par défaut la valeur du poids est de 0).

Développement Android Page 14


 Espacement :

Les différents éléments que vous créez sont par défaut serrés les uns contre les autres. Vous
pouvez augmenter l’espacement à l’aide de la propriété android:padding (padding top, left,
right et bottom).

La valeur précise l’espace situé entre le contour de l’élément et son contenu réel. Par exemple
pour un bouton c’est l’espacement entre le contour du bouton et son texte.

Développement Android Page 15


 Positionner des éléments relativement à d'autres éléments

<?xml version="1.0" encoding="utf-8"?>


<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Entrer votre nom"
android:id="@+id/nomEdit"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Entrer vore prenom"
android:id="@+id/prenomEdit"
android:layout_alignParentRight="true"
android:layout_below="@+id/nomEdit"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/valider"
android:text="valider"
android:layout_below="@+id/prenomEdit"
android:layout_alignRight="@id/prenomEdit"/>

<Button
android:id="@+id/annuler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="annuler"
android:layout_toLeftOf="@+id/valider"
android:layout_alignTop="@+id/valider"
/>
</RelativeLayout>

Afin de pouvoir référencer le positionnement d’un élément par rapport à un autre, vous
disposez d’un moyen simple et efficace, il s’agit des identificateurs (ID).

Donc voilà comment vous pouvez utiliser un ID :

- A la déclaration d’un élément : android:id= “@+id/idElem”

Développement Android Page 16


- A l’utilisation : @id/idElem

Maintenant que les bases sont posées, voici les différentes options disponibles :

- android:layout_above : Indique que l’élément sera placé au-dessus de celui indiqué par son
id.

- android:layout_below : Indique que l’élément sera placé en dessous de celui indiqué par son
id.

- android:layout_toLeftOf : Indique que l’élément sera placé à gauche de celui indiqué par son
id.

- android:layout_toRightOf : Indique que l’élément sera placé à droite de celui indiqué par son
id.

- android:layout_alignTop : Indique que le haut de notre élément est aligné avec le haut de
l’élément indiqué.

- android:layout_alignBottom : Indique que le bas de notre élément est aligné avec le bas de
l’élément indiqué.

- android:layout_alignLeft : Indique que le côté gauche de notre élément est aligné avec le
côté gauche de l’élément indiqué.

- android:layout_alignRight : Indique que le côté droit de notre élément est aligné avec le côté
droit de l’élément indiqué.

- android:layout_alignBaseLine : Indique que les lignes de base des 2 éléments sont alignées.

Identification des éléments graphiques

imaginez que vous ayez cinq éléments TextView les uns à la suite des autres. Comment les
distinguer ? En leur ajoutant un identifiant bien sûr ! Pour cela, l'attribut à utiliser est
android:id, et sa valeur doit être "@+id/votre_identifiant". Notez bien que l'identifiant doit
toujours être préfixé par "@+id/"

<Button
android:id="@+id/btnLetsPlay"
……
<EditText
android:id="@+id/EditName"
…..

Développement Android Page 17


L'interface graphique est prête, il est temps maintenant de se pencher sur le code Java de
l'activité. Ouvrez le fichier MainActivity

2. Affichage de l’Activité

La classe MainActivity a été créée automatiquement par Android Studio lors de la création
du projet, La seule méthode implémentée est la suivante :

@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);}

 La méthode onCreate() est appelée lorsque l'activité est créée.


 la méthode setContentView() permet de déterminer quel fichier layout utiliser.
 Le fichier layout à utiliser est précisé avec une syntaxe particulière :
R.layout.nom_du_fichier (sans l'extension XML). Petite explication : lors de la
compilation du projet, Android Studio génère une classe Java appelée R (pour
Resources), qui contient l'ensemble des identifiants de toutes les ressources du
projet.

3. Référencement des éléments graphiques


Dans notre interface nous avons le texte d'accueil ,Le champ de saisie du prénom et le
bouton de validation Afin de pouvoir interagir avec ces éléments, il est nécessaire de les
référencer dans le code. Commençons par ajouter dans la classe MainActivity les trois
variables correspondantes :

private Button btnLetsPlay;


private EditText EditName;
On va référencer les éléments graphiques qui nous intéressent dans le code. La méthode
à utiliser pour cela est findViewById(). Elle prend en paramètre l'identifiant de la vue qui nous
intéresse, et renvoie la vue correspondante. Comme pour le fichier layout, la syntaxe à utiliser
pour le paramètre est spécifique : il faut préciser R.id.identifiant_de_vue.

Notez également que le type renvoyé par la méthode findViewById() est View. Il faut
donc effectuer une conversion vers le bon type (ou cast en anglais).

Voici l'exemple de code que vous pouvez ajouter dans la méthode onCreate() :

Développement Android Page 18


EditName=(EditText)findViewById(R.id.EditName);
btnLetsPlay=(Button)findViewById(R.id.btnLetsPlay);

4. Gestion des actions


Les deux actions les plus importantes à implémenter sont les suivantes :

 Vérifier la saisie du nom de l'utilisateur ;


 Détecter le clic sur le bouton pour démarrer le jeu.

Vérifier la saisie du nom de l'utilisateur :

nous allons appeler la méthode addTextChangedListener() sur l'instance d'EditText, en


utilisant une implémentation d'interface sous forme de classe anonyme.

EditName.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int
after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int
count) {
}
@Override
public void afterTextChanged(Editable s) {

textSaisie=s.toString();
}
});

Détecter le clic sur le bouton

Pour cela appeler la méthode setOnClickListener() sur l'objet btnLetsPlay, puis d'implémenter
l'interface OnClickListener de la méthode View, comme ceci :

btnLetsPlay.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}});

La méthode onClick() est appelée chaque fois que l'utilisateur appuie sur le bouton.

Développement Android Page 19


Réutilisation d'interfaces
L’un des points importants lors de la création d’une application Android est l’organisation et
l’optimisation de vos interfaces. Cela est important, car une interface mal conçue, peux
produire de nombreux bugs (un ralentissement de votre application, non compatibilité avec
certains terminaux ou versions d’Android).

L’un des points utiles est le système d’inclusion. Il vous permet de découpez votre application
en plusieurs parties et vous offre ainsi la possibilité de réutilisez des parties d’une vue dans
une autre vue.

Voici un petit exemple concret, imaginez que dans une application Android sur plusieurs
écrans, vous avez un bandeau en haut et un bandeau en bas (un pseudo Header / Footer). Au
lieu de créer ces deux éléments dans chaque interface, vous pouvez le créer une seule fois et
le réutiliser (inclure) dans les interfaces ciblées.

Cela est possible à l’aide de la balise include qui vous permet de spécifier une vue à inclure
dans votre layout. Vous pouvez surcharger la longueur et largeur d’un élément lors de son
inclusion (layout_width et layout_height).

Développement Android Page 20


1. Création du Header :

il faut créer le fichier XML qui représentera le header de l’interface et qui sera réutilisez dans
toutes les parties nécessaires de l’application.

<?xml version="1.0" encoding="utf-8"?>

<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="100dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:text="@string/header_vue"
android:background="@color/header_background"
android:textSize="20dp"
>
</TextView>

2. Création du footer

On procèdera de même que pour le header pour la création du footer.

<?xml version="1.0" encoding="utf-8"?>


<TextView
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="100dp"
android:layout_weight="1"
android:textSize="20dp"
android:background="@color/footer_background"
android:text="@string/footer_vue"
>

</TextView>

Développement Android Page 21


3. Création de l'interface globale (principale)

En inclus à l’aide de la balise include les deux layout crée précédemment, et on spécifie le
poids du corps de l’interface, pour qu’il prenne plus de place que les deux layout inclus (header
/ footer).

L’attribut weightSum, permet de spécifier la somme des poids des différents éléments du
layout. Donc 1 pour footer, 1 pour header et 4 pour le corps, ce qui donne bien 6.

Vous pouvez aussi spécifier les tailles du layout à inclure au moment de l’inclusion (dans la
balise include). Donc les attributs layout_width, layout_height et layout_weight dans la balise
include.

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="6">

<include layout="@layout/header">

</include>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="4"
android:background="@color/body_background"
android:textSize="15dp"
android:text="@string/corps"/>
<include layout="@layout/footer"></include>
</LinearLayout>

Développement Android Page 22


Développement Android Page 23

Vous aimerez peut-être aussi