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

https://hal.archives-ouvertes.fr/cel-01241650v2

Submitted on 6 Feb 2017

HAL is a multi-disciplinary open access archive for the deposit and dissemination of sci- entific research documents, whether they are pub- lished 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.

Tutoriel Android TMTP de prise en mainDima RodriguezPolytech’ Paris Sud

Tutoriel AndroidT M

Dima Rodriguez

Décembre 2015

TP de prise en main

Table des matières

Préambule

1 Installation de l’IDE

2 Conﬁguration de l’IDE

Installation des paquets supplémentaires et des mises à jours . . . . . .

3 Notre première application Android

Création d’un projet et d’une application “Hello World” . . . . . . . . .

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

Se repérer dans le projet

. . . . . . . . . . . . . . . . . . . . . . . . .

Modiﬁcation de l’interface utilisateur . . . . . . . . . . . . . . . . . . .

Répondre aux évènements . . . . . . . . . . . . . . . . . . . . . . . . .

Créer et lancer une autre activité . . . . . . . . . . . . . . . . . . . . .

Créer des animations

. . . . . . . . . . . . . . . . . . . . . . . . . . .

Créer un View personnalisé pour gérer un jeu . . . . . . . . . . . . . .

Temporisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rajouter un bouton sur la barre d’action . . . . . . . . . . . . . . . . .

Lancement d’une autre application . . . . . . . . . . . . . . . . . . . .

Changement de langue . . . . . . . . . . . . . . . . . . . . . . . . . .

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Annexes

La classe R . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Explication du code généré par défaut pour la classe Principale . . . . .

Cycle de vie d’une activité

. . . . . . . . . . . . . . . . . . . . . . . .

Table des ﬁgures

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

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

3.2 Création d’une activité

. . . . . . . . . . . . . . . . . . . . . . .

3.3

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

3.4 Exécution de l’application . . . . . . . . . . . . . . . . . . . . . . 3.5 Aperçu de l’interface Android Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.6 Hiérarchie de LinearLayout

3.7 Premier test de l’application modiﬁée . . . . . . . . . . . . . . . .

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

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

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

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

3.12 Modiﬁcation du layout

. . . . . . . . . . . . . . . . . . . . . . .

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

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

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

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

3.1 Cycle de vie d’une activité

. . . . . . . . . . . . . . . . . . . . .

Préambule

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’eﬀectue en Java en utilisant des bibliothèques spéciﬁques. Le but de ce tutoriel est de vous familiariser avec l’esprit de développement An- droid 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 beau- coup plus ample, les exemples cités dans ce document ne devront pas brider votre

imagination ni votre curiosité. Sur le site oﬃciel pour les développeurs Android vous trouverez la documen- tation des classes, des tutoriels ainsi que les lignes directrices pour préparer une distribution Google Play. Un lexique à la ﬁn de ce document déﬁnit quelques mot du vocabulaire Android utilisé dans ce tutoriel.

1 Installation de l’IDE

Dans cette section nous allons décrire la procédure d’installation d’un environne- ment 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 trou-

ver sur le site d’Oracle 1.

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évelop- pement, 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 2

1. Ce tutoriel a été réalisé avec JDK8u65 2. Si le répertoire Java n’est pas détecté automatiquement, il faudrait déﬁnir une variable indique le répertoire où vous avez installé le JDK (ex :

d’environnement JAVA_HOME qui C :\Program Files\Java\jdk1.7.0_21)

2 Conﬁguration de l’IDE

Installation des paquets supplémentaires et des

mises à jours

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 Conﬁgure

> SDK Manager. Dans le gestionnaire (ﬁg.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. 1

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

(cid:46) Android SDK Build Tools

(cid:46) Android SDK Tools

(cid:46) Android SDK Platform Tools

(cid:46) Android Support Library

(cid:46) Android Support Repository

(cid:46) Google Repository

(cid:46) Google Play Services

d. Quand vous aurez terminé, cliquez Apply pour lancez les installations des

éléments supplémentaires.

1. 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.

Tutoriel Android

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

Polytech’ Paris Sud

Dima Rodriguez

3 Notre première application

Android

Création d’un projet et d’une application “Hello

World”

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

, et renseignez les informations comme dans la ﬁgure 3.1a

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

Application name : c’est le nom qui va apparaitre dans la liste des appli-

cations sur l’appareil et dans le Play Store.

Company domain : c’est un qualiﬁant qui apparaitra dans le nom du pa-

ckage .

Package name : il est utilisé comme identiﬁant de l’application, il permet

de considérer diﬀé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. 1

c. Cliquez sur Next. Nous arrivons à la création d’une activité (un écran avec

une interface graphique). Sélectionnez Blank Activity (ﬁg. 3.2a) et cliquez

Next.

1. 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

Tutoriel Android

(a) Conﬁguration du projet

(b) Choix des cibles

Figure 3.1 – Création d’un projet

d. Renseignez les champs comme dans la ﬁgure 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éﬁnit 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éﬁnit une fois et réutilisé dans plusieurs

activités).

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

