Androideur.com

Actualité, smartphones, tutoriels et applications Android

La nouvelle palette de construction de layouts

Publié par kann février - 24 - 2011 - Jeudi 1 COMMENT

Suite à la mise à jour du plugin ADT pour Eclipse, on découvre la nouvelle palette de constructions de layouts. Une belle amélioration qui facilitera le travail de construction des layouts. Bien que facile et très intuitif en terme de langage de développement (XML), la mise en place des layouts est consommatrice de temps et prend à elle seule une bonne part des Jour-Hommes de développement.

J’ai l’impression que ça a été bien perçu par l’équipe de développement du plugin ADT pour Eclipse, qui vient de déployer une mise à jour impressionnante concernant cet outil.

Notez ici la nouvelle palette à gauche :

palette layout Android ADT pour Eclipse

On remarque ici que :

  • les éléments sont groupés par catégories
  • la palette est sous forme d’un accordéon. Il suffit de cliquer sur son entête pour masqué la catégorie précédente et réserver tout l’espace à la nouvelle.
  • les widgets s’affichent en mode « aperçu » tenant compte du thème courant et de la densité de l’écran sélectionné.

Le menu contextuel vous permet de choisir vos paramètres personnels selon vos préférences :

menu contextuel android ADT plugin for Eclipse

Basculons du « Tiny Previews » à la taille réelle, et hop :

aperçu des widgets XML layout android ADT plugin

Notons aussi que la palette change en fonction du thème choisi. Le rendu n’est pas le même si on change du thème « light » au thème « black » :

palette5XML layout preview selon thème

Vous pouvez aussi choisir le mode « Icone + label » :

icone et label ADT plugin pour Eclipse

Ou bien alors, n’afficher que les icônes si vous êtes déjà un expert, et que vous avez besoin de plus d’espace :

XML layout en mode icone plugin Android ADT pour Eclipse

Et finalement, vous pouvez même masquer les entêtes catégories et tout afficher sous forme d’icônes. Des tooltips viendront alors vous aider à vous repérer lors du survol d’une icône :

Très utile, non ?

Android 3.0 version finale et MAJ du SDK

Publié par kann février - 24 - 2011 - Jeudi 1 COMMENT

Android HoneycombL’équipe Android vient d’annoncer, sur son blog, le déploiement pour téléchargement de la version finale de son SDK pour Android 3.0 (Honeycomb). A vos postes, lancez la mise à jour ; vous pouvez dès aujourd’hui créer vos applications avec le nouveau API level 11 et les publier sur le market.

Pour rappel, vous trouverez ici un aperçu des nouvelles fonctionnalités Android 3.0

Cette mise à jour est accompagnée aussi d’une nouvelle version du plugin ADT pour Eclipse (10.0.0) dont les principales améliorations apportent ;

  • Une nouvelle palette de construction des layouts (réécriture totale du code). Trouvez les principales améliorations ici.
  • Une meilleure précision et surtout fidélité de rendering par rapport aux différents écrans des smartphones
  • Amélioration du zoom (ajustement par rapport au contenu, affichage du clavier…)
  • Intégration du Traceview pour faciliter le débogage de vos applications…

Qu’est ce que vous attendez alors pour commencer à publier vos applications ? Ca vous semble encore compliqué ? Installez le SDK et suivez nos tutoriels de développement Android, écrits spécialement pour les novices.

Et bon dév ;)

Création d’une application Android monolingue

Publié par kann décembre - 21 - 2010 - Mardi 4 COMMENTS

Applications Android multilinguesNotre premier tutoriel de la série « Applications Android multilingues et prise en charge des paramètres régionaux et linguistiques » consiste à créer une application monolingue. Nous verrons ensemble les bonnes pratiques à respecter pour que la traduction et la prise en charge des paramètres régionaux soient facilement applicables par la suite.

Pour cette application, la langue par défaut sera le Français et la zone géographique sera La France

Créons notre projet sur Eclipse ; File –> New –> Android Project

  • Project name: PeaceAndLove
  • Build Target : Android 1.6
  • Application name: Peace & Love
  • Package name: com.androideur.peaceandlove
  • Create Activity: PeaceAndLove
  • Min SDK Version: 4

Avant de passer au vif du sujet, commençons par la correction d’un petit bug : Le nom de notre application génère une erreur, le caractère spécial & n’étant pas autorisé dans le contenu du fichier res/values/strings.xml

Pour corriger ce petit problème, il suffit de remplacer :

<string name="app_name">Peace & love</string>

Par :

<string name="app_name">Peace &amp; love</string>

Examinons un peu le contenu du dossier res/ :

Ce dossier a été créé automatiquement pour accueillir les différents types de ressources ;

  • Graphiques sous res/drawable/
  • Layouts sous res/layout/
  • Textes sous res/values/

Vous avez bien compris, c’est principalement sur le contenu de ce dossier que nous allons le plus travailler tout au long de ce tutoriel.

Je veux m’arrêter un peu ici puisque nous parlons des ressources graphiques. Vous avez certainement remarqué la présence de plusieurs dossiers drawable ;

  • drawable-hdpi, h comme high
  • drawable-ldpi, l comme low
  • drawable-mdpi, m comme medium

