Cours android

Apprendre la programmation Android avec Android studio par la pratique


Télécharger Apprendre la programmation Android avec Android studio par la pratique

★★★★★★★★★★1 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Tutoriel Android sous Android Studio

Dima Rodriguez

To cite this version:

Dima Rodriguez. Tutoriel Android sous Android Studio. École d’ingénieur. France. 2015. cel-

01241650v2

HAL Id: cel-01241650

Submitted on 6 Feb 2017


HAL is a multi-disciplinary open access archive for the deposit and dissemination of scientific research documents, whether they are published or not. The documents may come from teaching and research institutions in France or abroad, or from public or private research centers.

L’archive ouverte pluridisciplinaire HAL, est destinée au dépôt et à la diffusion de documents scientifiques de niveau recherche, publiés ou non, émanant des établissements d’enseignement et de recherche français ou étrangers, des laboratoires publics ou privés.


Dima Rodriguez

Polytech’ Paris Sud

Tutoriel AndroidTM

Dima Rodriguez

Décembre 2015

TP de prise en main

Table des matières

 

Table des figures

       2.1                        SDK Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . .                            7

       3.1                     Création d’un projet . . . . . . . . . . . . . . . . . . . . . . . . .                         9

       3.2     Création d’une activité                   . . . . . . . . . . . . . . . . . . . . . . .                    10

       3.3                      création d’un AVD . . . . . . . . . . . . . . . . . . . . . . . . . .                       11

       3.4                   Exécution de l’application . . . . . . . . . . . . . . . . . . . . . .                     12

       3.5                  Aperçu de l’interface Android Studio . . . . . . . . . . . . . .                   13

       3.6     Hiérarchie de LinearLayout                  . . . . . . . . . . . . . . . . . . . . .                   17

       3.7               Premier test de l’application modifiée . . . . . . . . . . . . . . . .                20

       3.8     Champ de saisie et bouton                  . . . . . . . . . . . . . . . . . . . . .                   20

       3.9                 Création d’une nouvelle activité . . . . . . . . . . . . . . . . . . .                  22

                  3.10 Création d’une ressource animation . . . . . . . . . . . . . . . . .                 28

        3.11 Animation en LinearLayout                  . . . . . . . . . . . . . . . . . . . . .                   30

        3.12 Modification du layout                    . . . . . . . . . . . . . . . . . . . . . . .                    31

        3.13 Animation en RelativeLayout                 . . . . . . . . . . . . . . . . . . . .                  31

                   3.14 Ajout d’un bouton pour lancer le jeu . . . . . . . . . . . . . . . .                  37

                    3.15 Activité avec vue personnalisée . . . . . . . . . . . . . . . . . . .                   39

                      3.16 Menu de la barre d’action . . . . . . . . . . . . . . . . . . . . . .                     41

       3.1     Cycle de vie d’une activité                   . . . . . . . . . . . . . . . . . . . . .                   52

Le système d’exploitation Android est actuellement l’OS le plus utilisé dans le monde faisant tourner des smartphones, tablettes, montres connectées, liseuses électroniques, télévisions interactives, et bien d’autres. C’est un système, open source qui utilise le noyau Linux. Il a été créée par Android, Inc. qui fut rachetée par Google en 2005. Le développement d’applications pour Android s’effectue

en Java en utilisant des bibliothèques spécifiques.

Le but de ce tutoriel est de vous familiariser avec l’esprit de développement Android et ses bibliothèques. Nous introduirons les concepts de bases de création d’application en mettant en œuvre quelques fonctionnalités simples. Ce tutoriel n’est en aucun cas exhaustif, le potentiel des applications Android est beaucoup plus ample, les exemples cités dans ce document ne devront pas brider votre imagination ni votre curiosité.

Sur le site officiel pour les développeurs Android vous trouverez la documentation des classes, des tutoriels ainsi que les pour préparer une distribution Google Play. Un lexique à la fin de ce document définit quelques mot du vocabulaire Android utilisé dans ce tutoriel.

Dans cette section nous allons décrire la procédure d’installation d’un environnement de développement Android.

Attention : Il faut exécuter les étapes dans l’ordre cité ci-dessous.

a.    Téléchargez le dernier JDK (Java Development Kit) que vous pouvez trouver sur le site d’Oracle.

b.    Désinstallez des éventuelles versions antérieures du JDK

c.    Installez le nouveau JDK

d.    Téléchargez ’Android Studio. Il contient l’environnement de développement, le SDK (Software Development Kit) Android avec la dernière version de la plateforme, ainsi qu’un émulateur.

e.    Lancez l’exécutable pour démarrer l’installation et suivez le wizard

a.    Lancez Android Studio

b.    Nous commencerons par nous assurer que nous possédons tout ce qu’il faut pour développer. Dans la page de démarrage, sélectionnez Configure > SDK Manager. Dans le gestionnaire (fig.2.1) vous verrez la version du SDK installé (avec les mises jour disponibles) et aussi la version de l’API (Application Programming Interface) installée et la version du OS pour laquelle elle vous permettra de développer. Installez les éventuelles mises à jour. Assurez vous de cocher au moins un System Image pour l’émulateur.

c.    Dans l’onglet SDK Tools assurez vous d’avoir au moins

. Android SDK Build Tools

. Android SDK Tools

. Android SDK Platform Tools

. Android Support Library

. Android Support Repository

. Google Repository

. Google Play Services

d.    Quand vous aurez terminé, cliquez Apply pour lancez les installations des éléments supplémentaires.


Figure 2.1 – SDK Manager

Dans cet exemple, il existe une mise à jour disponible pour l’API 23 qui permet un développement pour Android 6.0

a.    Dans le menu Quick Start, sélectionnez Start a new Android Studio Project

, et renseignez les informations comme dans la figure 3.1a

b.    Cliquez sur Next puis remplissez les champs comme dans la figure 3.1b

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 permet de considérer différentes versions d’une application comme étant une même 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.

c.    Cliquez sur Next. Nous arrivons à la création d’une activité (un écran avec une interface graphique). Sélectionnez Blank Activity (fig. 3.2a) et cliquez Next.

8

                   (a) Configuration du projet                                          (b) Choix des cibles

Figure 3.1 – Création d’un projet

d.    Renseignez les champs comme dans la figure 3.2b. Vous pourriez choisir l’utilisation de fragments, mais pour faire simple nous poursuivrons sans fragments. Chaque activité dispose d’un layout qui définit la façon dont les composants seront disposés sur l’écran. Une activité peut être divisée en portions (ou fragments) chacune ayant son propre layout. La notion de fragment a été introduite pour favoriser la ré-utilisabilité de morceaux d’activité (un fragment peut être définit une fois et réutilisé dans plusieurs activités).

e.    Cliquez sur Finish, le projet est crée.

Sur un émulateur

Un émulateur permet de reproduire le comportement d’un appareil réel d’une façon virtuelle. L’utilisation d’un émulateur nous évite d’avoir à charger à chaque fois


                      (a) Ajout d’une activité                                    (b) Personnalisation de l’activité

Figure 3.2 – Création d’une activité

                       (a) Choix de l’appareil                                           (b) Choix du processeur

Figure 3.3 – création d’un AVD

l’application dans un appareil pour la tester. On pourra ainsi lancer l’application dans l’IDE et elle s’exécutera 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, un émulateur existe par défaut, mais vous pourriez rajouter d’autres appareils en cliquant sur Create Virtual Device . Dans l’exemple de la figure 3.3a nous rajoutons une tablette Nexus 10 avec une extra haute résolution (xhdpi). Nous sélectionnons ensuite le processeur qui sera émulé (fig.3.3b). 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.

Pour lancer l’exécution sur l’émulateur, appuyez sur le bouton d’exécution (fig.3.4) 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 ).

