Androideur.com

Actualité, smartphones, tutoriels et applications Android

Mise en forme basique du texte du Hello World !

Publié par kann août - 19 - 2010 - Jeudi ADD COMMENTS

Nous allons voir dans ce tutoriel comment manipuler facilement la mise en forme du texte que nous avons affiché dans le tutoriel « Hello World », notre première application Android. Nous avons déjà créé un premier XML Layout que nous allons enrichir avec quelques propriétés afin de :

  • Centrer le texte
  • Changer la couleur de l’arrière plan
  • Changer la couleur du texte

Comme nous avons vu, le système de construction des Interfaces Utilisateur des applications Android se base sur des fichiers XML. Ouvrons notre fichier XML layout : res/layout/main.xml qui doit ressembler à ce-ci :

<?xml version="1.0" encoding="utf-8"?>
	<TextView xmlns:android="http://schemas.android.com/apk/res/android"
	  android:id="@+id/textview"
	  android:layout_width="fill_parent"
	  android:layout_height="fill_parent"
	  android:text="@string/hello"/>

Centrer le texte

Afin de center le texte « Bonjour Android ! », nous allons ajouter un premier attribut : gravity et demander à notre application de center horizontalement le texte. gravity prendra donc comme valeur : center_horizontal

Voyons ce que ça donne :

<?xml version="1.0" encoding="utf-8"?>
	<TextView xmlns:android="http://schemas.android.com/apk/res/android"
	  android:id="@+id/textview"
	  android:layout_width="fill_parent"
	  android:layout_height="fill_parent"
	  android:gravity="center_horizontal"
	  android:text="@string/hello"/>

Et sur l’émulateur, ça va bien donner ça :

Android XML Layout center horizontalement

On voudra Aussi center verticalement notre texte. Très intuitif, oui ; gravity prendra aussi  la valeur center_vertical.

Faisons quand même attention ici à la syntaxe :

<?xml version="1.0" encoding="utf-8"?>
	<TextView xmlns:android="http://schemas.android.com/apk/res/android"
	  android:id="@+id/textview"
	  android:layout_width="fill_parent"
	  android:layout_height="fill_parent"
	  android:gravity="center_vertical|center_horizontal"
	  android:text="@string/hello"/>

Un petit run pour vérifier :

center horizontalement et verticalement

Changer la couleur de l’arrière plan

C’est très intuitif, oui. Ajoutons un attribut background avec comme valeur un code couleur plutôt clair : #E9EEF2 par exemple (pour rester dans le thème Androideur.com)

<?xml version="1.0" encoding="utf-8"?>
	<TextView xmlns:android="http://schemas.android.com/apk/res/android"
	  android:id="@+id/textview"
	  android:layout_width="fill_parent"
	  android:layout_height="fill_parent"
	  android:gravity="center_vertical|center_horizontal"
	  android:background="#E9EEF2"
	  android:text="@string/hello"/>

Pas de surprise :

center horizontalement verticalement background

Changer la couleur du texte

Nous aurons besoin de l’attribut textColor cette fois, avec comme valeur : #535A5F.

Profitons aussi pour mettre le texte en gras en ajoutant l’attribut textStyle= »bold »

<?xml version="1.0" encoding="utf-8"?>
	<TextView xmlns:android="http://schemas.android.com/apk/res/android"
	  android:id="@+id/textview"
	  android:layout_width="fill_parent"
	  android:layout_height="fill_parent"
	  android:gravity="center_vertical|center_horizontal"
	  android:textColor="#535A5F"
	  android:textStyle="bold"
	  android:background="#E9EEF2"
	  android:text="@string/hello"/>

Un dernier run :

mise en forme texte android

Voilà tout ! Nous avons vu quelques manipulations basiques pour mettre en forme un texte dans une application Android. Nous sommes désormais prêt à voir les différents layout de plus près.

A la prochaine.

Tutoriel Android : un XML layout pour le Hello World

Publié par kann août - 1 - 2010 - Dimanche 3 COMMENTS

Après avoir développé notre première application Hello World sur Android, nous allons, aujourd’hui, apporter quelques améliorations à l’interface utilisateur en appliquant un XML layout.

Nous nous sommes contenté lors du précédent tutoriel d’afficher un bout de texte « Hello, Android » sans nous soucier de toute contrainte, ou tout autre éventuel problème que peut engendrer cette technique de « hard codage ». Supposons que nous aurons à traduire l’application en plusieurs autres langues, ou à modifier l’ergonomie. Ceux qui ont une petite expérience de développement des interfaces utilisateurs sauront tout de suite que ça va se compliquer petit à petit jusqu’à devenir un vrai cauchemar, et un code difficile à maintenir.

