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 indiqué dans la section Fournir d'icônes spécifiques à la densité, vous devez créer des ensembles d'icônes distincts pour les moyenne et haute densité. Cela garantit que vos icônes s'afficheront correctement sur la gamme d'appareils sur lesquels votre application peut être installée. Consultez les conseils pour les concepteurs. pour obtenir des suggestions sur la façon d'utiliser plusieurs jeux d'icônes.
L'illustration finale doit être exportée au format PNG transparent. À ne pas inclure une couleur d'arrière-plan.
Des modèles permettant de créer des icônes dans Adobe Photoshop sont disponibles dans la section Icon Pack de modèles.
Avertissement:
Le style des icônes d'onglet a
considérablement changé dans
Android 2.0 par rapport aux versions précédentes. Au
prennent en charge toutes les versions d'Android, les développeurs doivent:
1. Placer les icônes d'onglet pour Android 2.0 ou version ultérieure dans le
Répertoires drawable-hdpi-v5, drawable-mdpi-v5 et drawable-ldpi-v5.
2. Placer les icônes d'onglet des versions précédentes dans
Répertoires drawable-hdpi, drawable-mdpi et drawable-ldpi.
3. Définissez android:targetSdkVersion sur 5 ou plus dans le champ
<uses-sdk>
dans le fichier manifeste de l'application.
Le système est ainsi informé 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 présenter deux états: non sélectionnées et sélectionnées. Pour fournir des icônes comportant plusieurs états, les développeurs doivent créer état List drawable pour chaque icône. Il s'agit d'un fichier XML listant les images à utiliser pour les différents états de l'UI.
Par exemple, pour un widget d'onglet comprenant 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 énumérés ci-dessus doit faire référence aux fichiers
Drawables d'icônes sélectionnés et non sélectionnés. Par exemple, vous trouverez ci-dessous le code
pour ic_tab_friends.xml:
<?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 (niveau d'API 5 à 10).
Taille et positionnement
Les icônes d'onglet doivent utiliser des formes simples et celles-ci doivent être mis à l'échelle et positionné dans l'asset final.
La figure 1 illustre les différentes manières de positionner l'icône à l'intérieur de la élément. La taille des icônes doit être inférieure aux limites réelles de l'icône asset.
Afin d'indiquer la taille recommandée pour l'icône, chaque exemple dans La figure 1 comprend trois rectangles de guide différents:
- Le cadre rouge est le cadre de délimitation de l'ensemble de l'élément.
- Le cadre bleu est le cadre de délimitation recommandé pour l'icône réelle. La taille de la zone de l’icône est inférieure à celle de la zone de l’élément complet pour permettre traitements spéciaux des icônes.
- 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 des icônes pour établir un poids visuel cohérent entre les deux types.
|
|
|
|
|
|
|
Figure 1 : Dimensionnement et positionnement de l'icône d'onglet à l'intérieur des limites de composant icône. |
Style, couleurs et effets
Les icônes d'onglet sont plats, mats et visibles de face.
Les icônes d'onglet doivent présenter deux états: sélectionnée et non sélectionnée.
|
Figure 2 Style et effets pour les icônes d'onglets non sélectionnées. Remarque: Toutes les dimensions en pixels sont destinées à une densité moyenne et doivent être mises à l'échelle de manière appropriée pour les autres densités.
|
|
Figure 3. Style et effets pour les icônes d'onglet sélectionnées. Remarque: Toutes les dimensions en pixels sont destinées à une densité moyenne et doivent être mises à l'échelle de manière appropriée pour les autres densités.
|
Bonnes pratiques et pratiques à éviter
Vous trouverez ci-dessous des conseils pour exemples à prendre en compte lors de la création d'icônes d'onglet pour votre application.
Exemples d'icônes
Vous trouverez ci-dessous les icônes d'onglet haute densité standards utilisées dans la plate-forme Android.
Avertissement: Comme ces ressources peuvent changer d'une version de plate-forme à l'autre, ne doit pas faire référence à la copie des ressources du système. Si vous souhaitez utiliser des icônes ou d'autres ressources drawables internes, vous devez stocker la copie locale de ces icônes ou drawables dans les ressources de votre application, puis référencer la copie locale du code de votre application. Ainsi, vous pouvez garder le contrôle sur l'apparence de vos icônes, même si copier les modifications. Notez que la grille ci-dessous n'a pas vocation à être complète.
Android 1.6 et versions antérieures
Les consignes suivantes décrivent comment concevoir des icônes d'onglet pour Android. 1.6 (niveau d'API 4) et versions antérieures.
Structure
- Les icônes d'onglet non sélectionnées ont le même dégradé de remplissage et les mêmes effets que Icônes de menu, mais sans halo externe.
- Les icônes d'onglet sélectionnées ressemblent à des icônes d'onglets non sélectionnées, mais avec une légèreté une ombre intérieure, et avoir le même dégradé de la partie avant que Icônes de boîte de dialogue.
- Les icônes d'onglet ont un cadre SafeFrame de 1 px qui ne doit être superposé que sur le bord. de l'anticrénelage d'une forme ronde.
- Toutes les dimensions spécifiées sur cette page sont basées sur une taille de plan de travail de 32 x 32 pixels. Conservez une marge intérieure d'un pixel autour du cadre de délimitation à l'intérieur du modèle Photoshop.
|
Figure 3. Cadres SafeFrame et dégradé de remplissage pour l'onglet non sélectionné . La taille de l'icône est 32 x 32. |
|
Figure 4 Cadres SafeFrame et dégradé de remplissage pour les icônes d'onglet dans sélectionné. La taille de l'icône est 32 x 32. |
Icône d'onglet non sélectionné
Lumière, effets et ombres
Les icônes d'onglet non sélectionnées ressemblent à celles des onglets sélectionnés, mais avec une une ombre intérieure plus atténuée et le même dégradé de la partie avant que les icônes des boîtes de dialogue.
|
Figure 5. Lumières, effets et ombres pour une zone non sélectionnée .
|
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 le menu , mais sans halo externe.
|
Figure 6 Lumières, effets et ombres pour l'onglet sélectionné .
|
Palette de couleurs
|
Procédure détaillée
|
