L'aspect des app widgets

Quelques principes

Généralement, vous allez définir une marge (une couleur transparente) séparant les bords de(s) cellule(s) de l'écran aux bords de votre appwidget. Ceci afin d'éviter que les appWidgets sur l'écran ne se "touchent".

Puis le décor, soit le fond (background) de votre AppWidget de préférence au format 9-pacth qui permettra:

- de définir la zone qui pourra être agrandie sans abimer l'image,

- et de définir la zone d'affichage pour les objets de types View (Ce qui permettra de définir une seconde marge entre le tour de votre AppWidget et les Views, via la padding box).

Pour définir la marge entre le bords des cellules et le bord de votre AppWidget, il y a deux solutions:

• Première solution

  - Vous posez un premier layout (frame layout) définissant les marges

  - Vous posez un second layout dans le premier définissant un fond au format 9-patch.

  <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="@dimen/widget_margin"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:background="@drawable/mon_widget_background"> … </LinearLayout> </FrameLayout>

  La dimension de cette marge préconisée étant de 8dp, vous coderez donc dans res/values/dimens.xml:

  <dimen name="widget_margin">8dp</dimen>

  Il est à noter que depuis Android 4.0, les marges sont gérées automatiquement, donc, conditionnez la valeurs suivant l'API utilisée en ajoutant dans res/values-v14/dimens.xml:

  <dimen name="widget_margin">0dp</dimen>

• Seconde solution

  Créer cette marge directement dans votre image de fond au format 9-patch. Comme il s'agit d'un fichier .png, vous pouvez en effet définir une couleur transparente. Reste à faire la même image sans la marge pour les API à partir de 14. Mais cette solution est plus gourmande en place, puisqu'il faudra multiplier les images de fond.

Ergo. de l'AppWidget

Actuellement, la mode est l'utilisation des images plates (Flat design). Google nous l'a fait pour Android, Microsoft a continué et Apple a suivi sur iOS 7...

Chacun ses goûts (les goûts et les couleurs...). Perso, j'ai l'impression d'un retour aux années 80 ! (Nostalgie ?). Ce modèle pouvant avoir tout de même des avantages par exemple sur le web, les images sont alors bien mieux compressées (voire, il n'y en a plus) et donc vous vous retrouvez avec un meilleur débit ! Cette solution est donc d'autant plus adapatée pour les mobiles, où la 3G et même la 4G n'autorisent pas des débits importants. Par contre, pour des applications sur votre ordinateur n'ayant pas besoin de réseau, là, c'est horrible (Microsoft avec son horrible Windows 8) !

Déjà dit, mais un AppWidget ne doit pas occuper trop de place, éviter les majs trop fréquentes et ne pas remplacer une application. Donc il ne doit pas y avoir trop widgets dedans et le plus petits possible, et surtout pas d'animation ! Bref rester sobre.

Annexes

Google donne quelques directions concernant l'ergonomie des app widgets, et explique (en anglais dans le texte) ce que je viens d'énoncé ici:

http://developer.android.com/guide/practices/ui_guidelines/widget_design.html

Il propose aussi dans cette pages quelques templates:

The App Widget Templates Pack for Android 4.0