Figure 3.4 – Exécution de l’application

Sur un appareil réel

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

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.

Si au moment de la sélection de l’appareil vous recevez un message indiquant que l’appareil n’est pas compatible, assurez vous d’abord que la version Sdk de l’appareil est bien supérieure au minSdk version de votre projet. Si c’est le cas, allez sur votre appareil tout en étant connecté par USB désactivez puis réactivez l’option de débogage USB , il vous demandera de confirmer l’identifiant de votre

Figure 3.5 – Aperçu de l’interface Android Studio

ordinateur, confirmez en lui indiquant de toujours faire confiance à cet ordinateur.

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. Le contenu de ce fichier peut être inspecté à l’aide de n’importe quel logiciel standard de compression/décompression de fichiers.

La figure 3.5 montre les principaux éléments de l’interface Android Studio.

Tout projet Android doit respecter une hiérarchie bien précise qui permettra au compilateur de retrouver les différents éléments et ressources lors de la génération de l’application. Cette hiérarchie favorise la modularité des applications Android. A la création du projet, Android Studio crée automatiquement des dossiers pour contenir les fichiers de code Java, les fichiers XML, et les fichiers multimédias. L’explorateur de projet vous permettra de naviguer dans ces dossiers.

Les dossiers que nous utiliserons le plus sont java et res. Le premier contient le code Java qui définit le comportement de l’application (situé dans le répertoire de votre projet sous app\src\main) et le second comporte des sous dossiers (dans app\src\main\res) où sont stockés les ressources qui définissent l’interface de l’application (l’apparence).

La séparation entre fonctionnalité et apparence est un point essentiel de la  philosophie Android.

Le code de la classe principale de l’application () est situé dans le sous dossier android.polytech.monappli de java. Vous trouverez en annexe une brève explication du code qui y est généré par défaut. C’est dans le dossier java que seront enregistrées toutes les classes que nous allons créer dans ce projetPar ailleurs, tout ce qui touche à l’interface utilisateur sera intégré dans les sous dossiers de res, dont voici une brève description :

layout regroupe les fichiers XML qui définissent la disposition des composants sur l’écran. Il contient déjà, dès la création du projet, le layout de l’activité principale que nous avons créée. Deux fichiers XML sont crée par Android Studio : et . Le premier définit l’apparence générale de l’activité : sa disposition, sa taille, sa barre d’outil, éventuellement des boutons d’action flottant (dans notre cas un bouton email est rajouté) ainsi que son layout qui n’est autre que . Ce sera donc ce dernier que nous manipulerons pour disposer les composants de l’activité et créer notre interface graphique.

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 contient les fichiers XML définissant les menus mipmap contient les images de l’icône de votre applications sous différentes résolutions.

values contient les fichiers XML qui définissent des valeurs constantes (des chaines de caractères, des dimensions, des couleurs, des styles etc.)

gradle Android Studio utilise un système qu’on appelle Gradle pour compiler 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)). 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.

Vous trouverez également dans le dossier manifests du projet un fichier nommé . Ce fichier est obligatoire dans tout projet Android, et doit toujours avoir ce même nom. Ce fichier permet au système de reconnaitre l’application.

On peut accéder à une description rapide des classes ou des attributs  XML en sélectionnant leur nom dans l’éditeur et appuyant sur Ctrl+Q.

Pour l’instant notre application ne fait qu’afficher un message sur l’écran, dans cette section nous allons modifier l’interface pour y mettre un champ de saisie et un bouton.

Une interface utilisateur est en général constituée de ce qu’on appelle des ViewGroups qui contiennent des objets de type View ainsi que d’autres ViewGroups. Un View est un composant, tel un bouton ou un champ de texte, et les ViewGroups sont des conteneurs qui définissent une disposition des composants (Views) qui y sont placés. ViewGroup définit la classe de base des différents layouts.

Comprendre le layout

La disposition de notre interface est définie dans le fichier situé dans le dossier layout de res. Ouvrez ce fichier.

La première balise que vous retrouverez est <RelativeLayout> qui définit le type du conteneur qui compose l’interface, il impose la façon dont les composants seront disposés. Plusieurs types de conteneurs existent, les plus communs sont RelativeLayout, LinearLayout, TableLayout, GridView, ListView. L’utilisation d’un RelativeLayout, par exemple, implique que les composants seront placés selon des positions relatives les uns par rapport aux autres. Un LinearLayout implique une disposition linéaire verticale ou horizontale, un GridView permet la disposition des éléments selon une grille qui peut défiler, etc.

A l’intérieur de la balise <RelativeLayout> vous verrez un ensemble d’attributs définis selon le format

plateforme:caractéristique=”valeur”

Par exemple le premier attribut xmlns:android précise où sont définis les balises Android utilisées dans ce fichier.

La balise <TextView>, fille de la balise <RelativeLayout>, définit un composant texte qui sera placé sur le layout. En effet, c’est sur ce composant là qu’on écrit le “Hello World” qu’affiche notre application. Cette chaine de caractère est définie par l’attribut android:text.

Modifier le type de layout

Nous allons maintenant modifier le type du layout pour le transformer en LinearLayout. La figure 3.6 trace la dérivation de la classe LinearLayout. Nous rajouterons ensuite nos composants sur ce layout dans une disposition linéaire.

Figure 3.6 – Hiérarchie de LinearLayout

Les layouts sont des ViewGroup qui sont eux mêmes des View [1]

Dans le fichier

. supprimez l’élément <TextView>

. remplacez l’élément <RelativeLayout> par <LinearLayout>

. rajoutez l’attribut android:orientation et mettre sa valeur à “horizontal”

Le code dans le fichier devient ainsi

<LinearLayout

xmlns:android="

res/android"

xmlns:app="

auto" xmlns:tools="; android:layout_width="match_parent" android:layout_height="match_parent"

android:orientation="horizontal"

app:layout_behavior="@string/

appbar_scrolling_view_behavior"

tools:context="android.polytech.monappli.

Principale"

tools:showIn="@layout/activite_principale">

</LinearLayout>

Rajouter d’un champ de saisie

. Rajoutez un élément <EditText> dans le <LinearLayout> tel que

<EditText

android:id="@+id/chp_saisie" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/str_chp_saisie" />

Nous avons ainsi placé un champ de saisie avec les attributs suivants :

android :id permet de donner un identifiant unique à ce View qu’on utilisera pour référencer cet objet à l’intérieur de notre code.

Le symbol @ est nécessaire pour faire référence à un objet ressource à partir d’un fichier XML. id est le type de ressource et chp_saisie est le nom qu’on donne à notre ressource. Le symbole + est utilisé pour définir un ID pour la première fois. Il indique aux outils du SDK qu’il faudrait générer un ID pour référencer cet objet. Le symbole + ne doit être utilisé qu’une seule fois au moment où on déclare la ressource pour la première fois. Par la suite si on veut faire référence à cet élément, à partir d’un XML, il suffira d’écrire @id/chp_saisie. android :layout_width permet de spécifier la largeur de élément.

“wrap_content” signifie que le View doit être aussi large que nécessaire pour s’adapter à la taille de son contenu. Si en revanche on précise

“match_parent” comme on l’avait fait pour le LinearLayout, dans ce cas le EditText occuperait toute la largeur de l’écran puisque sa largeur sera celle de son parent c-à-d le LinearLayout android :layout_height idem que pour le layout_width mais pour la hauteur android :hint précise le texte par défaut à afficher dans le champ de saisie quand il est vide. Nous aurions pu préciser directement la chaine de caractère ici codée en dur, mais on préfère utiliser plutôt une ressource qu’on définira dans . Noter que l’utilisation de + ici n’est pas nécessaire parce qu’on fait référence à une ressource concrète (qu’on définira dans le fichier xml) et non pas à un identifiant que le SDK doit créer.

