Première application : Hello « moi

Création d’un projet Android

Alors pour commencer cliquez sur File >>> New >>> Android Project. Il se peut que le menu Android Project ne soit pas directement disponible, il faut alors faire File >>> New >>> Other… >>> Android >>>Android Project. Une fenêtre de création de nouveau projet Android va s’ouvrir et vous devrez y renseignerle nom du projet, la version minimal du SDK, le nom de l’application, le nom du package, le nom de l’activité créée automatiquement et enfin indiquer le numéro de l’API de la version du SDK. Bon après avoir débité mon charabia je vous mets un petit screen de ce que j’ai fait pour créer ma première application Android.

Quelques petites explications s’imposent peut être. Je pense que le nom du projet et le nom de l’application ne pose pas de problème moi j’ai mis le même nom mais il est possible de mettre deux noms différents. Le nom du package se forme également à votre convenance pas trop de changement par rapport au développement JAVA. La checkBox »Create Activity » permet de créer d’emblée une activité, c’est à dire pour faire simple une classe java qui sera exécutée par l’intermédiaire de vues. Le nom de cette activité ne doit pas être obligatoirement le même que celui du projet ou de l’application. Enfin il est nécessaire de cocher la version de la plate-forme sur laquelle on souhaite développer. Ici, moi j’ai choisi Android 1.6 (car la plupart des téléphones tournent au minimum sous Android 1.6, sauf mon HTC Hero qui tourne sous Android 1.5 mais bon… ), ensuite vous pouvez indiquer la version minimum du SDK qui correspond au chiffre dans la colonne API…

Une fois tout cela rempli, cliquez sur Finish et vous devez avoir un projet Android qui s’est créé de la façon suivante :

Sans rien toucher au projet nous allons compiler et lancer l’application, pour cela faites un clic droit sur le projet puis Run as >>> Android Application

Note : il se peut que votre projet contienne une erreur lors de sa création (petite croix rouge à côté du projet), je ne sais pas à quoi c’est dû mais le seul moyen que j’ai trouvé pour résoudre ce problème, c’est de fermer Eclipse et de l’ouvrir de nouveau. Et normalement tout devrait fonctionner.

Vous allez sûrement avoir un message vous demandant de configurer un nouvel AVD (Android Virtual Device), ce qui signifie que l’on doit configurer l’émulateur Android. Pour ceux qui l’ont déjà fait vous n’avez pas besoin de le refaire.

Configuration d’un nouvel AVD (Android Virtual Device)

Voici le message dont je viens de vous parler :

Cliquez sur Yes. La fenêtre « AVD Manager » apparait cliquez sur New.

Remplissez les champs de la fenêtre de création d’un nouvel AVD comme ci-dessous puis Create AVD et ensuite sur Launch :

Et normalement après un petit temps de chargement vous devriez voir apparaître sous vos yeux ébahis ceci :

Bon maintenant passons aux choses sérieuses (si je puis dire à notre niveau…) et commençons à programmer un petit peu.
Android : JAVA et surtout XML

IMPORTANT : N’oubliez pas d’enregistrer le projet après chaque étape (Ctrl + S)

Et oui la programmation sous Android nécessite d’utiliser du XML, mais vous verrez cela n’est pas très compliqué, alors commençons. Pour cela double cliquez sur le fichier strings.xml situé dans res >>>values et modifiez l’attribut app_name (un simple clic suffit) en lui indiquant dans le champ Value « Hello moi » (par exemple). Vous venez de changer le nom de votre application. Ainsi, avant, en haut à gauche de votre application il y avait écrit « Tutoriel1_Android », et il y aura désormais écrit « Hello moi ».

Maintenant supprimez l’attribut hello (un simple clic sur l’attribut puis cliquez sur le bouton Remove…), nous allons en créer de nouveaux (cf. ci-dessus). Pour cela, cliquez sur Add… choisissez String puis cliquez sur OK. Ensuite, inscrivez dans le champ Name : « prenom » et dans le champ Value : « Entrez votre prénom : » . Répétez l’opération d’ajout avec les couples Name/Value suivant : « prenomHint/Tapez votre prénom » et « bouton/Envoyer« .

Créons maintenant de nouveaux fichiers XML pour mettre un peu de couleurs et de grandeurs par la suite. Faites un clic droit sur le dossier values (à gauche cf. image ci-dessus) cliquez sur New >>> Android XML File puis remplissez le champ File par dimensions.xml puis cochez Values et cliquez sur Finish. Créez ensuite un nouvel attribut de type Dimension (de la même manière que précédemment pour le fichier strings.xml) avec le couple Name/Value suivant : « dimMessage/30px ». Créez de la même façon un fichier colors.xml, puis ajoutez lui un attribut de type Color avec le couple Name/Value suivant : « couleurMessage/#ffa800 « .
Création de l’interface graphique

