Astuce-Tech, High-Tech

DevDroid #2 : se familiariser avec Android Studio

letsdevdroid2

Android Studio ?!AndroidStudio_INTRO

Android Studio est votre environnement de développement, c’est grâce à ce logiciel que vous allez pouvoir créer votre première application Android.

Le tutoriel d’aujourd’hui est la suite de l’épisode de la semaine dernière  si vous n’avez pas suivi le premier épisode,  je vous conseille fortement de commencer par ce dernier. Le tutoriel d’aujourd’hui comme son titre l’indique a pour but de vous aider à vous familiariser avec ce logiciel. Nous allons voir donc à  quoi cela ressemble, les fonctions de bases et créer une simple application de test.

Si vous avez suivi le premier tutoriel correctement Android Studio devrait être prêt à l’emploi, sans plus de blabla passons aux choses sérieuses.

NOTE : Android Studio consomme énormément de ressources ! Il est possible que le logiciel soit lent à exécuter les tâches tout dépend de votre machine, Si elle n’est pas assez puissante n’exécuter pas beaucoup de taches en même temps qu’Android Studio afin de réduire l’effort de votre machine et accélérer les choses.

Android Studio : premier tour

AndroidStudio_TOUR

C’est parti !

Exécutez Android Studio

A présent Cliquez sur NEW PROJECT…

START_STUDIO

Une nouvelle fenêtre apparaîtra :

Application Name : mettez le nom de votre application ( libre à vous de mettre ce que vous voulez )

Company Domain : mettez le nom de votre compagnie ou simplement le vôtre

Package name : le nom du package est généré automatiquement ( vous pouvez l’éditer manuellement via le petit bouton EDIT ) ce nom est unique et servira à identifier votre application.

Project Location : où sera stocké votre projet ( je vous recommande de créer un dossier spécial dans l’un de vos disques pour que vous puissiez les retrouver rapidement )

EXEMPLE :

STUDIO_Package_Name

Cliquez sur Next, à présent vous devez choisir pour quel type d’appareil vous voulez créer une application ainsi que le SDK Minimum requis. Pour ce tutoriel cochez uniquement Phone and tablets.

Le SDK Minimum requis défini le niveau d’API que vous pourrez utiliser dans votre application, plus le niveau d’api est haut plus vous avez le choix des possibilités de votre application.

Toutefois choisissez un niveau d’api assez répandu pour garantir une compatibilité élargie, utilisez aussi un sdk que vous pourrez tester sur votre appareil.

Pour ce tutoriel je vais choisir le niveau 20+ Android L parce que mon appareil tourne sous cette version. Vous pouvez bien évidemment choisir la version que vous souhaitez.

Cliquez sur Suivant, maintenant vous pouvez choisir d’ajouter une Activité prédéfinie à vote application, pour simplifier les choses nous allons choisir Fullscreen Activity  ( notre application va donc s’exécuter en plein d’écran ) et cliquez sur NEXT

STUDIO_Choix_Activity

Vous avez maintenant la possibilité de donner un nom à votre activité et son action (laissez-la par défaut, pour l’instant nous irons aux Activités et la composition avancée dans le prochain épisode 😉 ) Cliquez sur FINISH 

NOTE : Lors du premier lancement Android Studio commencera à télécharger GRADLE il est possible que cela prenne un moment selon votre connexion internet ( le fichier pèse dans les 50Mo ) pour moi cela a duré environ 30min .

Une fois gradle téléchargé et Android Studio prêt vous aurez une fenêtre similaire :

STUDIO_FINISH_LOAD

Je vois déjà vos yeux partir à gauche et à droite, sur la partie droite nous avons l’onglet PREVIEW c’est comme un émulateur qui affiche votre application et vos modifications en temps réel ( pratique pour visualiser le tout rapidement )

Au centre, nous avons la possibilité d’ouvrir plusieurs onglets, pour cet exemple l’onglet ouvert est Activity_fullscreen.xml ( l’activité que nous avons créé lors de la préparation plus haut ) il y a le mode TEXT qui affiche le code tel que la machine le voit et le mode DESIGN qui représente ce vous voyez ( nous reviendrons à ces deux dans un instant )

A droite nous avons la composition de notre projet ( Java/Android ) cette partie sera extrêmement détaillée dans l’épisode 3

pour ce tutoriel nous allons modifier de manière très simple notre application et l’exécuter pour vous donner un petit coup d’œil sur Android Studio, dans l’épisode 3 nous irons beaucoup plus loin en détaillant chaque partie, chaque dossier, chaque fichier et son rôle.

Continuons, comme vous pouvez le voir notre activité par défaut contient un fond bleu, du texte centré ( Dummy Content) et un bouton tout en bas.

Nous allons modifier tout ça rapidement pour tester.

Commençons par l’arrière-plan, choisissez la couleur de votre choix par exemple le rouge, vous devez entrer cette valeur en héxadécimal voici un petit site super simple hexCode pour mon exemple j’ai pris un genre de grenat ( hex code : b50808 )

Une fois votre code copié rendez vous à la colonne centrale et repérez la ligne Background située à la  5ème ligne ( qui signifie Arrière-plan ) vous remarquerez un code héxa ( qui réfère au bleu qui est présent par défaut ) remplacer ce code par celui de votre choix

Exemple : android:background= »#0099cc »

devient : android:background= »#b50808″

STUDIO_CENTER_JAVA

Très bien maintenant passons au Dummy Content la deuxième partie en rapport avec ce texte commence à partir de <TextView    jusqu’à   />  ( comme dit plus haut nous aborderons ces symboles et autres fonctions de langage à l’épisode trois ) 

