Icônes de liste

Les icônes de la vue Liste ressemblent beaucoup aux icônes de boîte de dialogue, mais elles utilisent un effet d'ombre interne où la source de lumière se trouve au-dessus de l'objet. Ils sont également conçus pour être utilisés uniquement dans un ListView. Par exemple, l'application Paramètres.

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 le tableau 1 pour obtenir la liste des tailles d'icône finales recommandées pour chaque densité. Consultez également les conseils à l'attention des concepteurs pour obtenir des suggestions sur l'utilisation de plusieurs ensembles d'icônes.

Tableau 1. Résumé des dimensions de l'icône de vue Liste terminée pour chacune des trois densités d'écran généralisées.

ldpi (120 ppp)
(écran basse densité)
mdpi (160 PPP)
(Écran à densité moyenne)
hdpi (240 ppp)
(écran haute densité)
xhdpi (320 ppp)
(Écran très haute densité)
Taille des icônes sous forme de liste 24 x 24 px 32 x 32 px 48 x 48 px 64 x 64 px

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.

Toutes les versions d'Android

Les consignes suivantes décrivent comment créer des icônes sous forme de liste pour toutes les versions de la plate-forme Android.

Structure

  • Une icône de vue sous forme de liste comporte normalement un cadre sécurisé de 1 px, mais vous pouvez utiliser la zone SafeFrame pour le bord de l'anticrénelage d'une forme ronde.
  • Toutes les dimensions spécifiées sont basées sur une taille de plan de travail de 32 x 32 pixels dans Photoshop. Conservez 1 pixel de marge intérieure autour du cadre de délimitation à l'intérieur du modèle.
Vue de la structure des icônes sous forme de liste

Figure 1 : cadre SafeFrame et dégradé de remplissage pour les icônes de vue Liste. La taille de l'icône est de 32 x 32.

Lumière, effets et ombres

Les icônes de la vue Liste sont plates et représentées de face avec une ombre intérieure. Composés d'un dégradé clair et d'une ombre intérieure, ils se démarquent bien sur un arrière-plan sombre.

Vue de la lumière, des effets et des ombres pour les icônes de la vue Liste.

Figure 2 Luminosité, effets et ombres pour les icônes de la vue Liste.

1.Ombre intérieure:noir | 57 % d'opacité | angle de 120° | mode de fusion normal | distance 1 px | taille 1 px
2.Contexte :noir | couleur système standard
Ces icônes ne s'affichent que dans les vues Liste.
Remarque: L'icône de la vue Liste se trouve sur un plan de travail de 32 x 32 pixels dans Photoshop, sans cadre sécurisé.

Procédure détaillée

  1. Ajoutez les effets de la figure 2 pour le filtre approprié.
  2. Exportez l'icône au format PNG avec la transparence au format 32 x 32.
  3. Créez les formes de base à l'aide d'un outil comme Adobe Illustrator.
  4. Importez la forme dans un outil tel qu'Adobe Photoshop, puis mettez-la à l'échelle pour l'adapter à une image de 32 x 32 pixels sur un arrière-plan transparent.