Exécution de l’application

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

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

(a) Ajout d’une activité

(b) Personnalisation de l’activité

Figure 3.2 – Création d’une activité

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

(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 conﬁgurer un émulateur, allez dans Tools > Android > AVD Manager, un

émulateur existe par défaut, mais vous pourriez rajouter d’autres appareils en cli-

quant sur Create Virtual Device . Dans l’exemple de la ﬁgure 3.3a nous rajoutons

une tablette Nexus 10 avec une extra haute résolution (xhdpi). Nous sélectionnons

ensuite le processeur qui sera émulé (ﬁg.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 conﬁ- gurer d’autres paramètres.

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

tant à 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 (ﬁg.3.4)

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

vez 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 mi-

nutes 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 ).

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

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 2. 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 conﬁrmer l’identiﬁant de votre

2. Si vous travaillez sur MAC OS, il n’y a rein de plus à faire. Si vous êtes sous Windows reportez vous à https://developer.android.com/studio/run/oem-usb.html pour les étapes d’installation Si Vous travaillez sous Linux reportez vous à https://developer. android.com/studio/run/device.html.

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

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

ordinateur, conﬁrmez en lui indiquant de toujours faire conﬁance à cet ordinateur.

Une fois que votre application est compilée, un ﬁchier .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 ﬁchier que vous de-

vez déployer pour distribuer votre application. Le contenu de ce ﬁchier

peut être inspecté à l’aide de n’importe quel logiciel standard de com-

pression/décompression de ﬁchiers.

Se repérer dans le projet

La ﬁgure 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 diﬀé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 ﬁchiers de code Java, les ﬁchiers XML, et les ﬁchiers 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éﬁnit le comportement de l’application (situé dans le répertoire

Polytech’ Paris Sud

Dima Rodriguez

ExplorateurPalette des composants graphiquesNavigateur desfichiers ouvertsListe des composants de l'activitéPropritétés du composant selectionnéNavigation entre vue graphique et xmlOutputAperçu de l'activitéExécution et DebugCompilationiTutoriel Android

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éﬁnissent 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 (Principale.java) 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 projet 3 Par 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 ﬁchiers XML qui déﬁnissent la disposition des composants

sur l’écran. Il contient déjà, dès la création du projet, le layout de l’ac-

tivité principale que nous avons créée. Deux ﬁchiers XML sont crée par Android Studio : activite_principale.xml et content_principale.xml. Le premier déﬁnit l’apparence générale de l’activité : sa disposition, sa taille,

sa barre d’outil, éventuellement des boutons d’action ﬂottant (dans notre

cas un bouton email est rajouté) ainsi que son layout qui n’est autre que content_principale.xml. 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 po- pulant correctement ces dossiers on peut ainsi créer des applications avec une interface qui s’adapte à chaque résolution d’écran avec un seul ﬁchier

.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)

3. Vous remarquerez qu’un classe ApplicationTest est crée automatiquement par An- droid Studio. Cette classe vous permet d’écrire un code pour tester les diﬀérentes fonction- nalité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.

Polytech’ Paris Sud

Dima Rodriguez

iTutoriel Android

hdpi

xhdpi

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

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 ﬁchiers XML déﬁnissant les menus

mipmap contient les images de l’icône de votre applications sous diﬀérentes

résolutions.

values contient les ﬁchiers XML qui déﬁnissent 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 com- piler et générer les applications. Pour fonctionner le Gradle a besoin d’un

script qui déﬁnit les règles de compilation et génération (conﬁguration 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éﬁnit entre autre la version du SDK utilisée pour la com- pilation, la version minimale du SDK nécessaire pour faire tourner l’applica-

tion (rétro-compatibilité), l’identiﬁant de l’application (le nom du package), etc. 5

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

cation.

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.

Modiﬁcation de l’interface utilisateur

Pour l’instant notre application ne fait qu’aﬃcher un message sur l’écran, dans cette section nous allons modiﬁer l’interface pour y mettre un champ de saisie et

4. 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.

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

Polytech’ Paris Sud

Dima Rodriguez

iTutoriel Android

un bouton. Une interface utilisateur est en général constituée de ce qu’on appelle des ViewGr- oups 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 ViewGrou- ps sont des conteneurs qui déﬁnissent une disposition des composants (Views) qui y sont placés. ViewGroup déﬁnit la classe de base des diﬀérents layouts.

Comprendre le layout

La disposition de notre interface est déﬁnie dans le ﬁchier content_principale.xml situé dans le dossier layout de res. Ouvrez ce ﬁchier.

La première balise que vous retrouverez est <RelativeLayout> qui déﬁnit le type du conteneur qui compose l’interface, il impose la façon dont les com-

posants seront disposés. Plusieurs types de conteneurs existent, les plus com- muns 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 horizon- tale, un GridView permet la disposition des éléments selon une grille qui peut déﬁler, etc. A l’intérieur de la balise <RelativeLayout> vous verrez un ensemble d’attributs déﬁnis selon le format

plateforme:caractéristique=”valeur”

Par exemple le premier attribut xmlns:android précise où sont déﬁnis les ba- lises Android utilisées dans ce ﬁchier. La balise <TextView>, ﬁlle de la balise <RelativeLayout>, déﬁnit un com- posant texte qui sera placé sur le layout. En eﬀet, c’est sur ce composant là qu’on

écrit le “Hello World” qu’aﬃche notre application. Cette chaine de caractère est déﬁnie par l’attribut android:text.

Modiﬁer le type de layout

Nous allons maintenant modiﬁer le type du layout pour le transformer en Linear- Layout. La ﬁgure 3.6 trace la dérivation de la classe LinearLayout. Nous rajouterons ensuite nos composants sur ce layout dans une disposition linéaire.

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

Figure 3.6 – Hiérarchie de LinearLayout Les layouts sont des ViewGroup qui sont eux mêmes des View [1]

Dans le ﬁchier content_principale.xml

(cid:46) supprimez l’élément <TextView> (cid:46) remplacez l’élément <RelativeLayout> par <LinearLayout> (cid:46) rajoutez l’attribut android:orientation et mettre sa valeur à “hori-

zontal”

Le code dans le ﬁchier devient ainsi

<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="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

(cid:46) Rajoutez un élément <EditText> dans le <LinearLayout> tel que

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

<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 identiﬁant 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 ﬁchier XML. id est le type de ressource et chp_saisie est le nom qu’on donne à notre ressource. Le symbole + est utilisé pour déﬁnir 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 suﬃra d’écrire @id/chp_saisie.

android :layout_width permet de spéciﬁer la largeur de élément.

“wrap_content” signiﬁe que le View doit être aussi large que néces- saire 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 lar- geur sera celle de son parent c-à-d le LinearLayout

android :layout_height idem que pour le layout_width mais pour la hau-

teur

android :hint précise le texte par défaut à aﬃcher dans le champ de saisie

quand il est vide. Nous aurions pu préciser directement la chaine de carac-

tère ici codée en dur, mais on préfère utiliser plutôt une ressource qu’on

déﬁnira dans strings.xml . Noter que l’utilisation de + ici n’est pas néces-

saire parce qu’on fait référence à une ressource concrète (qu’on déﬁnira

dans le ﬁchier xml) et non pas à un identiﬁant 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 simpliﬁer la recherche et la mise à jour

Polytech’ Paris Sud

Dima Rodriguez

iTutoriel Android

du texte, de plus ceci est indispensable pour que votre application puisse être

multilingue. l’IDE vous aﬃchera un avertissement en cas de non respect de

cette recommandation.

Après la modiﬁcation du code que nous venons de faire, quand vous sauvegarderez le ﬁchier, un message d’erreur vous indiquera que l’identiﬁant str_chp_saisie n’est pas connu. Nous allons donc le déﬁnir.

(cid:46) Ouvrez le ﬁchier strings.xml qui se trouve dans res>values (cid:46) Rajoutez une nouvelle string nommée str_chp_saisie et dont la valeur

est “Entrer un texte”

Votre ﬁchier strings.xml ressemblera donc à ceci

<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 aﬃchera un écran tel que dans la

ﬁgure 3.7. Tapez un texte et remarquez comment la taille du champ de saisie

s’adapte à la longueur du texte.

Rajouter un bouton

(cid:46) Dans le ﬁchier strings.xml rajoutez une chaine de caractère qui s’appelle

"btn_envoyer" et qui vaut Envoi.

(cid:46) Dans le ﬁchier 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 (ﬁg.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éciﬁer un poids de 1 au EditText et une largeur de 0.

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

Figure 3.7 – Premier test de l’application modiﬁée

(a) Disposition par défaut

(b) Le EditText a un poids de 1

Figure 3.8 – Champ de saisie et bouton

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

<EditText

...

android:layout_weight="1"

android:layout_width="0dp"

... />

Répondre aux évènements

Pour répondre à un appui sur le bouton il suﬃt de déﬁnir un attribut an- droid: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é.

(cid:46) Dans le ﬁchier xml du layout, rajoutez l’attribut android:onClick à

l’élément bouton tel que :

<Button

...

android:onClick="envoiMessage"

... />

(cid:46) 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 aﬁn que le système puisse l’associer au nom donné par android:onClick. Le para- mè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’eﬀec-

tue 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 (ﬁg. 3.5).

(cid:46) Dans l’émulateur appuyez sur le bouton Envoi et vériﬁez que le programme

entre bien dans la méthode envoiMessage().

(cid:46) Arrêtez le débogage et revenez en mode Java en cliquant sur le bouton

correspondant en haut à droite de l’IDE.

Polytech’ Paris Sud

Dima Rodriguez

!Tutoriel Android

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

Créer et lancer une autre activité

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

principale.

Création d’une activité

(cid:46) Dans la barre de menu d’Android Studio allez dans File > new et

sélectionner Activity, puis Blank Activity.

(cid:46) Déﬁnissez les paramètres de l’activité comme dans la ﬁgure 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éﬁnir 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 :

(cid:46) un ﬁchier AﬃchMessage.java contenant le code la classe

(cid:46) les ﬁchiers xml correspondant au layout de la nouvelle activité (cid:46) un élément <activity> dans le ﬁchier AndroidManifest.xml et aﬀecte ses attributs avec les valeurs que nous avons précisées lors de la création

de l’activité

<activity

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

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>

(cid:46) une chaine de caractère dans le ﬁchier strings.xml correspondant au titre

de notre nouvelle activité.

...

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’aﬃchage. Dans la méthode envoiMessage() de la classe Principale :

(cid:46) 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

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

qui crée l’intention et le deuxième précise le nom (de la classe) de l’acti- vité qui reçoit l’intention. Comme le Intent peut être utilisé pour faire communiquer deux applications, il ne suﬃt pas de préciser uniquement le

nom de l’activité qui le crée mais il faut également déﬁnir l’application qui

l’invoque.

(cid:46) 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’aﬃchage.

Communication entre les activités

Envoyer un message

Si nous souhaitons que le texte tapé dans l’activité principale soit aﬃché dans

l’activité d’aﬃchage, il faut faire communiquer les deux activités de sorte à ce

que la première envoie le texte à la deuxième. Ceci s’eﬀectue en utilisant le même

Intent qui a servi pour le lancement de l’activité. En eﬀet une intention peut aussi

transporter un paquet de données. Modiﬁer 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 identiﬁant. Ici elle renvoie l’objet correspondant à chp_saisie qu’on cast en EditText. La variable editText contient désormais l’objet

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

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 edit- Text.getText().toString(). Cette chaine est ensuite stockée dans la va- riable message qui est passée en paramètre à la méthode putExtra() de l’objet intent aﬁn de charger l’intention avec ce message. Aﬁn que l’activité d’aﬃchage puisse identiﬁer et récupérer les données supplémentaires transportées par l’inten-

tion il faut déﬁnir une clé pour ces données moyennant une constante publique. Nous déﬁnissons 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éﬁnit ce genre de clé en utilisant le nom de notre package comme

préﬁxe. Ceci garantit l’unicité des clés dans le cas où notre application interagit

avec d’autres.

Récupérer et aﬃcher le message

Arrivés à ce point, nous avons fait en sorte à ce que l’activité principale envoie un

message à l’activité d’aﬃchage. Il nous reste maintenant à récupérer ce message dans AffichMessage. Pour cela il suﬃt 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 aﬃcher le message nous allons créer un TextView, lui aﬀecter le message puis le rajouter au layout.

Dans les sections précédentes nous avons appris à créer et rajouter des

composants à partir du ﬁchier 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*/

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

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(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Snackbar.make(view, "...", Snackbar.

LENGTH_LONG)

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

}

});

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

...

}

Dans le ﬁchier content_aﬃche_message.xml rajoutez un identiﬁant pour le layout

tel que

android:id="@+id/affich_message_layout"

Polytech’ Paris Sud

Dima Rodriguez

Tutoriel Android

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.

Créer des animations

Il existe deux façons de faire des animations avec Android. La première est basée sur l’aﬃchage 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éﬁni