Privilégiez toujours l’utilisation des ressources strings plutôt que des chaines  de caractères codées en dur. Cela permet de regrouper tout le texte de votre interface dans un seul endroit pour simplifier la recherche et la mise à jour

du texte, de plus ceci est indispensable pour que votre application puisse être multilingue. l’IDE vous affichera un avertissement en cas de non respect de cette recommandation.

Après la modification du code que nous venons de faire, quand vous sauvegarderez le fichier, un message d’erreur vous indiquera que l’identifiant str_chp_saisie n’est pas connu. Nous allons donc le définir.

. Ouvrez le fichier qui se trouve dans res>values

. Rajoutez une nouvelle string nommée str_chp_saisie et dont la valeur est “Entrer un texte”

Votre fichier ressemblera donc à ceci

<resources>

<string name="app_name">MonAppli</string>

<string name="str_chp_saisie">Entrer un texte</

string>

<string name="action_settings">Settings</string>

</resources>

Compilez et lancez l’application, l’émulateur affichera un écran tel que dans la figure 3.7. Tapez un texte et remarquez comment la taille du champ de saisie s’adapte à la longueur du texte.

Rajouter un bouton

. Dans le fichier rajoutez une chaine de caractère qui s’appelle

"btn_envoyer" et qui vaut Envoi.

. Dans le fichier du layout rajoutez un élément <Button> tel que

<Button

android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/btn_envoyer" />

Lancez l’application. Vous devez voir un bouton à coté du champ de saisie (fig.3.8a). Si vous souhaitez que votre champ de saisie occupe toute la largeur de l’écran qui reste après le positionnement du bouton il faut spécifier un poids de 1 au EditText et une largeur de 0.

Figure 3.7 – Premier test de l’application modifiée

                     (a) Disposition par défaut                                      (b) Le EditText a un poids de 1

Figure 3.8 – Champ de saisie et bouton

<EditText                           

android:layout_weight="1" android:layout_width="0dp"

/>

Pour répondre à un appui sur le bouton il suffit de définir un attribut android:onClick pour le bouton en lui donnant comme valeur le nom de la méthode qui devrait être appelée quand le bouton est appuyé, et d’implémenter cette méthode de réponse dans la classe principale de l’activité.

. Dans le fichier xml du layout, rajoutez l’attribut android:onClick à l’élément bouton tel que :

<Button android:onClick="envoiMessage"

/>

. Dans la classe Principale rajoutez la méthode

/** Méthode appelée quand on appuie sur Envoi */

public void envoiMessage (View view){

// le code de traitement ira ici

}

Il faut absolument respecter cette signature pour la méthode afin que le  système puisse l’associer au nom donné par android:onClick. Le paramètre view est rempli par le système et correspond à l’élément qui a généré l’évènement (le bouton Envoi dans notre cas).

Avant d’aller plus loin dans le traitement, vous pouvez déjà tester si l’appel s’effectue correctement quand le bouton est appuyé. Pour cela, mettez un point d’arrêt à l’intérieur de la méthode envoiMessage() et lancez l’application en mode Debug (fig. 3.5).

. Dans l’émulateur appuyez sur le bouton Envoi et vérifiez que le programme entre bien dans la méthode envoiMessage().

. Arrêtez le débogage et revenez en mode Java en cliquant sur le bouton correspondant en haut à droite de l’IDE.

Figure 3.9 – Création d’une nouvelle activité

Dans la suite, nous allons répondre à l’appui du bouton en lançant une deuxième activité qui affichera le texte qu’on aurait tapé dans le champ de saisie de l’activité principale.

Création d’une activité

. Dans la barre de menu d’Android Studio allez dans File > new et

sélectionner Activity, puis Blank Activity.

. Définissez les paramètres de l’activité comme dans la figure 3.9

En plus des champs déjà vus au moment de la création de l’activité principale, vous remarquez que pour notre nouvelle activité il faut définir une activité parent.



Ceci est utile pour implémenter le comportement par défaut du bouton retour.

Une fois l’activité créée Android Studio génère :

. un fichier contenant le code la classe

. les fichiers xml correspondant au layout de la nouvelle activité

. un élément <activity> dans le fichier et affecte ses attributs avec les valeurs que nous avons précisées lors de la création de l’activité

<activity

android:name=".AffichMessage"

android:label="@string/

title_activity_affich_message" android:parentActivityName=".Principale"

android:theme="@style/AppTheme.NoActionBar">

<meta-data

android:name="android.support.PARENT_ACTIVITY"

android:value="android.polytech.monappli.

Principale" />

</activity>

. une chaine de caractère dans le fichier correspondant au titre de notre nouvelle activité.

<resources>

<string name="title_activity_affich_message">

MonMessage</string>

</resources>

Lancement de l’activité

Pour faire communiquer les deux activés (l’activité principale et celle que nous venons de créer) il faut passer par un Intent. Ce dernier représente l’intention de faire quelque chose, et permet à l’activité principale de lancer l’activité d’affichage.

Dans la méthode envoiMessage() de la classe Principale :

. Créez une intention,

Intent intent = new Intent(this, AffichMessage.class);

sans oublier d’importer la classe. (l’IDE vous le propose automatiquement Alt+Entr)

import android.content.Intent;

A la construction de l’objet intent, nous précisons deux arguments : le premier est un objet de type Context qui fait référence à l’application qui crée l’intention et le deuxième précise le nom (de la classe) de l’activité qui reçoit l’intention. Comme le Intent peut être utilisé pour faire communiquer deux applications, il ne suffit pas de préciser uniquement le nom de l’activité qui le crée mais il faut également définir l’application qui l’invoque.

. lancez l’activité

startActivity(intent);

Compilez et exécutez l’application et appuyez sur le bouton Envoi. La nouvelle activité se lance, pour l’instant elle est vide. Notez que le bouton de retour est déjà fonctionnel et permet de remonter à l’activité principale. Ceci est dû au fait que nous l’avons indiquée comme activité parent au moment de la création de notre activité d’affichage.

Communication entre les activités

Envoyer un message

Si nous souhaitons que le texte tapé dans l’activité principale soit affiché dans l’activité d’affichage, il faut faire communiquer les deux activités de sorte à ce que la première envoie le texte à la deuxième. Ceci s’effectue en utilisant le même Intent qui a servi pour le lancement de l’activité. En effet une intention peut aussi transporter un paquet de données.

Modifier la méthode envoiMessage() pour qu’elle contienne le code ci-dessous, sans oublier d’importer les classes nécessaires.

public void envoiMessage (View view){

Intent intent = new Intent(this, AffichMessage.class);

EditText editText = (EditText) findViewById(R.id. chp_saisie);

String message = editText.getText().toString(); intent.putExtra(MESSAGE_SUPP, message);

startActivity(intent);

}

La méthode findViewById() permet de retrouver un objet de type View à partir de son identifiant. Ici elle renvoie l’objet correspondant à chp_saisie qu’on cast en EditText. La variable editText contient désormais l’objet champ de saisie que nous avions posé sur l’interface principale. Nous récupérons ensuite la chaine de caractère que contient ce champ en appelant editText.getText().toString(). Cette chaine est ensuite stockée dans la variable message qui est passée en paramètre à la méthode putExtra() de l’objet intent afin de charger l’intention avec ce message. Afin que l’activité d’affichage puisse identifier et récupérer les données supplémentaires transportées par l’intention il faut définir une clé pour ces données moyennant une constante publique. Nous définissons donc la constante MESSAGE_SUPP dans la classe Principale.

