Première application : Hello J2I

Comme promis pendant la semaine dernière, voici le premier tutoriel de développement Android. Si vous n’avez pas installé le SDK Android pour Eclipse  faites-le c’est indispensable. Nous allons donc faire aujourd’hui une petite variante du Hello World, le Hello « J2I».

Création d’un projet Android

Alors pour commencer cliquez sur File > New > Android Application 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 renseigner le 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.

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 ou bien directement à partir du bouton démarrer. 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)

En cliquant sur le bouton Android Virtual Device Manager comme il est indiqué dans l'image ci-dessous:

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 :

Android : JAVA et surtout XML

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

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 : "prénom" 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éation de l’interface graphique

Maintenant ouvrez le fichier activity_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"
     />
</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: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 > 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.

Voilà pour les petites explications si vous n’avez pas compris quelques choses préparez vos questions pour la semaine prochaine. 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 MainActivity.java.

package com.example.helloj2i;

import android.os.Bundle;

import android.view.Menu;
import android.app.Activity;
import android.view.View;

import android.widget.Button;
import android.view.View.OnClickListener;
import android.widget.EditText;

public class MainActivity extends Activity {
import android.widget.TextView;
import android.widget.Toast;

private EditText editText;
private Button button;
private String prenom;


@Override

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_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(

@Override
new OnClickListener() {

public void onClick(View v) {
/*on réupère le texte écrit dans l'EditText */

prenom = editText.getText().toString();
/*on affiche dans le Toast "Hello votrePrenom ! " */

Toast.makeText(MainActivity.this,"Hello " + prenom + " !", Toast.LENGTH_LONG).show();

/*on affiche "Hello votrePrenom !" dans un textView */

((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 notre première 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.

Tutoriel inspiré du tuto de tutomobile et du livre Programmation Android.