Enfin il est là le deuxième épisode de nos tutos de développement Android ! Il propose cette fois-ci une application simple mais qui nous apprendra à lire les données du GPS, d'afficher des images et de jouer des sons.
Nous poursuivrons aussi les notions de dév telles que les méthodes, les fonctions, les évènements, les écouteurs. Allez cette fois on se fait un avertisseur de dépassement de vitesse.
Je cherchais un limitateur de vitesse, ou plutôt une application qui m'avertirait lorsque je dépasse une vitesse que j'aurais choisi. Des applications disponibles sur le Play Store le font mais sont lourdes, affichent des cartes...
Je voulais quelque chose de simple, non énergivore et efficace. Cette application "Speed Limit" nous allons la coder ensemble.
Nous allons utiliser des ToggleButton, TextView, CheckBox, ImageView, le GPS, bloquer la mise en veille et la rétablir lors de la sortie de l'application, jouer un son. Méthodes, Fonctions, évènements, déclarations de variables locales et globales, types de données...voilà de quoi nous allons parler aujourd'hui.
Environnement de développement Eclipse / Android
Alors normalement votre environnement de développement Eclipse / Android est déjà opérationnel sur votre PC, si ce n'est pas le cas, un tuto dédié est là pour vous :). Vous pourrez aussi pour vous remettre dans le bain refaire notre premier tuto de dév Android.
Création du projet Eclipse
Lancez Eclipse pour créer le nouveau projet dans le même workspace que pour le tuto précédent. Cette fois nous créerons l'application pour une version minimum 2.3 d'Android (Gingerbread), autant qu'elle puisse tourner sur le plus grand nombre de nos smartphones. Avec Ice Cream Sandwich sont arrivés de nouveaux éléments graphique que nous utiliserons dans le tuto n° 3.
Donc allez on démarre. Allez dans file/New/Android Project
Ensuite, dans la fenêtre qui vient de s'afficher, on nomme le projet "TutoAndroid2" :
Faites "Next >" et dans le choix de SDK, sélectionnez 2.3.3 :
"Next>" à nouveau, et remplissez les champs comme ici :
Pour créer le projet faites "Finish". On retrouve le project dans l'explorateur de projets d'Eclipse :
On retrouve les fichiers que nous allons utiliser. "AndroidManifest.xml" où nous ajouterons les autorisations nécessaires à l'application, "main.xml" qui sera notre interface et "SpeedLimit.java" qui contient le code source de notre application.
Construction de l'interface graphique de l'application
Ouvrez "main.xml" qui se trouve dans "res/layout/" puis en bas de la fenêtre où l'on voit la page de l'application vierge cliquez sur l'onglet 'main.xml" pour voir le code source XML de l'interface graphique de notre Activity.
Cette fois-ci nous allons faire simple pour le layout, nous allons utiliser un "AbsoluteLayout", son atout sera que l'on pose les composants tels que les boutons n'importe où et ils restent où on les les met, son inconvénient c'est qu'il est "deprecated", c'est à dire qu'il est appelé à disparaître.
Le code source de notre page est :
On y retrouve notre AbsoluteLayout, nos ToggleButton, nos TextView et nos cases à cocher. Les ToogleButton sont comme des interrupteurs, des boutons qui resteraient enfoncés, ce qui convient très bien à notre cas où l'on veut se fixer une vitesse maximale.
Vous allez avoir besoin de deux images, celles ci :
Celle ci s'affichera quand on dépassera la consigne (vitesse maximale).
Et celle ci s'affichera tant que le GPS n'aura pas trouvé notre position.
Enregistrez le sur votre ordinateur et dropez les dans le dossier /res/drawable-hdpi de votre projet Eclipse :
Vous remarquerez dans le source XML de notre interface que nous avons essayé de nommer de manière explicite nos éléments comme "id/toggleButton_50", "checkBox_SON". C'est une habitude à prendre et qui vous permettra que vous retrouver facilement dans les interfaces complexes.
Principe de fonctionnement de l'application
Nous avons 5 ToogleButton qui nous serviront à fixer la vitesse maximale. En haut un champ texte, un TextView qui affichera la vitesse courante en km/h. Au centre une image dans un ImageView qui affichera l'antenne satellite tant que le GPS n'aura pas envoyé une position et une vitesse valide, qui n'affichera rien (qui sera invisible en fait) quand on roulera à une vitesse inférieure à la consigne et qui affichera la panneau jaune avec le requin si l'on dépasse la consigne.
La case à cocher "son", si elle est cochée permettra une alerte sonore en cas de dépassement de la consigne. Le son d'alerte sera le son de notification par défaut de votre téléphone et l'on n'autorisera l'alerte qu'à retentir 2 fois.
La case à cocher "vitesse compteur" si elle est cochée ajoutera 7% à la vitesse indiquée par le GPS. En effet la vitesse GPS est à considérée comme étant quasiment la vitesse chrono à laquelle on roule, et nous le savons tous les compteurs de vitesse nous mentent et nous font croire que l'on va plus vite que notre vitesse réelle (la vitesse chrono). Par expérience j'ai déterminé que le compteur de ma voiture indique 7 % de plus que le vitesse retournée par le GPS de mon Galaxy S3.
L'application sera à l'écoute d'événements lancés par le GPS à chaque fois qu'il détecte un changement de position.
Voici le principe :
Un nouvelle position est détectée :
- on traduit la vitesse GPS en km/h
- si "vitesse compteur" est cochée on ajoute 7% à cette valeur
- on affiche la vitesse ainsi calculée
- si vitesse calculée est supérieure à la consigne, on affiche l'image du requin et on joue une alerte sonore que si elle n'a pas été déjà jouée 2 fois.
Côté Code Java pour Android
On commencera par déclarer notre interface graphique et les événements dont nous aurons besoin comme les click sur les tooglebutton.
Les variables correspondantes à nos éléments graphiques seront déclarées en tant que variables globales, elles seront ainsi "visibles" par toute notre classe (partie code java de notre application). Ces variables globales sont à ajouter juste après la déclaration de la classe:
Ensuite on affecte nos variables globales aux éléments graphiques :
Puis les événements qui nous seront nécessaires :
Ici le code pour déclarer l'écouteur sur un click de tooglebutton et l'action qui sera exécutée.
En clair on fait :
- si le tooglebutton est checké, on fixe la vitesse maximale contenue dans la variable globale "vConsigne" et on passe tous les autres togglebutton à l'état "non checkés".
Ensuite nous allons voir le système de fonctionnement de lecture de la vitesse du GPS :
Nous devons déclarer quelques trucs d'abord dans la méthode "onCreate" qui est appelé automatiquement lors de l'affichage de la page
Nous avons ajouter une classe interne :
La classe mylocationlistener implémente d'interface LocationListener (au sens Java et non graphique). Elle devra donc contenir les méthodes :onLocationChanged, onProviderDisabled, onProviderEnabled et onStatusChanged.
voici le code de la classe interne :
Seul le code de la méthode onLocationChanged est "customisé" :
Son code est très simple, il est appelé à chaque changement détection de changement de position par le GPS . Si l'object Location reçu contient une vitesse on la récupère et on la traite :
La méthode displaySpeed est appelée, et on lui passe en paramètre la vitesse courante brute lue dans l'object Location :
Alors ici on va tester l'etat de la case à cocher de vitesse compteur, si elle est cochée on ajoute 7% à la valeur brute de vitesse du GPS. Au passage on arrondit la vitesse à un chiffre après la virgule par appel à la fonction "roundDecimal" et on convertit la vitesse brute en km/h en appelant la fonction "convertSpeed". On obtient ainsi la vitesse en km/h que l'on doit comparer à la vitesse maximale de consigne.
Si cette vitesse est supérieure à la consigne, on affiche la vitesse en rouge, rend l'image d'avertissement de danger visible et l'on joue une notification.
Nous ne voulons jouer l'alarme que 2 fois, donc nous avons un compteur de notification dont on teste la valeur et que l'on incrémente si nécessaire :
Notre alerte sonore est déclaré dans "onCreate" :
Si la vitesse est inférieure à la consigne, on rend l'image d'avertissement invisible et l'on remet le compteur de notifications à zéro.
Pour ne pas que l'affichage passe en veille nous devons mettre un peu de code qui modifiera le comportement de la mise en vielle , code qui est lui aussi placé dans la méthode "onCreate" :
Il ne faudra pas oublier de repasser en configuration "normale" pour la mise en vielle quand on quitte l'application. Pour cela on surcharge la méthode "onDestroy" qui est appelé lors de la fermeture de l'application :
Voila nous avons fait le tour des fonctionnalités de l'application, nous devons maintenant autoriser l'application à utiliser le GPS et à bloquer la mise en veille. Ceci se passe dans le manifest "AndroidManifest.xml" où nous devons ajouter les autorisations :
Nous allons maintenant la lancer dans l'émulateur. Cliquez sur la touche triangle vert :
L'émulateur se lance et quelques minutes après l'application démarre :
Mais l'application prendra toute sa valeur installée sur votre téléphone. Pour cela nous avons deux solutions, soit copier directement l'application (.apk) sur le téléphone ou connecter le smartphone en mode "debug usb" Eclipses vous demandera si vous voulez exécuter l'application dans l'émulateur ou sur un device qu'il aura détecter et qui sera votre téléphone.
Si vous optez pour la première solution l'application compilée se trouve ici :
Pour la deuxième solution quand vous aurez cliquer que le bouton pour lancer l'application, Eclipse vous proposera le choix suivant :
Le première ligne est l'émulateur et la deuxième votre téléphone, ici mon Galaxy S3 sous Jelly Bean.
Voila vous avez tous les élements nécessaires pour faire votre deuxième application Android :)
Pour le prochain tutoriel, j'attends vos propositions d'applications à réaliser !
Bon codage à toutes et à tous !