public class Principale extends ActionBarActivity {

public final static String MESSAGE_SUPP = "android.

polytech.monappli.MESSAGE";

En général on définit ce genre de clé en utilisant le nom de notre package comme préfixe. Ceci garantit l’unicité des clés dans le cas où notre application interagit avec d’autres.

Récupérer et afficher le message

Arrivés à ce point, nous avons fait en sorte à ce que l’activité principale envoie un message à l’activité d’affichage. Il nous reste maintenant à récupérer ce message dans AffichMessage. Pour cela il suffit de rajouter le code ci-dessous dans la méthode onCreate() de la classe AffichMessage . Cette méthode est appelée à la création de l’activité.

Intent intent = getIntent(); String message = intent.getStringExtra(Principale.MESSAGE_SUPP

);

Ensuite, pour afficher le message nous allons créer un TextView, lui affecter le message puis le rajouter au layout.

Dans les sections précédentes nous avons appris à créer et rajouter des composants à partir du fichier xml, ici nous le faisons dans le code.

Voici le code complet de la méthode onCreate()

protected void onCreate(Bundle savedInstanceState) { /*appeler onCreate de la classe mère*/

super.onCreate(savedInstanceState);

/*récupérer le message transporté par l’intention*/

Intent intent = getIntent();

String message = intent.getStringExtra(Principale.

MESSAGE_SUPP);

/*créer le textView*/

TextView textView = new TextView(this); textView.setTextSize(40); textView.setText(message);

/*définir le layout activite_affich_message comme étant le layout de l’activité*/

setContentView(R.layout.activite_affich_message);

/*récupérer le layout*/

TableLayout monLayout = (TableLayout) findViewById(R.

id.affich_message_layout);

/*rajouter le textView au layout*/

monLayout.addView(textView,0);

/*définition de la barre d’action */

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar); setSupportActionBar(toolbar);

/*définition du bouton flottant*/

FloatingActionButton fab = (FloatingActionButton)

findViewById();

fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

(view, " ", Snackbar.

LENGTH_LONG)

.setAction("Action", null).show();

}

});

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

}

Dans le fichier rajoutez un identifiant pour le layout tel que

android:id="@+id/affich_message_layout"

et changez le RelativeLayout en TableLayout. Nous aurions pu laissé en relatif mais la disposition tabulaire nous servira pour la suite du tutoriel.

Exécutez l’application, entrez un texte dans le champ de saisie et appuyez sur le bouton Envoi. Votre texte devrait apparaitre sur l’écran suivant.

Il existe deux façons de faire des animations avec Android. La première est basée sur l’affichage d’une série d’images qui constituent l’animation. C’est la méthode la plus simple. La deuxième méthode, quant à elle, repose sur le calcul de transformations mathématiques pour animer graphiquement un objet. Alors que la première, basée sur les images, est gourmande en terme d’espace de stockage (taille de l’application) la deuxième, dite vectorielle, nécessite plus de ressources de calculs. Dans le cadre de ce tutoriel nous nous limiterons à l’introduction de la méthode la plus simple, vous pouvez vous référez à [2] pour une explication des animations vectorielles.

Pour commencer il faut créer, pour chaque résolution, une série d’images qui composera l’animation. Joint à ce tutoriel nous proposons 12 images définissant une séquence de rotation de la terre pour la résolution hdpi.

. Copiez les images dans le dossier app\src\main\res\drawable

. A l’aide d’un clic droit sur le dossier res dans l’explorateur Android Studio sélectionnez New>Andriod Resource File nommez-le et renseignez les champs comme dans la figure 3.10. Cliquez ok.

. Modifiez le code du fichier créé tel que

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

<animation-list xmlns:android="http://schemas.android.

com/apk/res/android" android:oneshot="false">

<item android:drawable="@drawable/image1"

android:duration="250" />

<item android:drawable="@drawable/image2"

android:duration="250" />

<item android:drawable="@drawable/image3" android:duration="250"/>

Figure 3.10 – Création d’une ressource animation

<item android:drawable="@drawable/image4"

android:duration="250" />

<item android:drawable="@drawable/image5"

android:duration="250" />

<item android:drawable="@drawable/image6"

android:duration="250" />

<item android:drawable="@drawable/image7"

android:duration="250" />

<item android:drawable="@drawable/image8"

android:duration="250" />

<item android:drawable="@drawable/image9"

android:duration="250" />

<item android:drawable="@drawable/image10"

android:duration="250" />

<item android:drawable="@drawable/image11"

android:duration="250" />

<item android:drawable="@drawable/image12"

android:duration="250" />

</animation-list>

Le paramètre android:oneshot est mis à “false" pour que l’animation boucle indéfiniment. Pour chacune des images il faut préciser android:duration qui définit la durée d’affichage de l’image en ms.

Pour faire apparaitre l’animation il faut rajouter un élément <ImageView> dans le layout principal.

<ImageView

android:id="@+id/animTerre" android:layout_width="wrap_content" android:layout_height="wrap_content"

android:contentDescription="@string/ anim_terre_descript"/>

L’attribut android:contentDescription permet de définir un label pour l’image. Android Studio donnera un avertissement si vous ne fournissez pas

cette description pour assurer l’accessibilité de votre application à tous les utilisateurs. N’oubliez pas de définir la chaine de caractère anim_terre_descript dans le fichier .

Il reste plus qu’à charger et lancer l’animation. Dans le code de la méthode onCreate() de la classe Principale, rajoutez le code ci-dessous après l’appel à onCreate() de la classe mère et l’appel à setContentView().

/* Charger le ImageView qui va contenir l’animation et son fond comme étant la ressource xml que nous avons créée*/ ImageView img = (ImageView) findViewById(R.id.animTerre); img.setBackgroundResource(R.drawable.anim_terre);

/*récupérer le background, transformé en un objet

AnimationDrawable*/

AnimationDrawable frameAnimation = (AnimationDrawable) img.

getBackground(); /*démarrer l’animation*/ frameAnimation.start();

Exécutez l’application, vous verrez l’animation s’afficher à droite de l’écran à coté du bouton (fig. 3.11). Un LinearLayout ne compte qu’une ligne, tous les éléments sont donc disposés sur la même ligne. Si on souhaite placer l’animation sur une ligne à part, il faudrait mettre deux LinearLayout ou bien changer le type de layout.

Pour changer de layout on pourrait bien entendu modifier directement le code xml pour remplacer <LinearLayout> par un autre type en adaptant les attributs du

Figure 3.11 – Animation en LinearLayout

layout, ainsi que ceux des éléments qui y sont disposés, mais on pourrait également le faire graphiquement.

. Ouvrez le fichier

. Sélectionnez l’onglet Design (fig.3.5). Dans l’arborescence des composant à droite le LinearLayout apparait (si ce n’est pas le cas cliquez tout simplement sur l’appareil). A l’aide d’un clic droit sur LinearLayout sélectionnez Morphing et passez en RelativeLayout(fig. 3.12 )

. Passez en mode Text. Vous verrez certains attributs surlignés car ne sont pas compatible avec le nouveau layout. Comme par exemple android:layout_a android:layout_marginLeft, android:layout_weight. Supprimezles.

. Repasse en mode Design et positionnez les éléments comme vous le souhaitez sur l’interface.

Exécutez l’application, l’activité devrait ressembler à la figure 3.13

Remarquez que dans le mode Design vous pouvez directement glisser et déposer des composants sur l’interface. Le fichier xml sera mis à jour automatiquement. C’est la façon la plus simple et la plus rapide pour faire la conception graphique de votre activité.

Création et contrôle des animations à partir du code

Nous venons de créer une animation à partir des fichiers xml, cependant dans certaines situations il est utile de créer et de contrôler des animations depuis le code Java. Nous allons, dans ce qui suit, refaire la même animation dans l’activité AffichMessage mais, cette fois, à partir du code de la classe. Nous en