cette partie définie la position du texte (Layout) , la couleur, le Style (gras / italique etc ), la taille, la position (gravity : centré etc ), et enfin le contenu text

Vous remarquez dans cette ligne :

android:text= »@string/dummy_content »

la présence de Dummy_content ceci n’est pas le texte a modifier ceci est le nom du string attribué à ce texte, les ressources string sont les ressources qui donne tout le contenu « texte » dans notre application il y a trois types de strings le String qui est une ressource XML qui donne un seul string une ligne.

le String Array  et le Quantity String ( nous n’allons pas nous attarder sur ça pour l’instant vu que l’épisode 3 est dédié à tout ça )

Revenons à la colonne de gauche ouvrez le dossier VALUES et double cliquez sur STRINGS.XML

STUDIO_FILES_STRINGS

Vous voyez à présent à la troisième ligne, une ligne en rapport avec la précédente qui est située dans activity_fullscreen.xml (Dossier LAYOUT) 

(android:text= »@string/dummy_content »)

Remplacez le texte entre guillemets par votre nom exemple :

<string name= »dummy_content »>DUMMY\nCONTENT</string>

à

<string name= »dummy_content »>Debab\nRami</string>

NOTE : le « \n » signifie retour à la ligne dans le texte 

Remplacez aussi le texte entre guillemets de string name= en y mettant votre nom par exemple quelque chose en rapport avec le texte écrit précédemment pour mon cas ce sera my_name

<string name= »my_name »>Rami\nDebab</string>

A présent double cliquez sur activity_fullscreen.xml  qui est dans LAYOUT

revenez à notre ligne android:text= »@string/dummy_content  et modifiez le /dummy_content par le nom du string que vous avez modifié pour ma part ce sera /my_name

exemple : android:text= »@string/my_name » 

Jetez un coup d’œil tout à droite, votre texte devrait normalement s’afficher si ce n’est pas le cas vous avez surement fait une erreur quelque part revérifiez votre code !

STUDIO_STRINGEDIT_RESULT

Super ! Maintenant modifions ce bouton inutile tout en bas Dummy Button gardons-le, modifiant juste son texte.

Vous êtes maintenant sur la section DESIGN ( que nous allons explorer de fond en comble à l’épisode 3) regardez tout en haut à droite et dépliez  le second FRAME LAYOUT  comme sur le screenshot :

STUDIO_REMOVE_BUTTON

Cliquez sur l’élément Dummy_button(button) une seule fois le bouton devrait être sélectionné sur l’aperçu

Regardez en bas dans la fenêtre Properties cliquez sur l’espace vide à coté de Background, cliquez ensuite sur les trois petits points et cliquez sur l’onglet COLOR en haut et choisissez-lui un arrière-plan, vous pouvez aussi transformer le texte plus bas en Gras / italique, etc. ( n’hésitez pas à explorer vous-même le Studio ) mais bon ne modifions pas tout pour le moment pour ne pas avoir des erreurs ( épisode 3 sera dédié à tout ça #Teasing )

revenez dans Strings.XML via l’onglet en haut et modifier le texte en ce que vous voulez

<string name= »dummy_button »>Dummy Button</string>

en

<string name= »dummy_button »>Bouton Inutile</string>

Petit détail : vous pouvez modifier l’icone de votre application via les dossiers DRAWABLE qui sont à droite ils contiennent l’icone nommée ic_launcher pour la modifier il suffit de faire clic droit sur l’icone depuis la colonne de gauche puis cliquez sur SHOW IN EXPLORER et modifiez l’icone comme vous le voulez ( encore une fois nous-y reviendrons en détail sur l’épisode 3 )

NOTE : les indications qui suivent Drawable : XHDPI , XXHDPI représentent différentes résolutions, tailles d’écran, idéal pour optimiser votre application pour différents appareils.

Excellent nous avons terminé 🙂

Maintenant il faut tester l’application ( nous vous en fait pas il n’y a rien à vérifier ou corriger, l’application est ce qu’il y a de plus basique )

Pour tester l’application directement sur votre appareil vous devez utiliser le débogage USB voici comment l’activer sur les différentes versions d’Android

Android 2.3 : Allez dans Paramètres / Applications / Développement / Débogage USB et cochez la case.

Android 4.0 à 4.1+ : Allez dans Paramètres / Options de développement / Débogage USB et cochez la case.

Android 4.2 et + jusqu’à Android L : Allez dans Paramètres / A Propos de l’appareil et tapoter plusieurs fois rapidement sur NUMERO DE VERSION  jusqu’à ce qu’il vous dise que vous êtes un développeur, faites Retour et vous aurez alors la section Options de développement / Débogage USB et cocher la case.

Connectez votre appareil au PC, attendez quelques instants une fenêtre sur votre téléphone devrait apparaître comme sur la capture faites OK

STUDIO_DEBUG

A présent pour transférer directement l’application à votre Smartphone Android cliquez sur le bouton Run App dans la barre d’outils du Studio ( Screenshots )

DEBUG_STUDIO_BUTTON

Patientez un peu une fenêtre vous demandera de choisir votre terminal

NOTE : Si vous n’avez pas de terminal Android vous pourrez configurer un émulateur mais ce n’est pas très stable pour l’instant.

Sélectionnez votre appareil de la liste et cliquez sur OK

ADT_STUDIO

Patientez un peu et l’application devrait se lancer sur votre appareil automatiquement comme sur le screenshot 🙂

APP DEMO

Voila c’est tout pour cet épisode ! Rendez-vous lundi prochain même heure pour l’épisode 3 où nous allons beaucoup plus loin dans le Studio( explications des sections, outils, boutons, composition, structure, etc. ainsi que l’exportation de votre projet en fichier APK.

ainsi qu’une petite surprise 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *