SciencesAppliquees.com

Il y a 691 invités et aucun membre en ligne

Vidéos YouTube

Handicap Visuel

Mon handicap ne se voit pas

Android en STI2D SIN : Tutoriel 1

Ma première application Android

Etudiant sur android

 

Etape 1 : Création du projet

Nous allons réaliser notre première application mobile “Hello World” avec l'IDE Android Studio.

Android Studio

a. Lancez Android Studio

Pour créer une nouvelle application, il faut réaliser un nouveau projet en cliquant sur Start a New Android Studio Project ou dans le menu File -> New Project.

start new project

 >Renseignez les informations comme dans la figure ci-dessous :

New Project

 Application name : c'est le nom qui va apparaître dans la liste des appli­cations sur l'appareil et dans le PLAY STORE.

Company Domain : l'adresse internet du site qui crée l'application.

Project location : Le répertoire où se trouvera l'application.

>Cliquez sur Next

b. Target Android Device

Choisir sur quelle plateforme va tourner votre application (mobiles, tablettes, télévisions, montres connectées).

>Complétez comme ci-dessous :

Target Android Devices

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

>Cliquez sur Next.

c. Add an activity to Mobile

Choisir le type d'application que vous souhaitez réaliser.

Le type d'activité.

>Sélectionnez Blank Activity.

>Cliquez sur Next.

d. Customize the Activity

Une application Android est composé de plusieurs fichiers. Ici, elle utilisera les fichiers suivants :

Les fichiers utilisés par l'activité.  

Activity name : le nom de l'activité (sans espace ni accent).

Layout name : le nom du fichier xml pour définir la disposition des composants
sur l’écran.

Title : le titre de l'activité.

Menu ressource name : le nom du fichier xml pour gérer le menu principal.

>Cliquez sur Finish.

Maintenant votre projet est prêt.

Fenêtres Android  

 

Etape 2 : Exécution de l'application

Il y a 2 méthodes pour compiler et tester le projet.

Méthode 1 : Sur votre PC en utilsant l'émulateur Android.

Appuyez sur le bouton d'exécution. 

Compiler le projet.

 Ensuite sélectionnez Launch emulator puis OK dans la fenêtre qui s'affiche.

Emulateur Android
L'émulateur se lance, ça peut prendre quelques minutes, soyez très patient.

 

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 sera rechargée dans l'émulateur en cours.

 

Méthode 2 : Sur un appareil réel (plus rapide)

>Connectez l'appareil par câble USB à l'ordinateur et installez le driver si nécessaire.

>Activez l'option de débogage USB sur votre appareil (en général sous Settings > Applications > Development).

>Lancez l'application depuis Android Studio comme précédemment. Android Studio charge l'application sur votre appareil et la lance.

Lancer sur le téléphone.

Normalement vous devez obtenir l'écran ci-dessous sur votre mobile :

Résultat attendu

Etape 3 : Se repérer dans le projet

La figure montre les principaux éléments de l'interface d'Android Studio.

Fenêtres 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'apk. 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 et le second comporte des sous dossiers 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 (Helloworld.java) est situé dans le sous dossier  com.sciencesappliquees.HelloWorld 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.

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

drawable et mpmap contiennent tous les éléments qui peuvent être dessinés sur l'écran : images (en PNG de préférence), formes, animations, transitions, icône, 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ésolu­tion. En gérant correctement ces dossiers on peut ainsi créer des appli­cations 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

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

Vous trouverez également dans le répertoire manifest du projet un fichier nommé AndroidMa­nifest.xml. Ce fichier est obligatoire dans tout projet ANDROID, et doit toujours avoir ce meme nom. Ce fichier permet au système de reconnaitre l'application.

 

Etape 4 : Modification de l'interface utilisateur

Pour l'instant notre application ne fait qu'afficher un message sur l'écran :

Layout Hello World

Screenshot mobile

Dans cette section nous allons modifier l'interface pour y mettre un champ de saisie et un bouton.

Une interface homme machine (IHM) 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éfinissent une disposition des composants (Views) qui y sont placés. ViewGroup définit la classe de base des différents layouts.

Objets viewgroup et view 

Comprendre le layout

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

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 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éfiler, etc.

Le fichier xml de  activity_main est par défaut est le suivant.

Le fichier Activity_main.xml 

 

Vous pouvez le visualiser en cliquant sur l'onglet Text.

A l'intérieur de la balise <RelativeLayout> vous verrez un ensemble d'attributs ou de propriétés définis selon le format

plateforme:caractéristique=”valeur”

Par exemple le premier attribut xmlns:android précise où sont définis les ba­lises ANDROID utilisées dans ce fichier.

La balise <TextView>, fille de la balise <RelativeLayout>, définit un com­posant 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. La notation "@string/hello_world" fait référence à une chaine de caractère qui s'appelle hello_world et qui est définie dans le fichier strings.xml (dans le dossier values).

Vous pouvez donc changer l'IHM de l'application en modifiant le fichier activity_main ou en modifiant le design (plus facile).

 

Modifier le type de layout.

Nous allons maintenant modifier le type du layout pour obtenir l'interface suivente :

 Nouvelle IHM

> supprimez l'élément <TextView>

> insérez l'élément <LinearLayout > horizontal.

> rajoutez dans le <LinearLayout> un champ de saisie ( Plain Text dans Text Fields ) et un bouton (button dans Widgets).

> mettez l'attribut ou la propriété layout:weight à la valeur 1 pour le champ de saisie;  

