Les icônes d'onglet sont des éléments graphiques utilisés pour représenter des onglets dans une interface qui en comporte plusieurs. Chaque icône d'onglet a deux états : non sélectionnée et sélectionnée.
Comme décrit dans la section Fournir des ensembles d'icônes spécifiques à la densité, vous devez créer des ensembles d'icônes distincts pour les écrans basse, moyenne et haute densité. Cela garantit que vos icônes s'afficheront correctement sur les appareils sur lesquels votre application peut être installée. Consultez Conseils pour les concepteurs pour obtenir des suggestions sur l'utilisation de plusieurs ensembles d'icônes.
L'illustration finale doit être exportée au format PNG transparent. N'incluez pas de couleur d'arrière-plan.
Des modèles pour créer des icônes dans Adobe Photoshop sont disponibles dans le Pack de modèles d'icône.
Avertissement:Le style des icônes d'onglet a considérablement changé dans Android 2.0 par rapport aux versions précédentes. Pour assurer la compatibilité de toutes les versions d'Android, les développeurs doivent :
1. Placez les icônes d'onglet pour Android 2.0 ou version ultérieure dans les répertoires drawable-hdpi-v5, drawable-mdpi-v5 et drawable-ldpi-v5.
2. Placez les icônes d'onglet pour les versions précédentes dans les répertoires drawable-hdpi, drawable-mdpi et drawable-ldpi.
3. Définissez android:targetSdkVersion sur 5 ou plus dans <uses-sdk> du fichier manifeste de l'application.
Vous indiquez ainsi au système qu'il doit afficher les onglets en utilisant le nouveau style d'onglet.
Fournir des icônes pour deux états d'onglet
Les icônes d'onglet doivent avoir deux états: non sélectionnée et sélectionnée. Pour fournir des icônes avec plusieurs états, les développeurs doivent créer un drawable de liste d'états pour chaque icône. Il s'agit d'un fichier XML qui répertorie l'image à utiliser pour les différents états de l'interface utilisateur.
Par exemple, pour un widget d'onglets comportant des onglets intitulés "Amis" et "Collègues", vous pouvez utiliser une structure de répertoire semblable à celle-ci:
res/...
drawable/...
ic_tab_friends.xml
ic_tab_coworkers.xml
drawable-ldpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-mdpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-hdpi/...
...
drawable-ldpi-v5/...
...
drawable-mdpi-v5/...
...
drawable-hdpi-v5/...
...
Le contenu des fichiers XML répertoriés ci-dessus doit faire référence aux drawables d'icônes sélectionnés et non sélectionnés correspondants. Par exemple, le code pour ic_tab_friends.xml est présenté ci-dessous:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- selected state -->
<item android:drawable="@drawable/ic_tab_friends_selected"
android:state_selected="true"
android:state_pressed="false" />
<!-- unselected state (default) -->
<item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>
Android 2.0 à Android 2.3
Les consignes suivantes décrivent comment concevoir des icônes d'onglet pour Android 2.0 à Android 2.3 (niveaux d'API 5 à 10).
Taille et positionnement
Les icônes d'onglet doivent utiliser des formes et des formulaires simples, qui doivent être mis à l'échelle et positionnés dans l'élément final.
La figure 1 illustre différentes manières de positionner l'icône dans l'élément. Vous devez définir une taille d'icône inférieure aux limites réelles de l'élément.
Afin d'indiquer la taille recommandée pour l'icône, chaque exemple de la figure 1 comprend trois rectangles de guide différents:
- Le cadre rouge est le cadre de délimitation de l'intégralité de l'asset.
- Le cadre bleu est le cadre de délimitation recommandé pour l'icône réelle. La taille de la zone d'icône est inférieure à celle de la zone complète de l'élément pour permettre des traitements spéciaux de l'icône.
- Le cadre orange est le cadre de délimitation recommandé pour l'icône réelle lorsque le contenu est carré. La zone des icônes carrées est plus petite que celle des autres icônes afin d'établir un poids visuel cohérent entre les deux types.
|
|
|
|
|
|
|
Figure 1 : Dimensionnement et positionnement de l'icône d'onglet dans les limites de l'élément d'icône. |
Style, couleurs et effets
Les icônes d'onglet sont plates, mates et représentées de face.
Les icônes d'onglet doivent avoir deux états: sélectionné et non sélectionné.
|
Figure 2 Style et effets des icônes d'onglets non sélectionnées Remarque: Toutes les dimensions en pixels correspondent à une densité moyenne et doivent être mises à l'échelle de façon appropriée pour les autres densités.
|
|
Figure 3. Style et effets des icônes des onglets sélectionnés Remarque: Toutes les dimensions en pixels correspondent à une densité moyenne et doivent être mises à l'échelle de façon appropriée pour les autres densités.
|
Bonnes pratiques et pratiques à éviter
Vous trouverez ci-dessous des exemples de pratiques à adopter et à éviter lors de la création d'icônes d'onglets pour votre application.
Exemples d'icônes
Vous trouverez ci-dessous les icônes d'onglet haute densité standards utilisées sur la plate-forme Android.
Avertissement:Comme ces ressources peuvent changer d'une version de la plate-forme à l'autre, vous ne devez pas référencer la copie des ressources du système. Si vous souhaitez utiliser des icônes ou d'autres ressources drawables internes, vous devez stocker une copie locale de ces icônes ou de ces drawables dans les ressources de votre application, puis référencer la copie locale à partir du code de votre application. De cette manière, vous pouvez garder le contrôle sur l'apparence de vos icônes, même si la copie du système change. Notez que la grille ci-dessous n'a pas vocation à être exhaustive.
Android 1.6 ou version antérieure
Les consignes suivantes décrivent comment concevoir des icônes d'onglet pour Android 1.6 (niveau d'API 4) ou version antérieure.
Structure
- Les icônes d'onglet non sélectionnées ont le même dégradé de remplissage et les mêmes effets que les icônes de menu, mais sans halo externe.
- Les icônes d'onglet sélectionnées ressemblent à des icônes d'onglet non sélectionnées, mais avec une ombre intérieure plus légère, et ont le même dégradé à l'avant que les icônes de boîte de dialogue.
- Les icônes d'onglet ont un SafeFrame de 1 px qui ne doit être chevauché que pour le bord de l'anticrénelage d'une forme ronde.
- Toutes les dimensions spécifiées sur cette page sont basées sur un plan de travail de 32 x 32 pixels. Dans le modèle Photoshop, conservez 1 px de marge intérieure autour du cadre de délimitation.
|
Figure 3. Cadres SafeFrame et dégradé de remplissage pour les icônes d'onglet non sélectionnées. La taille de l'icône est de 32 x 32. |
|
Figure 4 : iFrame et dégradé de remplissage pour les icônes d'onglet à l'état sélectionné. La taille de l'icône est de 32 x 32. |
Icône de l'onglet non sélectionné
Lumière, effets et ombres
Les icônes d'onglet non sélectionnées ressemblent aux icônes des onglets sélectionnés, mais avec une ombre intérieure plus légère et le même dégradé à l'avant que les icônes de la boîte de dialogue.
|
Figure 5. Luminosité, effets et ombres pour les icônes d'onglet non sélectionnées.
|
Procédure détaillée
|
Icône de l'onglet sélectionné
Les icônes d'onglet sélectionnées ont le même dégradé de remplissage et les mêmes effets que l'icône de menu, mais sans halo externe.
|
Figure 6. Luminosité, effets et ombres pour les icônes d'onglet sélectionnées.
|
Palette de couleurs
|
Procédure détaillée
|