Figure 3.12 – Modification du layout

Figure 3.13 – Animation en RelativeLayout

profiterons pour apprendre à créer des boutons dans le code Java et à gérer leurs évènements.

. Créez trois données membres de la classe AffichMessage tels que

protected Button playBtn; protected Button stopBtn; protected ImageView globe;

. Dans la méthode onCreate() créez le globe et associez-lui l’animation créée précédemment

globe = new ImageView(this); globe.setImageResource(R.drawable.anim_terre);

. Toujours dans onCreate(), créez les deux boutons et gérez leurs clics

/*créer le bouton stop*/ stopBtn = new Button(this); stopBtn.setText(R.string.btn_stop);

/*définir et implémenter le callback du Click*/ stopBtn.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

AnimationDrawable monAnimation =(

AnimationDrawable)globe.getDrawable(); ();

} });

/*créer le bouton play*/ playBtn = new Button(this); playBtn.setText(R.string.btn_play);

/*définir et implémenter le callback du Click*/ playBtn.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

AnimationDrawable monAnimation =(

AnimationDrawable)globe.getDrawable(); monAnimation.start();

} });

Pensez à définir les chaines de caractères btn_play, et btn_stop dans

. Ajoutez globe, play_btn etstop_btn au layout

monLayout.addView(globe,1);

monLayout.addView(playBtn,2);

monLayout.addView(stopBtn,3);

Exécuter et tester le comportement de l’application.

La plupart du temps quand il s’agit de concevoir un jeu, il est indispensable de pouvoir dessiner sur l’écran. Dans cette section nous allons créer une classe dérivée de View que nous personnaliserons pour faire déplacer une image sur l’écran et interagir avec l’utilisateur.

Création de la classe MonViewPerso

. Dans l’explorateur d’Android Studio faites un clic droit sur le package contenant vos classes (android.polytech.monappli) et sélectionnez New> Java Class

. Nommez-la MonViewPerso

. Cliquez sur Ok, Android Studio génère un fichier

. Faites hériter cette nouvelle classe de View.

Une erreur s’affiche déjà, il faut définir explicitement un constructeur qui fait appel au constructeur de la classe de base. En effet si nous ne le définissons pas, un constructeur par défaut, sans paramètre, est rajouté implicitement et fait appel au constructeur View() sans paramètre, or ce dernier n’existe pas. La classe View ne définit que des constructeurs avec arguments.

Nous définirons donc le constructeur ci dessous

public MonViewPerso(Context context,AttributeSet attrs) {

super(context,attrs);

}

Afin de définir comment notre vue se dessine sur l’écran il faut implémenter la méthode onDraw()qui sera invoquée automatiquement par le système à chaque fois qu’il a besoin d’afficher ou de rafraichir le View.

Nous définirons d’abord un objet de dessin (une sorte de pinceau) comme attribut de la classe MonViewPerso

Paint p = new Paint();

que nous utiliserons dans la méthode onDraw() comme suit

public void onDraw (Canvas canvas)                                  {

/*définir la couleur de l’objet de dessin */

p.setColor(Color.BLACK);

/*définir son style en remplissage*/

p.setStyle();

/*dessiner un rectangle qui occupe la totalité du View*/ canvas.drawRect(0,0,getWidth(),getHeight(), p);

/*définir une autre couleur pour dessiner un texte*/

p.setColor(Color.WHITE); /*définir la taille du texte*/

p.setTextSize(20);

/*définir le centre du texte comme étant son origine*/

p.setTextAlign(Paint.Align.CENTER);

/*dessiner le texte en positionnant son origine au centre du

View */

String texte = getResources().getString(R.string.hello_world); canvas.drawText(texte, getWidth()/2, getHeight()/2, p); }

Avec le code ci-dessus notre vue consistera en un écran noir au centre duquel on affiche Hello World! en blanc. L’argument canvas, que le système passe à la méthode onDraw(), représente la zone de dessin de l’écran. La méthode

public void drawText (String text, float x, float y, Paint paint);

dessine l’origine du texte à la position donnée par x et y. L’origine du texte est définie avec

public void setTextAlign (Paint.Align align);

Notez qu’ici nous avons juste affiché un texte défini dans , mais il est également possible de créer des chaines de caractères formatées pour, par exemple, récupérer des valeurs de variables. Modifiez le code pour définir le texte tel que

texte = String.format("%s %d x %d",texte,canvas.getWidth(),

canvas.getHeight());

pour afficher, en plus du Hello World, la résolution de l’écran.

Notez qu’ici nous récupérons les dimensions du canvas qui ne sont pas égales à celle du View que nous avions utilisées dans drawText(). En effet la taille de notre vue est inférieure à celle de l’écran.

Si vous voulez changez la taille du texte il suffit de rajouter

p.setTextSize(50);

avant l’appel a drawText()en lui donnant en paramètre la taille que vous souhaitez. Pour rendre l’application plus modulaire, s’adaptant aux appareils, on préfère définir la taille de texte dans le fichier de ressources dédié aux dimensions

<dimen name="myFontSize">20sp</dimen>

l’utilisation de sp implique que la taille de votre texte s’adaptera non seulement à la résolution de l’appareil mais aussi aux préférences de police que l’utilisateur a paramétré.

Il faut ensuite récupérer la taille à partir du code pour la passer à setTextSize()

int size = getResources().getDimensionPixelSize(R.dimen.

myFontSize);

p.setTextSize(size);

Création d’une activité qui contiendra la vue personnalisée

Afin d’afficher notre vue il faut l’associer à une activité. Nous commencerons par la création d’une activité que nous nommerons MonJeu, comme vu précédemment.

Nous définirons l’activité Prinicpale comme activité parent de MonJeu. Une fois l’activité créée avec le Wizard, Android Studio la rajoute au Android-

et crée le .java associé et les .xml de son layout.

Pour lancer cette activité nous rajouterons un bouton sur l’interface principale. Nous avons déjà vu comment rajouter un élément sur un layout dans le fichier xml, mais nous pouvons également le faire dans le Design. . Ouvrez le fichier . Sélectionnez l’onglet Design.

. Dans la palette de composants, sélectionnez un bouton, glissez-le et déposezle sur l’interface de l’activité.

. Dans la fenêtre de propriétés définir :

•    Id : @+id/btn_jeu

•    Text : @string/btn_jeu (sans oublier de définir btn_jeu dans )

•    On Click : jouer

. Le fichier est mis à jour avec les propriétés que nous venons de définir

. Dans le code de la classe Principale implémenter la méthode jouer() qui répondra aux appuis sur le bouton

public void jouer (View view){

Intent intent = new Intent(this, MonJeu.class);

startActivity(intent);

}

Si vous testez l’application (fig.3.14 ), l’appui sur le bouton que nous venons de rajouter lancera l’activité MonJeu. Cependant celle ci n’est pas encore associée à notre vue. Il nous reste donc à rajouter un élément <MonViewPerso> sur le layout de l’activité.

. Modifier le fichier en rajoutant un élément <MonViewPerso> tel que

<android.polytech.monappli.MonViewPerso

android:id="@+id/maVue" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_alignParentTop="true" />

Vous pouvez également faire cela de façon graphique dans le Design. En effet, notre vue personnalisée apparait maintenant dans la palette et nous pouvons la rajouter sur l’activité avec un glisser-déposer.

Interaction avec l’utilisateur

Dans la suite nous souhaitons afficher une image sur la vue personnalisée et permettre à l’utilisateur de la déplacer en la touchant.

. Rajoutez l’image au projet. Joint à ce tutoriel nous proposons des images de planètes pour différentes résolutions qui sont utilisées dans [2]. Placez les images dans le dossiers drawable.

Figure 3.14 – Ajout d’un bouton pour lancer le jeu

. Dans la classe MonViewPerso créez des attributs pour contenir l’image, sa taille et sa position

Bitmap planet =null; float xOri=0,yOri=0; int largImage,hautImage;

. Dans le constructeur de MonViewPerso, récupérez l’image et ses dimensions6

BitmapDrawable d = (BitmapDrawable) getResources().

getDrawable(R.drawable.earth); planet = d.getBitmap(); largImage=planet.getWidth();

6. Jusqu’à la version API 21, getDrawable() s’utilisait avec un seul paramètre, depuis cette méthode a été modifiée et nécessite un deuxième paramètre qui définit le thème. Si vous l’utilisez avec un seul paramètre, l’IDE vous indiquera que cette méthode est obsolète mais compilera quand même. Si vous utilisez deux paramètres (en passant par exemple null en deuxième argument) et que votre minSdkVersion est inférieur à 21, une erreur se produit. Dans ce cas, vous avez deux possibilités :

•    soit vous changez le minSdkVersion (dans le gradle.build) pour le mettre à 21 mais dans ce cas vous perdez la compatibilité avec les versions plus anciennes.

•    ou bien, vous conditionnez l’appel de getDrawable() par if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)

si c’est vrai vous faites l’appel avec deux paramètres, dans le cas contraire vous l’appelez avec un seul.

hautImage=planet.getHeight();

. Dans la méthode onDraw()dessinez l’image (après drawRect())

canvas.drawBitmap(planet, xOri, yOri, p);

Exécutez l’application, vous devriez voir l’image s’afficher en haut à gauche de votre vue (fig.3.15). Afin de réagir au toucher de l’utilisateur il faut implémenter la méthode onTouchEvent() qui est appelée quand l’utilisateur touche l’écran.

public boolean onTouchEvent (MotionEvent event){ int action = event.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: /*on a touché l’ecran*/

/*calculer la distance de la touche à l’origine de l’image

*/ deltaX = () - xOri; deltaY = () - yOri; /*tester si on a touché la planète*/ if (deltaX>= 0 && deltaX <= largImage

&& deltaY>= 0 && deltaY <= hautImage)

/*on a touché l’image, permettre le movement*/ move = true;

break;

case MotionEvent.ACTION_MOVE: /* le doigt bouge sur l’écran*/ if(move){

/*si le movement est permis, mettre à jour les

coordonnées de l’image*/

xOri = () - deltaX; yOri = ()- deltaY;

} break;

case MotionEvent.ACTION_UP: /*le doigt a quitté l’écran*/ move = false; break;

}

/*forcer un repaint pour rafraichir l’affichage*/ invalidate ();

return true;

}

Les attributs deltaX, deltaY et move sont définis tels que

Figure 3.15 – Activité avec vue personnalisée



float deltaX=0, deltaY=0; boolean move=false;

Exécutez et testez l’application. On pourrait rajouter des conditions afin d’interdire à la planète de sortir de la vue.

Dans certaines applications on est parfois amené à effectuer une tâche après un certain délai, ou bien périodiquement toutes les x ms. Nous allons, dans la suite, introduire la notion de temporisation que nous utiliserons pour faire déplacer notre planète le long de l’écran.

Pour ce faire nous passerons par un objet Handler qui permet de programmer l’appel d’une méthode après un délai déterminé.

. Dans la classe MonViewPerso, définir un attribut de type Handler tel que

Handler timerHandler = new Handler();

. Dans le constructeur poser une tâche à exécuter après 0ms

timerHandler.postDelayed(updateTimerThread, 0);

updateTimerThread est un objet de type Runnable que nous définirons dans un instant. Le fait de poster cet objet avec un délai, met l’appel à sa méthode Run() dans la queue d’exécution du processus principal pour être exécutée une fois le délai écoulé. Autrement dit, le postDelayed() programme l’appel de la méthode Run() de updateTimerThread dans 0ms.

. Définir un attribut de type Runnable tel que

private Runnable updateTimerThread = new Runnable() {

public void run() {

/*mettre à jour les coordonnées de la planète*/ xOri++; yOri++;

/*forcer le rafraichissement de l’écran*/ invalidate ();

/*reprogrammer l’objet pour une exécution dans 50ms

*/ timerHandler.postDelayed(this, 50);

} };

Avec ce code nous avons défini ce qu’on appelle une classe anonyme. Les classes anonymes en Java permettent de déclarer et instancier une classe en même temps. Elles ressemblent aux classes locales nichées mais, contrairement à ces dernières, elles ne possèdent pas de nom. On les utilise quand on veut utiliser une classe locale une seule fois. On n’a pas besoin de la nommer puisqu’on ne fera plus référence à elle ailleurs.

La définition de la classe s’effectue avec une expression au moment de l’appel du constructeur. Après l’invocation du constructeur on écrit un bloc contenant la définition de la classe. Il suffit de mettre

. new avec le nom de l’interface que la classe doit implémenter, ici Runnable, ou bien le nom de la classe mère si c’était le cas.

. suivi des parenthèses avec les paramètres du constructeur de la classe de base. Ici, comme il s’agit d’une interface, il n’y a aucun paramètre. (les interfaces n’ont pas de constructeurs)

. puis, entre accolades, le corps de la classe en terminant par un;

Lancez l’application, vous verrez la planète se déplacer en diagonale sur l’écran.

Notez qu’il est toujours possible de la déplacer avec le toucher.

Figure 3.16 – Menu de la barre d’action

 La classe Handler permet aussi la communication entre deux processus différents, vous pouvez vous référez à [3] pour en savoir plus.

Lorsque nous avons créé nos activités, à chaque fois nous sommes partis d’une activité avec barre d’action. En effet nos deux activités héritent de AppCompatActivity qui assure le support d’une barre d’action, et définissent une barre d’action avec

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);

Vous remarquerez que l’activité principale présente déjà un menu sur sa barre d’action contenant l’action Settings (dont le code de réponse par défaut ne fait rien). Vous pouvez le faire apparaitre en cliquant sur le symbole en haut à droite de l’écran (fig.3.16 ) .

En effet la classe Principale redéfinit la méthode onCreateOptionsMenu() dans la quelle elle crée un menu à partir d’une ressource xml menu_principale. Nous allons, dans la suite, apprendre à rajouter notre propre item du menu et lui définir une action. C’est très simple!

Les boutons de la barre d’action sont définis dans un fichier xml du dossier res/menu. Pour ajouter un bouton d’action à l’activité principale nous allons modifier le fichier pour y insérer un item

<item

android:id="@+id/action_mon_action" android:title="@string/action_mon_action" app:showAsAction="never"/>

L’attribut app:showAsAction définit quand et comment l’item doit apparaitre en tant que bouton sur la barre d’action. En précisant “never” notre item n’apparaitra pas sur la barre mais uniquement quand on déroule le menu. Si on précise "ifRoom|withText" le texte de l’item apparaitra s’il y a de la place.

Lancez l’application, déroulez le menu, vous devriez y voir le nouvel item. N’oubliez pas de définir la chaine action_mon_action dans .

Il nous reste maintenant à implémenter l’action à exécuter quand notre item est sélectionné par l’utilisateur. Ceci s’effectue dans la méthode onOptionsItemSelected() de la classe Principale. Repérez cette méthode et rajoutez les lignes suivantes dans son corps

if (id == R.id.action_mon_action) {

//le traitement se fera ici

return true;

}

Nous allons maintenant utiliser notre bouton d’action pour lancer une autre application du système : un navigateur par exemple. Comme nous l’avons fait pour lancer une deuxième activité de notre application, nous allons également utiliser un Intent pour lancer une deuxième application.

. Il faut d’abord créer l’intention

Uri webpage = Uri.parse("");