Maintenant ouvrez le fichier main.xml (qui se situe dans res >>> layout) et copiez/collez ceci :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 
    <TextView android:id="@+id/TextViewPrenom"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="@string/prenom"
     />
 
     <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
     <EditText android:id="@+id/EditTextPrenom"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="bottom"
      android:hint="@string/prenomHint"
      />
 
     <Button android:id="@+id/ButtonEnvoyer"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/bouton"
      />
 </LinearLayout>
 
 <TextView android:id="@+id/TextViewHello"
     android:layout_width="wrap_content"
     android:layout_height="fill_parent"
     android:layout_gravity="center_horizontal"
     android:textSize="@dimen/dimMessage"
     android:textColor="@color/couleurMessage"
     />
 
</LinearLayout>

Les explications :

android:id >>> permet de donner un id à l’élément que l’on créer, ce qui nous permettra de le récupérer dans notre code java plus tard
android:layout_width et android:layout_height>>>permet de définir le remplissage de l’élément (en largeur et en hauteur)
- fill_parent >>> indique que l’élément prend toute la place disponible (en largeur et/ou en hauteur)
- wrap_content >>> indique que l’élément prend uniquement la place qu’il a besoins (en largeur et/ou en hauteur)
android:layout_gravity >>> permet de préciser la position de l’élément (center_horizontal, center_vertical, etc…)
android:text >>> permet de configurer le texte qui s’affichera, ici dans notre exemple on utilise les attributs du fichier strings.xml que l’on a créé tout à l’heure
android:textSize >>> permet de configurer la taille du texte, on utilise cette fois l’attribut du fichierdimensions.xml
android:textColor >>> permet de configurer la couleur du texte, on utilise cette fois l’attribut du fichiercolors.xml
android:hint >>> permet de configurer le texte qui s’affichera lorsque EditText est vide, et encore une fois on utilise un attribut du fichier strings.xml
android:layout_weight >>> je n’ai pas trop compris à quoi ça sert il me semble que c’est un poids déterminant la taille de l’élément par rapport à l’autre ainsi l’EditText prendra plus de place que le Button. Si un spécialiste passe par ici, qu’il nous éclaire

Voilà pour les petites explications si vous n’avez pas compris quelques choses laissez votre question en commentaire. Maintenant si l’on compile et lance l’application on devrait obtenir ceci :

Création de l’évènement en JAVA

Si tout est ok continuons et commençons à programmer en JAVA. Il va falloir mettre un écouteur d’évènement sur le bouton « Envoyer » pour récupérer le texte que vous aurez entré préalablement dans l’EditText, et afficher « Hello votrePrenom » de deux manières. Je vous donne directement le code commenté, il ne vous reste plus qu’à faire un copier/coller dans le fichier Tutoriel1_Android.java.

package com.tutomobile.android.tuto1;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
 
public class Tutoriel1_Android extends Activity {
 
 private EditText editText;
 private Button button;
 private String prenom;
 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        //récupération de l'EditText grâce à son ID
        editText = (EditText) findViewById(R.id.EditTextPrenom);
 
        //récupération du bouton grâce à son ID
        button = (Button) findViewById(R.id.ButtonEnvoyer);
 
        //on applique un écouteur d'évenement au clique sur le bouton
        button.setOnClickListener(
         new OnClickListener() {
   @Override
   public void onClick(View v) {
    //on réupère le texte écrit dans l'EditText
    prenom = editText.getText().toString();
 
           //on affiche "Hello votrePrenom ! " dans une petit pop-up qui s'affiche quelques seconde en bas d'écran
           Toast.makeText(Tutoriel1_Android.this, "Hello " + prenom + " !", Toast.LENGTH_LONG).show();
 
           /*on affiche &quot;Hello votrePrenom ! &quot; dans un textView que l'on a créé tout à l'heure
            * et dont on avait pas précisé la valeur de son texte il s'agit du dernier TextView dans le fichier main.xml
            * De toute façon grâce à l'ID vous devrez facilement le trouver dans le fichier main.xml
            */
           ((TextView)findViewById(R.id.TextViewHello)).setText("Hello " + prenom + " !");
   }
  }
        );
    }
}

Une fois que vous avez mis en place ce code JAVA, si vous lancez l’application, que vous entrez votre prénom et que vous cliquez sur le bouton « Envoyer » vous devriez voir apparaître ceci :

Voici la fin de ce premier tutoriel d’application Android, j’espère qu’il vous aura plu et surtout qu’il aura été clair. Si jamais vous avez une question bête ou compliqué, laissez un commentaire et j’essaierai d’y répondre quoi qu’il arrive car elle ne pourra que me faire progresser.

A bientôt, pour un nouveau tutoriel d’application Android et n’hésitez pas à partager ce tuto surFaceBook ou Twitter

PS : désolé pour les fautes d’orthographe mais n’hésitez pas à me les dire je les corrigerai…

Android For Arab

samedi 1 octobre 2011