Créer des mises en page TV

Un écran de télévision est généralement regardé à environ trois mètres de distance. Bien qu'il soit beaucoup plus grand que la plupart des écrans d'appareils Android, il n'offre pas le même niveau de détail et de couleur qu'un écran d'appareil plus petit. Pour ces raisons, vous devez créer des mises en page d'application en pensant aux appareils TV afin de proposer une expérience utilisateur utile et agréable dans le salon.

Principes de base de la mise en page

Les mises en page pour les appareils TV doivent suivre quelques consignes de base pour s'assurer qu'elles sont utilisables et efficaces sur les grands écrans. Suivez ces conseils pour créer des mises en page optimisées pour les écrans de télévision :

  • Créez des mises en page en mode Paysage. Les écrans de télévision s'affichent toujours en mode Paysage.
  • Placez les commandes de navigation à l'écran sur le côté gauche ou droit de l'écran et réservez l'espace vertical pour le contenu.
  • Utilisez un dimensionnement réactif et relatif (par exemple, les unités dp et sp) afin que les interfaces utilisateur s'adaptent correctement aux différentes résolutions d'affichage.
  • Ajoutez des marges et un espacement suffisants entre les commandes de mise en page pour éviter une interface utilisateur encombrée.

Surbalayage

Les mises en page pour la télévision présentent des exigences uniques en raison de l'évolution des normes TV pour présenter une image plein écran aux téléspectateurs. Pour cette raison, les appareils TV peuvent rogner le bord extérieur d'une mise en page d'application pour s'assurer que l'ensemble de l'écran est rempli. Ce comportement est généralement appelé surbalayage.

Placez les éléments d'écran qui doivent être visibles par l'utilisateur à tout moment dans la zone de sécurité du surbalayage. L'ajout d'une marge de 5% de 48 dp sur les bords gauche et droit, et de 27 dp sur les bords supérieur et inférieur à une mise en page permet de s'assurer que les éléments d'écran de la mise en page se trouvent dans la zone de sécurité du surbalayage.

N'ajustez pas les éléments d'écran d'arrière-plan avec lesquels l'utilisateur n'interagit pas directement et ne rognez pas les éléments dans la zone de sécurité du surbalayage. Cette approche permet de s'assurer que les éléments d'écran d'arrière-plan s'affichent correctement sur tous les écrans.

Créer du texte et des commandes utilisables

Suivez ces conseils pour rendre le texte et les commandes de votre application TV plus faciles à voir à distance :

  • Divisez le texte en petits blocs que les utilisateurs peuvent parcourir rapidement.
  • Utilisez du texte clair sur un arrière-plan sombre. Ce style est plus facile à lire sur un téléviseur.
  • Évitez les polices légères ou celles qui comportent des traits très fins et très larges. Utilisez des polices sans empattement et l'anticrénelage pour améliorer la lisibilité.
  • Faites en sorte que tous vos widgets de vue soient suffisamment grands pour être clairement visibles par une personne assise à trois mètres de l'écran. Utilisez des unités de pixels indépendants de la densité (dp) au lieu d'unités de pixels absolues, et des unités de pixels évolutives (sp) pour la typographie.

Pour en savoir plus sur les pixels indépendants de la densité et sur la création de mises en page pour gérer les écrans plus grands, consultez la section Présentation de la compatibilité des écrans.

Gérer les ressources de mise en page pour la télévision

Comme tous les autres appareils Android, les téléviseurs ont différentes tailles d'écran et prennent en charge différentes résolutions, y compris 720p, 1080p et 4K. Assurez-vous que votre application est compatible avec différentes tailles d'écran.

Les différentes tailles et résolutions d'écran ont des densités de pixels différentes. Pour préserver l'apparence de votre interface utilisateur sur différentes tailles d'écran, résolutions et densités de pixels, définissez les mesures de l'interface utilisateur à l'aide de pixels indépendants de la densité (dp). La densité de pixels de l'écran pour différentes résolutions de panneau TV est décrite dans le tableau suivant :

Résolution du panneau Densité de pixels de l'écran
720p tvdpi
1080p xhdpi
4K xxxhdpi

Pour en savoir plus, consultez la section Assurer la compatibilité avec différentes densités de pixels et la section Présentation de la compatibilité des écrans.

Modèles de mise en page à éviter

Certaines approches de création de mises en page ne fonctionnent pas bien sur les appareils TV. Évitez les modèles d'interface utilisateur suivants lorsque vous développez une mise en page pour la télévision :

  • Réutiliser des mises en page de téléphone ou de tablette : ne réutilisez pas les mises en page d'une application pour téléphone ou tablette sans les modifier. Les mises en page conçues pour d'autres facteurs de forme d'appareils Android ne sont pas adaptées aux appareils TV et doivent être simplifiées pour fonctionner sur un téléviseur.
  • Utiliser des barres d'action ou des menus de téléphone : les barres d'action supérieures et les menus déroulants ne conviennent pas à une interface TV, car il est difficile de naviguer dans ces menus avec une télécommande.
  • Utiliser une navigation uniquement par balayage : le glissement ou le balayage entre les écrans peut fonctionner parfaitement sur un téléphone ou une tablette, mais n'essayez pas d'utiliser des gestes uniquement par balayage sur un téléviseur où les utilisateurs s'appuient sur une télécommande avec pavé directionnel.

Pour en savoir plus sur la conception de mises en page adaptées à la télévision, consultez la section Concevoir pour la télévision.

Gérer les bitmaps volumineux

Les appareils TV ont une mémoire limitée. Si la mise en page de votre application utilise des images à très haute résolution, elle peut rapidement atteindre les limites de mémoire et provoquer des erreurs de mémoire insuffisante. Utilisez des bibliothèques de chargement et de décodage d'images efficaces (telles que Coil ou Glide) pour récupérer, décoder et afficher des bitmaps dans votre application.

Pour en savoir plus sur l'optimisation des performances lorsque vous travaillez avec des bitmaps, consultez les bonnes pratiques concernant les graphismes Android.

Proposer une publicité efficace

Pour l'environnement du salon, nous vous recommandons d'utiliser des solutions d'annonces vidéo plein écran et pouvant être ignorées en 30 secondes. Les fonctionnalités de publicité sur Android TV, telles que les boutons de fermeture et les clics, doivent être accessibles à l'aide du pavé directionnel plutôt que par contact.

Android TV ne fournit pas de navigateur Web. Vos annonces ne doivent pas tenter de lancer un navigateur Web ni rediriger vers du contenu du Google Play Store qui n'est pas approuvé pour les appareils Android TV.