Cette distinction est relative en fait à la taille et la densité des écrans des smartphones Android. Je reviendrai sur ça plus en détail lors d’un prochain tutoriel qui traitera des tests de compatibilité smartphones.

Pour le moment, ne nous faisons pas de soucis ; nous utiliserons le dossier res/drawable-hdpi par défaut. Si vous avez des problèmes d’affichage des images, laissez-moi un commentaire sur ce tutoriel en mentionnant la marque du smartphone que vous avez utilisé pour tester.

Revenons à notre sujet. Première chose à faire : préparons un layout pour notre application.

Création d’un xml layout

Nous aurons besoin d’un layout linéaire simple (LinearLayout) contenant deux TextView pour afficher les textes en plusieurs langues et un bouton qui affichera les drapeaux.

Modifiez le contenu du fichier res/layout/main.xml

<?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"
    android:gravity="center_vertical|center_horizontal"
	android:textStyle="bold"
	android:background="#E9EEF2"
    >
<TextView
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="@string/text_a"
    android:textColor="#1F2B44"
    />
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="@string/text_b"
    android:textColor="#1F2B44"
    android:textStyle="bold"
    />
<Button
    android:id="@+id/flag_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    />
</LinearLayout>

Création des ressources

Le layout que nous venons de créer fait référence à des ressources que nous allons devoir créer.

Création des textes par défaut

Nous savons déjà que les textes par défaut sont à définir dans le fichier res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<string name="app_name"> Peace &amp; love </string>
  <string name="text_a"> Paix et Amour </string>
  <string name="text_b">Faites l\'Amour, pas la guerre.</string>
  <string name="dialog_title">Cette application n\'a pas été traduite.</string>
  <string name="dialog_text">Peu importe vos paramètres linguistiques et régionaux, nous afficherons le texte défini dans res/values/strings.xml</string>
</resources>

De cette manière nous afficherons un texte en français, peu importe les paramètres linguistiques et régionaux de l’utilisateur. Quand nous allons traduire notre application, nous aurons à définir un contenu alternatif en d’autres langues.

Création du bouton drapeaux

Dans notre layout, nous avons aussi déclaré un bouton que nous utiliserons pour afficher le drapeau relatif aux paramètres régionaux de l’utilisateur.

Nous allons donc utiliser le drapeau de la France pour notre cas.flag france traduire application android

Téléchargez cette image et sauvegardez la sous res/drawable-hdpi/flag.png

Ouvrez le fichier src/PeaceAndLove.java et ajoutez ce code dans la méthode onCreate() (juste après setContentView)

// assigner l'image flag.png au bouton, conformément aux paramètres régionaux de l'utilisateur
        Button b;
        (b = (Button)findViewById(R.id.flag_button)).setBackgroundDrawable(this.getResources().getDrawable(R.drawable.flag));
 
        // contruire le dialog box à afficher suite au click
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setMessage(R.string.dialog_text)
            .setCancelable(false)
            .setTitle(R.string.dialog_title)
            .setPositiveButton("OK !", new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int id) {
                dialog.dismiss();
                }
            });
        final AlertDialog alert = builder.create();
 
        // Ajouter le  click listener au drapeau pour afficher le dialog box 
        b.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                alert.show();
            }
        });

Sous Eclipse, utilisez Ctrl+Shift+O (cmd+Shift+O sous mac) pour importer automatiquement les packages manquants à votre projet.

Examinons le code que nous venons d’ajouter ;

  • Nous avons assigné l’image d’un drapeau au bouton. Et puisque nous n’avons aucune autre ressource à part celles définies par défaut, c’est le drapeau français enregistré sous res/drawable-hdpi/flag.png qui s’affichera peu importe la langue ou la région de l’utilisateur. Par contre, dès qu’on ajoutera plus de drapeaux pour les autres régions, ce même code affichera d’autres images.
  • Nous avons créé l’objet AlertDialog qui s’affichera suite click sur le drapeau : C’est le listener assigné au bouton qui gère cette fonctionnalité. Et puisque nous n’avons pas fourni d’autres textes à part les textes par défaut, notre AlertDialog affichera les textes renseignés dans le fichier res/values/strings.xml

Il est temps de tester notre application !

tutoriel application android multilinguetutoriel traduire une application android

Et voilà pour notre application monolingue.

Nous allons voir dans le prochain tutoriel que cette technique de développement nous permettra de traduire et/ou ajouter plusieurs langues à notre application et ce d’une manière simple et rapide.

A la prochaine et bon dév ;)

Dans cette série de tutoriels, nous allons créer une application Android Multilingue.

Applications Android Multilingues

Avant de développer une nouvelle application, pensez aux particularités des paramètres linguistiques et régionaux de vos futurs utilisateurs. Ça ne s’arrête pas à la traduction des textes de l’application ; pensez au formatage des nombres, les devises locales, les images, les fichiers audio…

Nous allons détailler les bonnes pratiques que nous avons avancées lors du développement d’un XML layout pour le Hello World ! et appliquer quelques notions de mise en forme comme vu avec le tutoriel Mise en forme basique du texte du Hello World !

Je vous propose donc une série de trois tutoriels :

Nous appellerons notre application « Peace And Love », un message d’amour en ces temps difficiles.

Bon dév à tous ;)

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.