Le code dans le fichier activity_main.xml du layout ( l'IHM ) devient maintenant :

<RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"
   android:layout_height="match_parent"    android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin"    tools:context=".MainActivity">

   <LinearLayout
      android:orientation="horizontal"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:id="@+id/linearLayout"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true"
      android:layout_alignParentTop="true">

         <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/editText"
            android:text="@string/editText"
            android:layout_weight="1"
            android:inputType="text" />

         <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/button"
            android:id="@+id/button" />

   </LinearLayout>

</RelativeLayout>

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 button 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 dans le fichier R.java pour référencer cet objet. Un attribut public static final editText sera défini dans la classe id. 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/editText.

android :layout_width permet de spécifier la largeur de élément.

“wrap_content” signifie que le View doit etre 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:text 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 carac­tère ici codée en dur, mais on préfère utiliser une ressource qu'on définira dans strings.xml .

Pour ce faire, placez vous sur le champ de saisie et cliquez sur l'ampoule :

Associer le fichier string.xml

 

> Ensuite, sélectionnez l'item ci-dessous et donnez le nom editText à la variable dans le fichier string.xml :

Le nom de la variable dans le fichier string.xml > Faites de même pour le bouton et nommer la variable button.

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 sa mise à jour. 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.

> Ouvrez le fichier strings.xml qui se trouve dans res>values. Il doit ressembler à ceci :

 

<resources>
   <string name="app_name">Hello World</string>
   <string name="hello_world">Hello world!</string>
   <string name="action_settings">Settings</string>
   <string name="editText">Saisir le texte</string>
   <string name="button">Envoyer</string>
</resources>

 

> Lancez l'application. Vous devriez voir un bouton à coté du champ de saisie. 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 la propriété layout_weight à 1 pour l'objet EditText.

 

Etape 5 : Répondre aux évènements

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

> Mettez envoieMessage dans la propriété onClick de l'objet bouton.

 Evènement onClick

> Dans la classe Principale rajoutez la méthode envoieMessage.

Méthode envoie message.

 

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

public void envoieMessage (View view){

// le code de traitement ira ici

}

Il faut absolument respecter la syntaxe de 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'effec­tue correctement quand le bouton est appuyé. Pour cela, mettez un point d'arrêt au début de la méthode envoieMessage() ( point rouge ) et lancez l'application en mode Debug.

> Dans l'émulateur appuyez sur le bouton Envoi et vérifiez que le programme s'arrête bien dans la méthode envoieMessage().

Mode debug

> Arrêtez le débogage et revenez en mode normal en cliquant sur le bouton Run de l'IDE.

 

Etape 6 : Hello World

Nous allons maintenant écrire des instructions dans le code mainactivity.java pour que l'application écrive Hello devant le texte saisie par l'opérateur.

> Déclarez 2 variables globales associées au bouton et au champ de saisie :

//(1) Déclaration des variables globales (vus dans tout le programme)
Button monBouton;
EditText chpSaisie;

> Créez une instance pour chacune des variables dans la méthode onCreate() :

//(2)Associer les variables aux view (objets graphiques)
monBouton = (Button)findViewById(R.id.button);
chpSaisie = (EditText)findViewById(R.id.editText);

> Ecrivez les instructions dans la méthode envoieMessage() pour mettre Hello devant le texte saisie. 

//(3) le code de traitement ira ici
String chaineCaractere ; //Declarer une variable chaine de caractere en locale
chaineCaractere = chpSaisie.getText().toString(); //Prendre le texte dans le champ de saisie
chaineCaractere = "Hello " + chaineCaractere; //Concatener Hello et le texte saisie
chpSaisie.setText(chaineCaractere); //Mettre le texte dans le champ de saisie

Normalement le code dans MainActivity.java est le suivant :

Le code final

> Lancez l'application. Saisissez World dans le champ de saisie et appuyez sur Envoyer. Normalement, il devrait s'afficher "Hello World".

Félicitations pour votre premier programme.

Remarque :

Vous auriez pu simplifier les instruction du (3) par :

chpSaisie.setText("Hello " + chpSaisie.getText());

 

Annexe : Explications sur le code du fichier MainActivity.java

//nom du package que nous avons défini
package com.sciencesappliquees.helloworld;

/*****************************************************************
*Importation des classes utilisées dans le code
* ******************************************************************/
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

/***********************************************************************
*Définition de la classe Principale qui hérite des méthodes et fonctions d'ActionBarActivity
************************************************************************/
public class MainActivity extends ActionBarActivity {

   /*redéfinition de la méthode onCreate() héritée de ActionBarActivity. 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é*/
   @Override
   protected void onCreate(Bundle savedInstanceState) {

      /* l’argument savedInstanceState permet au système de sauvegarder 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_main (identifié par R.layout.activite_main)*/
      setContentView(R.layout.activity_main);

   }

   /*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 */
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {

      // Inflate the menu; this adds items to the action bar if it is present.
      /*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 (principale.xml) et l’objet de       type Menu dans lequel on veut créer les items du menu*/
      getMenuInflater().inflate(R.menu.menu_main, 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é
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
      /*l’appui sur le bouton de retour est automatiquement traité si on défini une activité       parent dans AndroidManifest.xml, 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();

      //noinspection SimplifiableIfStatement
      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 (c’est le comportement par défaut de ActionBarActivity)*/
      return super.onOptionsItemSelected(item);
   }
}

 Source : https://cel.archives-ouvertes.fr/cel-01082588v2

Écrit par : Richard GAUTHIER
Clics : 11073

En poursuivant votre navigation sur mon site, vous acceptez l’utilisation des Cookies et autres traceurs  pour réaliser des statistiques de visites et enregistrer sur votre machine vos activités pédagogiques. En savoir plus.