Première application Android

Nous allons aujourd’hui développer notre première application. Il s’agit d’une application très simple, qui se contentera d’afficher un SplashScreen pendant 5 secondes puis affichera un Hello World!

Si vous n’avez pas encore mis en place votre environnement Eclipse avec les plugins Android, je vous conseille de lire l’article suivant : Installation du plugin Eclipse Android.

Création du projet Android

Ouvrez Eclipse et allez dans File -> New -> Android Project. Vous obtiendrez alors la fenêtre suivante :

Saisissez alors le nom du projet. J’ai choisi HelloWorld pour la suite du tutoriel.

Clickez ensuite sur Next et sélectionnez le SDK que vous souhaitez utiliser puis clickez sur Next. Nous choisirons Android 2.1 dans la suite du tutoriel. Nous saisirons alors l’ensemble des renseignements demandés (package name, Activity) :

Nouveau projet Android

Nous clickerons alors sur Finish.

Ca y est, le projet est créé! Nous allons maintenant étudier sa structure avant de poursuivre le tutoriel.

Structure du projet

Nous venons de créer notre projet. Regardons maintenant comment il s’articule.

Voici alors l’organisation du projet :

Nous voyons alors apparaitre dans le répertoire src le package que nous avons définis précédemment. Nous avions choisi comme package com.yoannzimero.helloworld. Dans ce package, nous avons par défaut une Activity : SplashScreenActivity.java.

Nous remarquons également la présence d’un répertoire gen qui signifie generated (généré). Le fichier R.java qui s’y trouve est généré automatiquement par le plugin Android et il est inutile de le modifier. Il sera de toute manière écrasé. Le fichier R.java contient les références vers l’ensemble des ressources du projet (chaines de caractères, images, layouts, etc…).

Nous remarquons également le répertoire assets dont nous avons parlé dans un post précédent sur l’Architecture d’un projet Android.

Nous voyons également un répertoire res (pour ressources) qui contient l’ensemble des ressources de l’application (chaines de caractères, images, layouts, etc…). Chaque fois qu’une nouvelle ressource est ajoutée, le fichier R.java sera généré.

Enfin, nous voyons le fichier AndroidManifest.xml dont nous avons parlé précédemment.

Réalisation du SplashScreen

Nous allons alors commencer par réaliser notre SplashScreen. Pour cela, nous éditerons plusieurs fichiers : SplashScreenActivity.java et  le layout main.xml.

Définition des widgets et positionnement

Commençons tout d’abord par éditer le fichier main.xml. Ce fichier représentera l’ensemble des widgets (Views) qui composeront notre Activity.

Un SplashScreen simple est composé d’une image qui sera centrée dans l’écran (centrage horizontal et vertical). Nous aurons alors besoin d’utiliser un LinearLayout et une View de type ImageView.

Voyons maintenant comment les utiliser :

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical"

    android:gravity="center_vertical">

    <ImageView

        android:id="@+id/splashscreen"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/logo"

        android:layout_gravity="center"

        android:contentDescription="@string/splashscreenDescription"

    />

</LinearLayout>

Nous définissons alors une LinearLayout qui prendra la hauteur et la largeur de son parent (à savoir l’activity toute entière) grâce aux lignes android:layout_width= »fill_parent » et android:layout_height= »fill_parent ».

Nous définissons également un centrage vertical sur cette layout grâce à la ligne android:gravity= »center_vertical ». Ainsi, notre logo sera centré verticalement.

Nous avons également défini notre logo en utilisant une ImageView. La source de notre image (le chemin vers lequel on va chercher l’image) est alors défini par la ligne suivante : android:src= »@drawable/logo ». Nous plaçons alors notre fichier logo.png dans les répertoires drawable-*. Comme nous l’avons vu précédemment, le fichier R.java est généré automatiquement. Ainsi, lorsque nous avons placé notre fichier logo.png dans notre projet, R.java a été regénéré et Android nous permet alors de faire référence à notre image grâce à la commande @drawable/<image_name>.

On définira alors un centrage horizontal sur cette image grâce à la ligne android:layout_gravity= »center ». Ainsi, nous aurons bien placé notre image au centre de l’écran.