C’est pourquoi Android propose un autre système de construction des Interfaces Utilisateur se basant sur des fichiers XML. Voilà par exemple le XML qui gère exactement de même manière  l’interface utilisateur de notre premier Hello World :

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/textview"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:text="@string/hello"/>

La structure générale des XML layout d’Android est simple : Une arborescence d’éléments XML là où chaque nœud porte le nom d’une classe de type View. Naturellement, on peut utiliser le nom de toute sous-classe View et même celle que nous pourrions créer nous-mêmes. Cette structure nous permet de créer rapidement nos UI et de les maintenir facilement dans le futur.
Examinons de près le code précédent :

Attribut Explication
xmlns:android C’est la déclaration XML namespace qui demande aux outils Android de se référer aux attributs définis par Android namespace. Cet attribut doit obligatoirement être présent au début de tout fichier de layout Android
android:id Cet attribut assigne un identifiant unique à l’élément TextView
android:layout_width Cet attribut définit la largeur de la zone d’affichage en se référent à l’espace écran disponible. Dans notre cas, nous allons utiliser toute la largeur de l’écran
android:layout_height Tout comme le android:layout_width, sauf que ça concerne la hauteur
android:text Ca permet de définir le texte à afficher par TextView. Dans cet exemple, nous utilisons une chaîne de caractère de type « ressource » au lieu d’une chaîne « Hard-coded ». La valeur de la chaîne de caractère « hello« , est définie dans le fichier res/values/strings.xml. Il est recommandé d’utiliser cette technique en vue de faciliter la traduction des applications Android

Les fichiers XML layout sont situés sous le dossier res/layout de notre projet. « res » comme « ressources ; ce dossier contiendra toutes les ressources qui ne font pas partie du code de l’application comme les images, les fichiers audio et les textes de traduction.

Le plugin Android crée automatiquement un fichier XML layout : main.xml. Dans notre tutoriel « Hello World » nous avons ignoré ce fichier et nous avons « hard-codé » le texte à afficher, ce qui n’est pas propre.

Améliorons alors notre code :

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/textview"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:text="@string/hello"/>

Dans le Package Explorer d’Eclipse, naviguez jusqu’au dossier /res/layout/ et ouvrez le fichier main.xml. Vous aurez peut-être à cliquer sur le tab « main.xml » (en bas de la fenêtre) afin d’afficher la source. Remplacez le code par le suivant :
Et sauvegardez votre fichier
Ouvrer le fichier res/values/strings.xml. C’est le fichier dans lequel vous devez déclarer tous les textes de l’interface utilisateur de votre application. Le plugin Eclipse a du déjà déclaré deux textes : hello et app_name. Il est temps de changer le texte à afficher. Mettons « Bonjour Android ! » Par exemple.

Notre fichier ressemblera à ça :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Bonjour Android !</string>
    <string name="app_name">Hello, Android</string>
</resources>

Finalement, modifions notre classe HelloAndroid et utilisons les ressources que nous venons de déclarer :

package com.androideur.helloandroid;
 
import android.app.Activity;
import android.os.Bundle;
 
public class HelloAndroid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Et voilà !!!

Exécutons nnotre application et admirons le résultat ;)

Join the forum discussion on this post

Tutoriel Android : Hello World!

Publié par kann juillet - 27 - 2010 - Mardi 6 COMMENTS

Hello World, Hello Android !

Et nous enchaînons avec l’incontournable « Hello World ! »

Avant de continuer, assurez-vous d’avoir lu les deux tutoriaux précédents :

Installer la plateforme Android

Avant de commencer, il faut s’assurer d’avoir installé au moins une des plateformes Android comme expliqué dans le dernier tutoriel Installation Android SDK sous Windows

Si vous hésitez quelle plateforme choisir, sélectionnez la dernière mise à jours. Vous aurez peut-être à en sélectionner d’autres prochainement. Il faut savoir dès maintenant que le choix de la plateforme sera décisif en terme de compatibilité de votre application avec les différents smartphones sur le marché.

Ceci dit, si vous voulez tester votre application sur votre smartphone, téléchargez la plateforme correspondante à la version Android que vous avez.

Créer un AVD

Afin de tester notre application, nous allons utiliser l’émulateur Android. In faudra donc créer un Android Virtual Device (AVD). Un AVD décrit les paramètres systèmes et les composants de notre émulateur.

Pour créer un AVD :

  1. Lancez Eclipse
  2. Allez sous « Window > Android SDK and AVD Manager« 
  3. Sélectionnez « Virtual Device » dans le panneau à gauche
  4. Cliquez « New » -> La boite de dialogue « Create New AVD » apparaîtra
  5. Tapez le nom de notre AVD, « hello_avd » par exemple
  6. Choisir la cible (the target). La cible est la version de la plateforme Android SDK que nus avons téléchargé.
  7. Ignorez les autres champs pour le moment et cliquez sur « Create AVD« 

