Cyril Mottier

“It’s the little details that are vital. Little things make big things happen.” – John Wooden

Créer Un Nouveau Skin Pour l'Emulateur

Le SDK Android est fournit avec un outil merveilleux : l'émulateur! En plus de permettre à beaucoup de développeurs de tester leurs applications de façon très proche de la réalité (voir note ci-dessous) sans investir dans un vrai terminal, il offre la possibilité de tester vos programmes sur plusieurs tailles et orientation de terminaux. Par défaut, l'émulateur est livré avec des skins représentant un terminal QVGA en mode paysage et portrait. QVGA est en fait une abréviation signifiant “Quarter Video Graphics Array” et désigne une norme d'affichage dont la définition est de 320×240 pixels. La skin par défaut de l'émulateur est celle d'un terminal HVGA rouge. Le format HVGA désigne quant-à-lui une résolution de 480x320 pixels. Cette norme n'est pas sans rappeler des terminaux HTC bien connu tel que le Dream ou le Hagic :D.

Note : Un émulateur est différent d'un simulateur tout simplement par son mode de fonctionnement. Prenons l'émulateur Android, le démarrer revient à lancer tout simplement Android en traduisant les instructions ARM du système mobile en instructions de votre système (Intel). Mon expérience montre que les performances de l'émulateur et de la machine sont presques similaires. J'aurais même tendance à dire que le terminal réel tourne mieux que l'émulateur (notamment pour l'OpenGL puisque le rendu sur terminal est fait par l'accélération graphique - hardware alors que l'émulateur effectue ces opérations en software). Un simulateur, comme celui de l'iPhone par exemple, est en fait simplement un système compilé directement en utilisant les instructions de la machine de destination. Ainsi le simulateur de l'iPhone tourne vraiment très rapidement car les applications sont compilées en instructions Intel et directement interprétées par le système Mac OS X.

2009 est pressenti comme “l'année d'Android”. On annonce par exemple près de 7 terminaux comme le montre cette étude. En plus des grands constructeurs de téléphones comme Samsung, HTC ou LG, d'autres entreprises (moins connues dans le monde du mobile) commencent à faire parler d'elles. En effet, certains constructeurs d'ordinateurs viennent d'annoncer la sortie de netbooks tournant sous Android.

Souhaitant voir comment “tourne” Android avec une résolution supérieure j'ai voulu créer une skin permettant de modéliser un écran supérieur à du HVGA. Ma première recherche sur la création de skins, bien que rapide, n'a pas vraiment été fructueuse puisque je n'ai rien trouver d'intéressant. Plutôt que de perdre du temps, j'ai donc préféré faire du reverse-engineering sur les skins fournies avec l'émulateur. Pour tout avouer, le reverse-engineering de la technologie n'a pas été bien difficile et seulement 2 minutes ont été nécessaires pour bien comprendre le système.

Une skin est un dossier à placer dans _votre_sdk_platforms_version_android_skins dans lequel vous devez retrouver :

  • Un fichier “layout” (obligatoire) définissant le positionnement des différents éléments de votre terminal

  • Une image de fond (pas obligatoire)

  • Des images pour les “hovers” c'est à dire des images faisant office de calques lorsque votre souris passe sur un bouton

Pour expliquer le fonctionnement de ces skins, j'ai créé une skin d'un terminal VGA (640x480). Pour faire simple, nous pouvons tout simplement faire en sorte que l'émulateur affiche simplement l'écran du terminal sans aucun surplus (pas de touches, pas de coque, pas de clavier, etc.). Après avoir créer un fichier layout, utilisons l'élément display :

display {
    width  640
    height 480
    x 0
    y 0
}

On souhaite maintenant ajouter une image de fond. Il suffit donc de créer cette image de fond (que j'ai appelée background.png) et d'ajouter l'élément background :

background {
    image background.png
    x 0
    y 0
}

Pour finir, il est intéressant de faire en sorte que les boutons “changent” d'aspect lorsqu'ils sont survolés par la souris et surtout qu'ils effectuent une action lorsqu'on clique dessus. Il suffit alors d'ajouter l'élément button :

button {

    soft-left {
        image button_menu.png
        x 290
        y 491
    }
    home {
        image button.png
        x 199
        y 551
    }
    back {
        image button.png
        x 397
        y 551
    }
    dpad-up {
        image arrow_up.png
        x 272
        y 524
    }
    dpad-down {
        image arrow_down.png
        x 274
        y 579
    }
    dpad-left {
        image arrow_left.png
        x 266
        y 532
    }
    dpad-right {
        image arrow_right.png
        x 338
        y 531
    }
    dpad-center {
        image button_center.png
        x 300
        y 552
    }
    phone-dial {
        image button.png
        x 131
        y 551
    }
    phone-hangup {
        image button.png
        x 465
        y 551
    }
}

Nous venons donc de créer une skin d'un terminal Android VGA comme représenté ci-dessous. Cette skin est téléchargeable dans le zip suivant (inclut le .psd pour retoucher la skin sous photoshop).

Pour conclure, j'aimerai préciser que les différents points abordés sont assez basiques. Il est néanmoins possible de créer des skins un peu plus avancées à l'instar de la skin par défaut du terminal HVGA. On peut par exemple inclure les propriétés du réseau (élément network), un clavier virtuel, etc…

Note : Il est probable que vous rencontriez des problèmes d'affichage avec Android en résolution VGA. Je n'aime pas critiquer une technologie sans avoir rechercher d'où vient réellement le problème. Je ne m'avance donc pas sur ce qui va suivre : il semblerait que la version Cupcake d'Android ne soit pas encore tout à fait prête pour les grandes résolutions. On remarquera par exemple un bug sur les 9-patchs sur le SlidingDrawer du HomeScreen en mode portrait. D'un point de vue global, l'équipe Android a tout de même merveilleusement anticipé les différentes résolutions grâce aux layouts. Il reste néanmoins encore des petits problèmes en ce qui concerne la densité d'écran mais je suis certain que ces “problèmes” seront rapidement résolus! (à en voir les Google I/O c'est le cas)