Intent webIntent = new Intent(Intent.ACTION_VIEW, webpage);

La classe Uri fait référence à un URI (uniform resource identifier). Ici on forme un objet Uri à partir d’une chaine de caractère définissant une adresse web. Une localisation géographique, par exemple, peut aussi constituer un URI.

. Avant de la lancer, il faut tester s’il existe une application capable de répondre à cette intention dans notre cas ça revient à tester si un navigateur est présent sur l’appareil

PackageManager packageManager = getPackageManager();

List<ResolveInfo> activities = packageManager. queryIntentActivities(webIntent, 0);

boolean isIntentSafe = () > 0;

queryIntentActivities() retourne une liste d’activités capables de gérer l’objet Intent qu’on lui passe en paramètre.

. Si la liste n’est pas vide, on peut lancer l’intention en toute sécurité

if (isIntentSafe) {

startActivity(webIntent);

}

Exécutez l’application et testez le lancement du navigateur.

Un Intent peut aussi porter un message à destination de l’autre application. On pourrait par exemple lancer l’application Calendrier en lui passant les détails de l’évènement qu’on souhaite rajouter sur notre agenda.

On peut aussi demander à ce que l’application qu’on lance nous renvoie un résultat comme pour par exemple récupérer les coordonnées d’un contact en lançant l’application Répertoire.

Des applications tiers peuvent aussi lancer notre application. Afin de gérer ces accès on peut définir des filtres d’intention et définir comment répondre à ces intentions.

Pour plus d’information sur les interactions entre les applications consultez [5].

Rendre votre application multilingue est très simple si vous avez défini tous vos textes dans . Il suffit de définir un pour chaque langue que vous voulez supporter et les placer dans des dossiers values nommés avec le code de la langue en préfixe. Par exemple values-fr pour le français, values-en pour l’anglais, values-es pour l’espagnol, etc.

Android sélectionnera les ressources appropriées en fonction de la langue que l’utilisateur a définie pour son appareil.

. Créez un dossier values-en dans le dossier res

. Copier le fichier se trouvant dans le dossier values et placer la copie dans values-en.

. Dans ce nouveau fichier traduisez le texte vers l’anglais

. Chargez l’application. Changez la Locale de l’appareil et lancer l’application : L’application passe sur la langue que vous venez de sélectionner. (La locale par défaut est peut être déjà l’anglais, dans ce cas l’application s’affichera directement en anglais)

Si jamais vous choisissez une langue que votre application ne supporte pas, ce seront les chaines de caractères définies par défaut dans qui seront utilisées.

Nous avons introduit quelques concepts de base de la programmation Android.

Avec les exemples relativement simples détaillés dans ce document nous avons présenté les premières étapes de la création d’applications.

Nous venons de vous accompagner dans vos premiers pas avec Android, maintenant c’est à vous de jouer!


Lexique

Activity

Une activité représente un écran contenant une interface utilisateur. Une application est composée d’un ensemble d’activités. Les activités peuvent interagir entre elles, intra-application ou inter-applications.

apk file

C’est un fichier en format application package produit à l’issu de la compilation d’une application Android. C’est le fichier destiné aux utilisateurs. Ce fichier inclue le code de l’application sous forme d’un executable DVM (.dex), les ressources multimédias, et le .

DVM

Dalvik Virtual Machine. C’est une machine virtuelle disponible sur tout appareil Android. Elle execute des fichiers en format .dex (format de pseudo-code optimisé)

Fragment

Un fragment représente un comportement ou une portion de l’interface utilisateur dans une activité. On peut combiner plusieurs fragments dans une même activité pour créer une interface à volets multiples et réutiliser un fragment dans plusieurs activités.

Intent

C’est un message qui permet d’activer un composant (une activité par exemple). C’est un messager qui demande une action à un autre composant (de la même application ou d’une autre)

Layout

Le layout définit la structure visuelle d’une interface utilisateur. Les

éléments d’un layout peuvent être définis soit dans un fichier XML ou bien à l’exécution à partir d’instructions dans le code. L’utilisation XML permet de mieux séparer l’apparence de l’application d’une part et le code qui définit son comportement d’autre part. Ceci permet de s’adapter plus facilement aux différentes cibles, il suffit de définir plusieurs fichiers XML pour un même code.

45

Manifest

Toute application Android doit posséder un fichier XML nommé . Ce fichier contient des informations essentielles sur l’application que le système doit connaitre pour pouvoir la lancer. Ce fichier définit le nom du package de l’application, décrit les composants de l’application, détermine le processus qui accueillera ces composants, déclare les permissions dont l’application a besoin et celles que les autres doivent avoir pour interagir avec l’application, déclare la version Android minimale pour l’application, et liste les bibliothèques dont l’application a besoin.

Resources

Ce sont les ressources en relation avec la présentation de l’application (images, fichiers audio etc.). Pour chaque fichier de ressource qu’on inclue dans le projet, un identifiant unique est créé pour référencer cette ressource. Le fait d’avoir des ressources séparées du code nous donne la possibilité de proposer des versions différentes en fonction de la configuration de la cible. En utilisant par exemple des images différentes selon la résolution de l’appareil, une mise en forme adaptée en fonction de l’orientation de l’affichage (portrait ou paysage), des fichiers de chaines de caractères en plusieurs langues pour que l’interface s’affiche dans la langue de l’utilisateur, etc.

Service

Un service est un composant qui tourne en tâche de fond, pour effectuer de longues opérations ou exécuter des tâches pour un autre processus. Un service ne possède pas une interface utilisateur.

XML

Extensible Markup Language (langage de balisage extensible), est un

langage informatique conçu pour faciliter les échanges de données entre les systèmes d’informations. Il définit un ensemble de règles pour encoder les informations en format texte d’une façon indépendante de la machine. Il est basé sur des balises, cependant celles ci ne sont pas définies par le standardard XML, c’est l’utilisateur/programmeur qui définit ses propres balises. Le langage ne fait que définir les règles d’ecriture.

La classe R est une classe générée et mise à jour automatiquement par Android Studio. Elle se trouve dans un sous dossier de app\build\generated mais qui n’apparait pas dans l’arborescence de l’IDE. Ce fichier R.java définit une classe R dans laquelle sont définis les identifiants des ressources de l’application. A chaque fois que vous rajoutez une ressource à votre application un identifiant est généré automatiquement dans cette classe vous permettant par la suite de pouvoir le référencer pour l’utiliser dans votre code. A l’intérieur de classe R sont définies plusieurs classes, dites nichées, telles que string, drawable, layout, menu, id, etc. Dans notre cas toutes les classes nichées dans R sont publiques, donc accessibles depuis l’extérieur, mais comme elles sont membres de la classe R, pour y accéder, il faut passer par R. On utilisera des notations telles que R.string puisque ces classes sont statiques. Les identifiants sont générés automatiquement dans la classe R au moment où on les crée. Quand, par exemple nous avons créé un champ de saisie avec comme identifiant chp_saisie, un attribut constant public static final chp_saisie a été défini automatiquement dans la classe id et une valeur lui a été attribuée. C’est un numéro unique qui identifie l’élément EditText que avons rajouté. Cet identifiant nous permettra de manipuler l’élément à partir du code .chp_saisie. De même, un attribut constant nommé str_chp_saisie a été généré dans la classe string. Il fait référence à la chaine de caractère et nous permettra de l’utiliser dans le code avec R.string.str_chp_saisie.

47

/*nom du package que nous avons défini*/ package android.polytech.monappli;

/******************************************************************/

/*importation des classes utilisées dans le code*/

/******************************************************************/ import android.content.Intent;

import .PackageManager; import .ResolveInfo;

import android.graphics.drawable.AnimationDrawable; import .Bundle;

