Discussion :

[royalwear]

Bonjour à tous,

je suis à la recherche d'informations concernant la conception d'interface graphique pour android.

Notre designeur peut me fournir un fichier illustrator avec le design mais je ne sais pas qu'elle est la meilleur résolution pour le fichier de base ni comment gérer l'export des png (dpi ?) dans les différent formats.

Si quelqu'un peut me donner un petit bout d'explication, je suis preneur Merci.

[Largo13]

Ce n'est pas que je ne veux pas te répondre, mais ta question est vachement trop vaste.

J'aurais tendance à te renvoyer platement vers http://developer.android.com/guide/topics/ui/index.html

[royalwear]

Bonjour,

merci pour l’intérêt porter à mon soucis.

Je pense m'être mal exprimé. Le soucis n'est pas l'utilisation et la disposition des élément UI dans l'application mais bien l'export des images qui seront utilisé dans l'application (par exemple le logo).

Soit il est flou, soit il est entouré par des reflets légèrement noirs ( http://data.imagup.com/12/1162879854.png ).


EDIT : bon j'ai trouvé un bout de code qui permet de régler le soucis des reflet noirs. Pour ceux que ca intéresse, vous ajouter se code a votre Activité :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
	@Override
	public void onAttachedToWindow() {
		super.onAttachedToWindow();
		Window window = getWindow();
		window.setFormat(PixelFormat.RGBA_8888);
	}

Me reste maintenant, à trouver la bonne facon pour exporter le logo dans les différents format (ldpi, mdpi, etc ...).

[deepbreak]

En fait ce que tu appelle format c'est la résolution de l'ecran :

xhdpi 960dp x 720dp
hdpi 640dp x 480dp
mdpi 470dp x 320dp
ldpi 426dp x 320dp

redwarp a dans la rubrique téléchargement mis à disposition une application qui génère automatiquement à partir de ton image les images pour toutes les résolutions. Ton image doit être au format png : http://www.developpez.net/forums/d12...sites-dimages/
Cordialement

[royalwear]

Oui voila c’est exactement ca dont je parle. C'est nickel ce petit logiciel merci bcp

[nicroman]

Houla ... y a du mix là

Il y a la "densité" virtuelle du device:
xhdpi: 320dpi
hdpi: 240dpi
mdpi: 160dpi
ldpi: 120dpi

Et la taille "virtuelle" d'un écran:
xlarge: au MOINS 960dp x 720dp (dp = dip = density independant pixels)
large: au MOINS 640dp x 480dp
normal: au MOINS 470dp x 320dp
small: en dessous

Comme toute l'interface est calculée en "dip" (ou "sip" si c'est du texte), on a la relation suivante: taille en pixels = taille en dip / densité virtuelle.

D'ou, en général, le fourniture d'autant de tailles de bitmap UI (boutons/...) que de densités supportées, avec en prime l'intérêt des 9-patch pour les redimensionnements.

Pourquoi densité virtuelle ? parceque ce n'est pas la densité vraie de l'écran... Si il fallait utiliser la densité vraie, au aurait systématiquement un redimensionnement des bitmaps (ce qui est moche).

Par exemple: Galaxy S2, densité "vraie": 213dpi, densité "virtuelle": 240dpi (hdpi), taille écran pixels 800x480, soit... 533dp x 320dp (normal) et... 3.75in x 2.25in

Voila voila....

[royalwear]

Bonjour,

aprés quelques temps, je reviens sur le sujet. J'ai vraiment du mal à comprendre le post plus haut.

Je dois expliqué au designer comment procéder et je patague vraiment :/

Quand vous devez réalisé un design d'app compatible toutes tailles (smartphone & tablettes), comment procédez vous ?

[nicroman]

Déjà on commence par imaginer 1 ou 2 layouts de base par orientation de l'écran et en fonction de la place disponible.
En général ça se résume à:

small|normal - portrait
large|xlarge - portrait
small|normal - landscape
large|xlarge - landscape

Tous les layouts sont parfaitement utilisables dans n'importe quelle résolution (ils sont "fluides"), juste pas optimisés (trop de place pour un texte, pas assez pour une image...).

Tous les positionnement sont donc faits en "dp" (ou "sp" si il y a du texte) puisque c'est LA résolution d'Android.
On part donc du principe que:
small|normal = 470dp x 320dp
large = 640dp x 480dp
xlarge = 960dp x 720dp

Si un designer entre en jeu et veut absoluement faire du pixels, l'interface est alors "transformée" en pixels en partant du xhdpi....
small|normal = 940 x 640 pixels
large = 1280 x 960 pixels
xlarge = 1920 x 1440 pixels
Avec comme consigne de ne jamais commencer un "bloc" sur un pixel impair.
Mais c'est juste pour "dessiner" dans un logiciel de dessin... tout est ramené en dp/sp (en divisant par 2) après coup.

Tous les backgrounds (ce qui inclut les boutons textuels) sont des 9.patch, avec 4 résolutions (le designer fournit le XHDPI, et l'utilitaire trouvé sur google-code pond les 3 autres résolutions, éventuellement retouchées par le designer).

Les images sont aussi fournies dans les 4 résolutions (pareil, le designer fournit la version xhdpi, et peut retoucher les 3 résolutions qui en découlent).

Quand l'image provient d'un webservice, l'appel au webservice fournit en paramètre la résolution voulue.

Et voila... je crois qu'on a fait le tour....
On commence donc par les partie "relatives" de l'UI (pourcentages), puis les parties textuelles (relatives au "sp") ce qui inclut les boutons textuels, puis le reste s'adapte autour...

[Largo13]

Il existe quelques outils pour créer facilement, par exemple, les icônes du Launcher, etc...

A explorer

http://android-ui-utils.googlecode.c...ist/index.html

[royalwear]

Merci pour le complément de réponses. Je vais relire la doc Android encore une fois et faire le tri avec les informations présente ici.

Si d'autres personnes ont des remarques à faire, n’hésitez pas ce sera toujours utile

Merci.

[valkeke]

Juste pour dire en lisant tous ces posts fort intéressants !...... moi qui voulait me m'être à Android...oulala... cela a l'air pas évident pour faire des IHM professionnelles pour différents devices!