Consignes de conception des icônes d'applications TV

Ce guide explique comment créer des bannières et des icônes de lanceur pour Android TV.

Points clés à retenir

Voici les principaux points à retenir de cette page:

  • Il existe deux types d'icônes pour les applications de l'OS Android TV dans le fichier AndroidManifest.xml :
    • android:icon (standard, obligatoire)
    • android:banner (bannière, obligatoire)
  • Les icônes adaptatives sont vivement recommandées.
  • L'icône et la bannière doivent toutes deux respecter les consignes de conception décrites dans ce guide.
  • Utilisez le modèle figma officiel pour générer la bannière et les icônes.
  • L'OS Android TV n'est pas compatible avec les icônes à thème.

Présentation

Google TV et l'OS Android utilisent l'iconographie fournie via votre AndroidManifest.xml de trois manières:

  • Icône du lanceur d'applications (format 1x1)
  • Icône de lanceur ronde (format 1x1, mais arrondie)
  • Logo de la bannière (format 16x9)

Ils sont utilisés à différents endroits pour différents cas d'utilisation, tels que la ligne Vos applications, les paramètres ou la progression de l'installation.

Le logo de la bannière est un logo au format 16:9 utilisé dans l'OS Android TV pour afficher le lanceur d'applications. Nous recommandons aux applications TV de fournir une bannière adaptative 16:9 avec les spécifications suivantes. Vous pouvez également fournir des ressources xhdpi d'une taille de 320 x 180px lorsque vous utilisez le niveau d'API 25 ou inférieur.

Tailles des icônes des bannières TV
Densité Taille minimale Emplacement du dossier (sous résolution) Rapport d'aspect de pixel
mdpi 160x90 px mipmap-mdpi 1
hdpi 240x135 px mipmap-hdpi 1,5
xhdpi 320x180 px mipmap-xhdpi 2
xxhdpi 480x270 px mipmap-xxhdpi 3
xxxhdpi 640x360 px mipmap-xxxhdpi 4

Icône de lanceur

L'icône de lanceur est une ressource au format 1x1 utilisée à plusieurs endroits, par exemple dans les paramètres et les intégrations de sessions multimédias (fiche "En cours de lecture") sur Android TV. L'icône de lanceur peut également être utilisée sur la ligne Vos applications sur Google TV.

Tailles des icônes de lanceur
Densité Taille minimale Emplacement du dossier (sous résolution) Rapport d'aspect de pixel
mdpi 80x80 px mipmap-mdpi 1
hdpi 120x120 px mipmap-hdpi 1,5
xhdpi 160x160 px mipmap-xhdpi 2
xxhdpi 240x240 px mipmap-xxhdpi 3
xxxhdpi 320x320 px mipmap-xxxhdpi 4

Icônes adaptatives

Depuis la version Android 8.0 (niveau d'API 26), les icônes de lanceur adaptatives sont compatibles, ce qui offre plus de flexibilité et des effets visuels intéressants en ce qui concerne les icônes d'application. Pour les développeurs, cela signifie que l'icône d'application est composée de deux calques: un calque de premier plan et un calque d'arrière-plan.

Bannière adaptative

Vous pouvez également fournir une bannière adaptative avec les anciennes bannières, à l'instar des bannières d'icônes de lanceur, qui comportent également deux calques.

Bannière adaptative TV

Icône de lanceur adaptative

Pour que votre icône adaptative soit compatible avec différentes formes et différents effets visuels, la conception doit répondre aux exigences suivantes:

Fournissez deux calques pour la version couleur de l'icône : un pour le premier plan et un pour l'arrière-plan.

Icône de lanceur adaptative TV

Les icônes adaptatives sont définies à l'aide de calques de premier plan et d'arrière-plan. La zone de sécurité de 72 x 72 sur la première image indique où les calques d'icône et de premier plan ne sont jamais rognés à cause d'un masque mis en forme.

Une version monochrome de l'icône n'est pas nécessaire, car Android TV n'est pas compatible avec les icônes à thème.

Exemples

Vous trouverez ci-dessous quelques bonnes pratiques et celles à éviter lors de la conception d'une icône d'application TV.

Respectez les consignes et conservez le logo dans un endroit sûr.
Évitez d'utiliser du texte ou des éléments graphiques pour indiquer toute information complémentaire.
N'utilisez pas de texte ni d'éléments graphiques pouvant induire les utilisateurs en erreur.
Ne renversez pas le logo en dehors d'une zone de sécurité.
Évitez d'ajouter des bordures autour du logo, car il est recadré et donne des images soignées.
Évitez de recadrer le logo
Lorsque vous utilisez une bannière, nous vous recommandons d'afficher votre logo complet, une icône et du texte.

Exemples de lanceurs

Respectez les consignes et conservez le logo dans un endroit sûr.
N'utilisez pas de texte ni d'éléments graphiques pour indiquer des informations supplémentaires.
N'utilisez pas de texte ni d'éléments graphiques pouvant induire les utilisateurs en erreur.
Ne renversez pas le logo en dehors d'une zone de sécurité.
Évitez d'ajouter des bordures autour du logo, car il est recadré et donne des images soignées.
Évitez de recadrer le logo

Ressources