import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import .AppCompatActivity; import android.support.v7.widget.Toolbar; import ; import ; import .MenuItem;

/******************************************************************/

/*Définition de la classe Principale qui hérite de AppCompatActivity*/

/******************************************************************/ public class Principale extends AppCompatActivity {

/*redéfinition de la méthode onCreate() héritée de AppCompatActivity. Elle prend en paramètre un objet de type Bundle. La classe Bundle définit un type d’objet pouvant contenir un ensemble de données, et qui est destiné à échanger des données entre les activités. La méthode onCreate() est appelée une fois par le système au premier lancement de l’activité*/

protected void onCreate(Bundle savedInstanceState) {

/* l’argument savedInstanceState permet au système de passer à l’ activité l’etat dans lequel elle était à la fin de sa dernière exectution. En effet quand on arrête une activité le système appelle une certaine méthode ( onSaveInstanceState() ) dans laquelle on peut sauvegarder certaines informations concernant l’ etat de notre activité pour les récupérer au moment où on la relance. On pourrait par exemple sauvegarder le texte qui a été


tapé à l’exécution précédente, ou bien la position d’un scroll, ou

autre, pour les remettre quand on redémarre l’activité.*/

/*appel de onCreate() de la classe mère*/

super.onCreate(savedInstanceState);

/*avec setContentView() on définit le View que contiendra (affichera) notre activité. Ici c’est le layout activite_principale (identifié

par R.layout.activite_principale)*/ setContentView(R.layout.activite_principale);

/*Définition de la barre d’action. On commence par récupérer la barre d’outils définie par l’identifiant R.id.toolbar, ensuite avec l’ appel à setSupportActionBar() on définit cette barre d’outils

comme étant la barre d’action de l’activité*/

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);

/*Définition du bouton flottant. On commence par récupérer le

composant identifié par . */

FloatingActionButton fab = (FloatingActionButton) findViewById

();

/*on définit une classe anonyme qui implémente l’interface View. OnClickListener. Pour cette classe on définit une méthode onClick () On crée un objet de cette classe anonyme et on le passe en

paramètre à setOnClickListener() du bouton flottant. Ainsi ce nouvel objet de la classe anonyme écoutera les évènnements sur le bouton flottant et dès qu’il y a un appui sur ce bouton la méthode

onClick() définie ici sera appelée */ fab.setOnClickListener(new View.OnClickListener() {

/*le paramètre view contiendra l’objet qui a déclanché l’évènnement ,

ce sera le bouton flottant ici*/

public void onClick(View view) {

/*La classe Snackbar définit un popup en bas de l’écran qu’on utilise pour afficher un message temporaire qui disparaitra automatiquement après un certain timeout. La méthode make de cette classe construit un objet Snackbar. Ici le Sncakbar créé s’ attache au parent du view passé en paramètre, affiche le message passé en deuxième argument et reste affiché pendant une durée

définie par la constante LENGTH_LONG de la classe Snackbar */

/*la méthode make() renvoie un objet de type Snackbar pour lequel on invoque la méthode setAction(). Celle ci nous permet de définir un callback pour l’action sur le Snackbar, ici on n’en définit aucun

(null). setAction() renvoie à son tour l’objet Snackbar pour lequel on invoque show() pour le faire apparaitre*/

(view, "Replace with your own action",

Snackbar.LENGTH_LONG).setAction("Action", null).show()

;}

}); }

/*La méthode onCreateOptionsMenu() est appelée au moment de la création de la barre d’action. Le système lui passe un objet Menu en paramètre, qu’on populera dans la méthode: C’est sur cet objet qu’on rajoutera les éléments du menu */

public boolean onCreateOptionsMenu(Menu menu) {

/*getMenuInflater() renvoie un objet de type MenuInflater. C’est une classe qui est capable de créer un objet menu à partir d’un fichier xml, et ce grace à la méthode inflate(). Il suffit de lui donner l’identifiant du menu xml () et l’objet

de type Menu dans lequel on veut créer les items du menu*/

getMenuInflater().inflate(R.menu.menu_principale, menu); /*il faut renvoyer true pour que le menu s’affiche*/ return true;

}

/*méthode appelée lorsqu’un item du menu est sélectionné*/ public boolean onOptionsItemSelected(MenuItem item) {

/*l’appui sur le bouton de retour est automatiquement traité si on défini une activité parent dans , on n’a pas à

le traiter ici*/

/*on récupère l’identifiant de l’item sur lequel l’action a été faite

*/ int id = item.getItemId(); if (id == R.id.action_settings) {

/*l’action settings a été sélectionnée. Ici on ne fait rien*/

return true;

/*la méthode renvoie true pour indiquer qu’elle a traité l’action

*/

}

/*si on ne traite pas l’action, on demande à la classe mère de le faire en invoquant sa méthode onOptionsItemSelected(). Si la

classe mère ne traite pas l’action elle renverra false */

return super.onOptionsItemSelected(item);

}

}

Toute activité passe par plusieurs états durant son cycle de vie, il est important de connaitre ce cycle ainsi que les méthodes qui sont appelées à chaque fois que l’application bascule d’un état vers l’autre. Le diagramme de la figure 3.1 résume le cycle de vie d’une activité. Vous trouverez une explication détaillées des différents états et méthodes ici et là.

Figure 3.1 – Cycle de vie d’une activité

[1]


Bibliographie

[1]   http

[2]   Wallace Jackson, Learn Android App Development, Apress (Springer Verlag), May 2013

[3]   https

[4]   Chris Haseman, Android Essentials, Apress, July 2008

[5]   https

53



. Ce tutoriel a été réalisé avec JDK8u65

. Si le répertoire Java n’est pas détecté automatiquement, il faudrait définir une variable d’environnement JAVA_HOME qui indique le répertoire où vous avez installé le JDK (ex :

C :\Program Files\Java\jdk1.7.0_21)

. Les images systèmes Intel nécessitent l’installation d’un accélérateur Intel (HAXM) que trouverez sur le site Intel. Une fois l’outil installé il faut activer l’accélération dans votre BIOS (activer Vt-x ). Si vous ne souhaitez pas installer un tel outil, prenez une image avec un processeur ARM.

. Il est possible d’activer certaines fonctionnalités (non essentielles) de votre application uniquement quand elle tourne sur une version qui les supporte. Pour plus d’informations consulter cette page

[5] . Si vous travaillez sur MAC OS, il n’y a rein de plus à faire. Si vous êtes sous Windows reportez vous à pour les étapes d’installation Si Vous travaillez sous Linux reportez vous à https://developer. .

[6] . Vous remarquerez qu’un classe ApplicationTest est crée automatiquement par Android Studio. Cette classe vous permet d’écrire un code pour tester les différentes fonctionnalités de votre application plutot que de les tester “à la main”. Pour plus d’informations sur la création de scénario de test consulter cette page.

. Android Studio sépare projet et module. Le module c’est une application ou une librairie. En général un projet contient un seul module de préférence quand il s’agit d’applications, mais peut contenir plusieurs modules quand on développe des librairies.

. Le Gradle est l’équivaent du gcc en lanage C et le gradle.build l’équivalent du makefile.

[9] . l’URI est une chaine de caractère qui identifie le nom d’une ressource. L’URL est une forme d’URI

. Une classe nichée est membre de la classe qui la contient. On a recours à ce genre de classe en général lorsqu’on veut définir une classe qui n’est utilisée qu’à l’intérieur d’une autre classe. Si on la déclare privée elle ne sera visible qu’a l’intérieur de la classe qui l’a définie. Par ailleurs cette dernière peut également accéder aux attributs privés de la classe nichée. C’est une façon d’améliorer la lisibilité du code en regroupant les fonctionnalités qui vont ensemble.



203