Créer un nouveau projet Android

Après avoir créé un émulateur Android, passons à la création du projet sous Eclipse.

  1. Lancez Eclipse et allez sous File -> New->Project. Si le ADT plugin for Eclipse a été correctement installé (voir l’article Installation Android SDK sous Windows ) la boite de dialogue affichera un dossier « Android » sous lequel nous pourrons sélectionner « Android Project« . Si ce n’est pas le cas, vérifier l’installation du plugin.
  2. Sélectionnez donc « Android Project » et cliquez sur Next.
  3. Renseigner les détails à propos de votre projet comme suit :
    • Project name: HelloAndroid
    • Application name: Hello, Android
    • Package name: com.androideur.helloandroid (ou votre propre namespace)
    • Create Activity: HelloAndroid
  4. Cliquez Finish

Explication des paramètres du projet

  • Project name : C’est le nom du projet Eclipse. Tous les fichiers seront créés sous un dossier portant le même nom
  • Application Name : C’est le nom de l’application tel qu’il va apparaître sur le smartphone Android
  • Package Name : C’est le package namespace (suivant les mêmes règles de programmation Java) qui regroupera tout le code source que nous allons écrire. D’une manière générale, le nom du package doit être unique.  Dans notre exemple nous avons utilisé com.androideur. Rappelez-vous de mettre le nom de votre organisation par exemple quand vous développez votre propre application.
  • Create Activity : C’est le nom de la stub class qui va être générée par le plugin. Elle va être une sous-classe de la classe Activity d’Android. Comme vous remarquez, la création est optionnelle mais il faut savoir qu’une Activity est la base de la quasi-totalité des applications.
  • Min SDK Version : Cette valeur définit le niveau minimum de l’API requise par l’application. Vous trouverez ici plus de détails.
  • Le checkbox « Use default location » vous permet de changer le dossier dans lequel vos vichiers seront enregistrés
  • Build Target : cette valeur doit être renseignée automatiquement en se basant sur le Min SDK Version. Comme nous avons dit le choix sera décisif en terme de compatibilité plateforme. Rappelons qu’une application Android compilée sur une version antérieure fonctionnera toujours avec les dernières mises à jours de l’API. L’inverse n’est pas vrai.

Examinons le code

Notre projet est maintenant prêt. Examinons le code en navigant dans le Package Explorer à gauche. Ouvrons le fichier HelloAndroid.java situé sous HelloAndroid->src->com.androideur.helloandroid qui devra ressembler à ça :

package com.androideur.helloandroid;
 
import android.app.Activity;
import android.os.Bundle;
 
public class HelloAndroid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Notez que cette classe est basée sur la classe Activity que nous avons mentionné tout à l’heure. Une Activity est une entité de l’application permettant d’exécuter des actions. Une application peut avoir plusieurs Activities, mais l’utilisateur interagit avec elles une à une.

La méthode onCreate() sera appelée par le système Android lors du démarrage de l’application. C’est donc l’endroit idéal pour faire toutes les initialisations et préparer l’interface utilisateur. Cependant, il n’est pas obligatoire d’avoir une interface utilisateur pour chaque Activity.

Création de l’Interface Utilisateur (UI)

Modifions le code comme suit :

package com.androideur.helloandroid;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class HelloAndroid extends Activity {
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       TextView tv = new TextView(this);
       tv.setText("Hello, Android");
       setContentView(tv);
   }
}

Une Interface Utilisateur Android est composée d’une hiérarchie d’objets appelé Views (Vue). Une View est un objet à dessiner, utilisé comme un élément de l’interface utilisateur. Cela peut être un bouton, une image ou tout simplement du texte comme dans notre cas. Chacun de ces objet est une sous-classe de la classe View. Et la sous-classe qui prend en charge le texte est TextView.

Nous venons de créer un TextView avec le constructeur de classe qui prend comme paramètre une instance Context Android. Un Context fournit des services comme l’accès aux ressources, l’obtention d’un accès à la base de données, etc… La classe Activity hérite du Context et comme la classe HelloAndroid est une sous classe Activity, elle est donc un Context. C’est pourquoi on peut passe un « this » comme référence au TextView.

Nous avons après défini le contenu texte avec setText().

Finalement, nous avons passé le TextView à setContentView() pour l’afficher comme un contenu de l’interface utilisateur de l’Activity. Bien entendu, si on ne fait pas appel à cette méthode, le système affichera un écran vide.

