Androideur.com

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 :

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 :

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

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 » :

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

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 :

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 ?

L’é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

Sorti en pré-release le 26 janvier 2011, la nouvelle version Android 3.0 Honeycomb est conçue spécialement pour les terminaux à écran large, notamment les tablettes. Honeycomb vient avec une UI (User Interface / Interface Utilisateur) élégante, futuriste, voire révolutionnaire.. L’équipe Android s’est concentrée sur les fonctionnalités qui ont fait le succès des versions précédentes : le multitâche, le système de notification, la personnalisation de l’accueil, les widgets… pour concevoir et créer une expérience utilisateur 3D unique en son genre. Bien entendu, ces améliorations sont disponibles aux développeurs via les nouvelles collections d’objets et composants d’interfaces intégrables aux nouvelles applications. (Voir déjà les améliorations apportées, au niveau de construction des layouts, au plugin Android ADT pour Eclipse ). Découvrons alors quelques nouveautés.

La Barre Système, statut et notifications

Désormais, la barre système sera toujours affichée en bas, et accessible de partout, quelque soit l’application lancée. La seule exception serait lors du lancement d’applications en plein écran, la lecture d’une vidéo par exemple. L’utilisateur aura donc accès en permanence, non seulement aux notifications et aux statuts du système, mais aussi au applications déjà lancées. Ca semble être minime comme amélioration. Mais je pense que ça facilitera la prise en mains des terminaux, surtout pour les nouveaux utilisateurs Android, souvent perdus lors des premières manipulations du système.

La Barre d’Action, pour le contrôle des Applications

Préalablement accessible suite au clic sur un bouton, cette barre sera omni-présente, pour toutes les applications en haut de l’écran. Bien sûr, elle sera personnalisée en fonction des spécificités de chaque application.

Personnalisation des Ecrans d’Accueil

Android 3.0 vous offre cinq écrans par défaut vous donnant accès à tout le système, peu importe le contexte. Les widgets, les raccourcis et les fonds d’écran sont gérés via une interface dédiée, agréable et très conviviale. Chaque écran, offre toujours un accès à toutes les applications installées, ainsi qu’au formulaire de recherche universel, permettant de retrouver toute application, contact, fichier…

Retrouvez facilement vos applications en cours d’exécution

Le multitâche, avantage incontesté d’Android par rapport aux concurrents, a été encore mis en avant avec une ergonomie améliorée ; A partir de la Barre Système, l’utilisateur peut afficher la liste des applications qui seront accompagnées par des captures écran en miniature. Il suffira de cliquer pour basculer d’une application à une autre.

Nouveau clavier

Le clavier a été repensé pour permettre une saisie plus rapide et agréable, profitant ainsi de la taille de l’écran. Le design a été amélioré et on remarque l’ajout de nouvelles touches tel que la touche TAB, très utile pour les technos surtout ceux qui utilisent leur tablettes pour accéder en mode shell à différents serveurs

Pour sélectionne un texte, il suffira de faire un appuie long sur le texte en question et puis ajuster la portée en déplaçant deux flèches marquant le début et la fin de la sélection. Très utile !

Encore plus d’option de connectivité

Plus besoin de faire un « mount » de votre carte SD pour synchroniser vos fichiers média avec votre ordinateur ou votre appareil photo, il suffira de brancher votre cable USB.

Encore plus utile, vous pouvez brancher un clavier ordinaire via USB voire même en Bluetooth à votre tablette pour plus de confort de saisie.

Sinon, Android 3.0 scanne maintenant plus rapidement les différentes fréquences Wifi et peut partager la connexion via Bluetooth avec plusieurs équipements.

Mise à jour des applications standards

Les mises à jours concernent en particulier le niveau ergonomique. Un navigateur à multiples onglets, pouvant synchroniser vos favoris avec Google Chrome, de nouvelles options pour la caméra, la Galerie, l’application Mail et Contacts.. Android 3.0 met le paquet sur l’ergonomie et la convivialité du système.

Démo Vidéo

Engadget a déjà réalisé une démo vidéo avec l’émulateur Android 3.0, un peut lente, quelques petits crashs, mais c’est normal pour les habitués des émulateurs

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 :

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 :

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 :

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 :

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.

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 :

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