Et enfin, nous devons définir une contentDescription pour l’ImageView. Nous ne placerons pas directement de chaine de caractères comme valeur, mais nous ferons alors référence à une string qui sera présente dans le fichier res/values/strings.xml grâce à la ligne android:contentDescription= »@string/splashscreenDescription ». Il nous faudra alors définir cette valeur dans le fichier strings.xml de la manière suivante :

<string name="splashscreenDescription">SplashScreen Description</string>

Définition des actions Java

Nous allons maintenant modifier le fichier SplashScreenActivity.java de la manière suivante :

package com.yoannzimero.helloworld;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;

public class SplashScreenActivity extends Activity {

	private static final int STOPSPLASH = 0;

	// Temps au bout duquel on fait disparaître le splashScreen
	private static final long SPLASHTIME = 5000;

	// Handler qui intercepte les messages et exécute
	// des actions lorsque ces messages sont interceptés
	private Handler splashHandler = new Handler() {

		@Override
		public void handleMessage(Message msg) {
			switch (msg.what) {
			// On intercepte le message STOPSPLASH et
			// on lance l'activity MainActivity en arrêtant
			// l'activité courante (SplashScreenActivity).
			case STOPSPLASH:
				// On indique quelle Activity on veut démarrer
				Intent prefIntent = new Intent(SplashScreenActivity.this,
						MainActivity.class);
				startActivity(prefIntent);

				// On effectue un finish() pour éviter que
				// lorsque l'on appuie sur la touche "back"
				// du téléphone, on revienne sur le SplashScreen.
				finish();
			}
			super.handleMessage(msg);
		}
	};

	/**
	 * Méthode appelée au démarrage de l'activity
	 */
	@Override
	public void onCreate(Bundle icicle) {
		super.onCreate(icicle);
		// Ici, on indique que le layout à utiliser est main.xml
		setContentView(R.layout.main);

		// Ici on crée un Message qui sera envoyé avec
		// un certain décalage.
		// Ce message sera intercepté par la méthode
		// handleMessage du splashHandler
		// défini plus haut.
		Message msg = new Message();
		msg.what = STOPSPLASH;
		splashHandler.sendMessageDelayed(msg, SPLASHTIME);
	}
}

L’application ne compilera alors pas. Ceci est tout à fait normal puisque nous avons fait référence à une classe qui n’existe pas encore : MainActivity.java.

Création d’une nouvelle Activity : MainActivity.java

Avant de créer la classe MainActivity.java, nous allons tout d’abord commencer par la déclarer dans le fichier AndroidManifest.xml de la manière suivante :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yoannzimero.helloworld"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="7" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".SplashScreenActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity"></activity>
    </application>
</manifest>

Vous constaterez que nous avons simplement ajouté une ligne :

<activity android:name=".MainActivity"></activity>

Une fois le fichier AndroidManifest.xml mis à jour, nous pourrons alors créer un nouveau Layout, nous permettant alors d’afficher un texte. Ce Layout remplacera celui du SplashScreenActivity lorsque l’on souhaitera afficher le MainActivity.

Nous créerons alors le layout suivant main2.xml dans le même répertoire que main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:gravity="center_vertical">

    <TextView
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:textColor="#000000"
	    android:text="@string/HelloWorld" />

</LinearLayout>

Ainsi, nous avons défini un LinearLayout comme fait précédemment dans main.xml et nous y avons ajouté un TextView qui permettra d’afficher le texte souhaité. Nous faisons alors référence à ce texte en utilisant l’identifiant HelloWorld (cf @string/HelloWorld). Il faudra alors ajouter le texte souhaité dans le fichier strings.xml vu précédemment en ajoutant :

<string name="HelloWorld">Hello World</string>

Une fois le fichier strings.xml complété, on pourra alors créer l’Activity MainActivity.java que l’on placera dans le même package que le fichier SplashScreenActivity.java :

package com.yoannzimero.helloworld;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		// On utilisera le fichier de layout main2
		setContentView(R.layout.main2);
	}

}

Comment tester notre application?

Pour tester notre application, nous allons faire un click droit sur le projet, aller dans Run As -> Android Application :

Une fois que nous aurons clické sur Android Application, l’émulateur (Android Virtual Device) se lancera et lancera votre application.

Vous avez alors réalisé votre premier projet Android! Félicitations. Si vous souhaitez télécharger les sources, clickez ici.

Si vous rencontrez des problèmes ou si j’ai pu oublier quelque chose dans ce tutoriel, n’hésitez pas à laisser un commentaire!