C’est tout. Exécutons notre application maintenant.

Exécution de l’application

Le plugin Eclipse facilite l’exécution de vos application:

  • Sélectionnez Run -> Run
  • Sélectionnez « Android Application »

Le plugin crée automatiquement une configuration d’exécution pour votre application et lance l’émulateur Android. Attention, il faut patienter plusieurs minutes (tout dépend de votre configuration matérielle). Ca risque d’être vraiment lent. Après le démarrage du système, le plugin installe la nouvelle application et exécute notre Activity par défaut. Et voici le résultat :

Android Hello World

Félicitations ; vous venez d’exécuter votre première application Android que nous allons perfectionner un peu prochainement.

Join the forum discussion on this post

Installation d’Android SDK sous Windows – Déploiement

Publié par kann juin - 30 - 2010 - Mercredi 25 COMMENTS

Android SDKDans cet article, nous allons continuer avec l’installation d’Android SDK sous Windows. Veuillez tout d’abord vérifier que vous avez déjà téléchargé tous les outils nécessaires comme expliqué dans le précédent article Installation d’Android SDK sous Windows

Installation des outils

  • Installez JDK 5 ou JDK 6
  • Dézippez le contenu du fichier Android SDK dans un dossier de votre choix. Nous allons supposer ici que le contenu sera extrait vers C:\android-sdk\
  • Dézippez votre version Eclipse, sous C:\eclipse\ par exemple

Téléchargement des différents composants de Android SDK

  • Allez sous C:\android-sdk\ et lancez SDK Setup.exe
  • Sous « Available Packages » vous trouverez la liste des packages et Archives du Android SDK.
  • Il se peut que vous n’arrivez pas à accéder au repository. C’est généralement du à la connexion en https paramétrée par défaut. Si c’est le cas, vous pourriez forcer la connexion en http sous le menu Settings en cochant la case « Force https://… sources to be fetched using http://… »
  • Il ne vous reste qu’à choisir les différents packages et valider.

Paramétrage de Eclipse et installation du plugin ADT

  • Lancez Eclipse et choisissez votre dossier workspace. ( C:\workspace\ fera bien l’affaire)
  • Sous Help -> Install New Software…
    • Cliquez sur le bouton Add
    • Renseignez les champs
      • Name : Andrid (ou tout ce que vous vooulez)
      • Location : http://dl-ssl.google.com/android/eclipse/
    • Après rafraichissement, Eclipse vous affiche les plugins disponibles. Sélectionnez le « Android DDMS » et le « Android development Tools »
    • Validez les étapes suivantes et redémarrez Eclipse.
  • android eclipse adt

  • Maintenant que Eclipse reconnait vos plugin, allez sous Window-> Preferences->Android et montrez à Eclipse ou est ce qu’il peut trouver les fichiers Android SDK : C:\android-sdk\ dans notre cas.
  • Validez et redémarrez Eclipse.
  • Si vous ne trouvez pas la catégorie Android dans le menu à gauche c’est que l’installation du plugin a échoué. Reprenez alors les étapes précédentes.

Voilà tout ! Vous pouvez dès maintenant attaquer le tout 1er tutoriel « Hello Android !« 

Join the forum discussion on this post

Installation d’Android SDK sous Windows- Préparation

Publié par kann juin - 25 - 2010 - Vendredi 3 COMMENTS

Android SDKAlors vous vous êtes décidés ? Vous voulez prendre le train de l’aventure et commencer à développer vos propres applications sous Android? Ok ! C’est parti !

Nous allons dans cette première partie préparer notre environnement sous windows et télécharger les outils nécessaires.

Android SDK sous Windows

Commençons par le téléchargement des outils nécessaires :

Android SDK

A télécharger depuis le site officiel Android SDK

Eclipse 3.4 (Ganymede) or 3.5 (Galileo)

J’ai testé avec Eclipse Helios, mais j’ai eu des erreurs lors de l’installation du plugin Android dont on parlera plus tard.

Ca sera plus propre donc d’utiliser Ganymede ou Galileo.

Vu que Eclipse propose plusieurs packages, Google vous recommande les packages suivant :

  • Eclipse IDE for Java EE Developers
  • Eclipse IDE for Java Developers
  • Eclipse for RCP/Plug-in Developers
  • Eclipse Classic (versions 3.5.1 et plus)

J’ai aussi testé avec le package Eclipse for PHP Developers et je n’ai eu aucun soucis.

Téléchargement par ici.

JDK 5 or JDK 6

Il est à noter qu’il ne suffit pas d’installer le JRE uniquement. Téléchargement par ici.

Et c’est parti…

Join the forum discussion on this post