Cette page a été traduite par l'API Cloud Translation.

Mises en page du kit d'interface utilisateur Leanback

Un téléviseur est généralement regardé à environ 3 mètres de distance, même s'il est beaucoup plus grand que la plupart des autres écrans d'appareils Android, un téléviseur ne fournit pas le même niveau de des détails et des couleurs sur un écran d'appareil plus petit. Ces facteurs nécessitent que vous créiez des mises en page d'application avec appareils TV afin de créer une expérience utilisateur utile et agréable.

Utiliser des thèmes de mise en page pour la télévision

Les thèmes Android peuvent servir de base pour mises en page dans vos applications TV. Utilisez un thème pour modifier l'affichage des activités de votre application sont destinés à être exécutés sur un téléviseur. Cette section explique les thèmes à utiliser.

Thème YouTube "en moins de clics"

La bibliothèque androidx.leanback inclut Theme.Leanback, un thème pour les activités TV qui fournit un style visuel cohérent. Utilisez ce thème pour toutes les applis TV conçues avec les classes Leanback d'AndroidX. L'exemple de code suivant montre comment appliquer ce thème à une activité:

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

Thème NoTitleBar

La barre de titre est un élément d'interface utilisateur standard des applications Android sur les téléphones et les tablettes, ne convient pas aux applications TV. Si vous n'utilisez pas les classes AndroidX Leanback, appliquez la Thème NoTitleBar à vos activités TV pour masquer l'affichage d'une barre de titre. L'exemple de code suivant du fichier manifeste d'une application TV montre comment appliquer ce thème pour supprimer l'affichage d'une barre de titre:

<application>
  ...
  <activity
    android:name="com.example.android.TvActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    ...
  </activity>
</application>

Thèmes AppCompat

Dans les applications mobiles Android, il est très courant d'utiliser AppCompatActivity ainsi que l'un des thèmes Theme.AppCompat. Cette combinaison vous permet d'utiliser des fonctionnalités comme les teintes des drawables, sans se soucier de la version d'Android exécutée sur l'appareil. Si vous développent une application qui ne s'exécute que sur Android TV, n'utilisez pas AppCompatActivity, car les fonctionnalités qu'il active sont déjà disponibles sur Android TV ou non pertinentes.

Si vous créez une application avec un codebase partagé entre Android Mobile et Android TV, vous pouvez exécuter à certains défis en raison de la thématisation. AppCompatActivity et les Les widgets AppCompat nécessitent l'utilisation de Theme.AppCompat, tandis que les Les fragments du kit d'interface utilisateur Leanback attendent de vous FragmentActivity et Theme.Leanback.

Si vous devez utiliser la même activité de base pour Android Mobile et Android TV, ou si vous souhaitez utiliser des vues personnalisées basées sur AppCompat widgets, comme AppCompatImageView, utiliser les thèmes Theme.AppCompat.Leanback. Ces thèmes vous donnent toutes les thématisations à partir de AppCompat et fournissez également les valeurs spécifiques à Leanback.

Vous pouvez personnaliser les thèmes Theme.AppCompat.Leanback comme vous le feriez avec n'importe quel autre thème d'un thème. Par exemple, si vous souhaitez modifier des valeurs spécifiques Kit d'interface utilisateur Leanback OnboardingSupportFragment, effectuez une opération semblable à celle-ci:

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

Créer des mises en page TV de base

Les mises en page des téléviseurs doivent respecter certaines consignes de base pour garantir leur utilisation et efficace sur les grands écrans. Suivez ces conseils pour créer des mises en page optimisées pour les écrans TV:

Créez des mises en page en mode paysage. Les écrans TV s'affichent toujours en mode Paysage.
Placez les commandes de navigation à l'écran sur le côté gauche ou droit de l'écran et enregistrez le d'espace vertical pour le contenu.
Créez des interfaces utilisateur divisées en sections à l'aide de fragments. Utilisez des groupes de vues tels que GridView au lieu de ListView pour mieux utiliser l'espace horizontal de l'écran.
Utilisez des groupes de vues tels que RelativeLayout ou LinearLayout pour organiser les vues. Cette approche permet au système d'ajuster la position des vues à la taille, l'alignement, le format et la densité de pixels d'un écran de télévision.
Ajoutez des marges suffisantes entre les commandes de mise en page pour éviter une interface utilisateur surchargée.

Calibrage

Les mises en page pour la télévision ont des exigences uniques en raison de l'évolution des normes TV afin de présenter en plein écran pour les utilisateurs. Pour cette raison, les téléviseurs peuvent couper le bord extérieur d'une application. pour s'assurer que l'intégralité de l'écran est pleine. Ce comportement est généralement appelé surbalayage.

Positionnez les éléments à l'écran qui doivent être visibles par l'utilisateur à tout moment dans la limite autorisée pour le surbalayage. dans une zone géographique spécifique. Ajout d'une marge de 5% de 48 dp sur les bords gauche et droit, et de 27 dp en haut et en bas bords d'une mise en page permet de s'assurer que les éléments de l'écran de la mise en page sont compatibles avec dans une zone géographique spécifique.

Ne modifiez pas les éléments de l'écran d'arrière-plan avec lesquels l'utilisateur n'interagit pas directement, et ne les coupez pas les éléments dans la zone de sûreté du surbalayage. Cette approche permet de s'assurer que les éléments d'arrière-plan s'affichent correctement sur tous les écrans.

L'exemple suivant montre une mise en page racine pouvant contenir des éléments d'arrière-plan et un élément mise en page enfant avec une marge de 5% et pouvant contenir des éléments dans la zone autorisée pour le surbalayage:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!-- Screen elements that can render outside the overscan-safe area go here. -->

   <!-- Nested RelativeLayout with overscan-safe margin. -->
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="27dp"
       android:layout_marginBottom="27dp"
       android:layout_marginLeft="48dp"
       android:layout_marginRight="48dp">

      <!-- Screen elements that need to be within the overscan-safe area go here. -->

   </RelativeLayout>

</RelativeLayout>

Attention:N'appliquez pas de marges de surbalayage à votre mise en page si vous utilisez les Les classes Leanback d'AndroidX, telles que BrowseSupportFragment ou les widgets associés, car ces mises en page intègrent déjà des marges sûres pour le surbalayage.

Créer du texte et des commandes utilisables

Suivez ces conseils pour mieux voir à distance le texte et les commandes de l'application TV:

Divisez le texte en petits morceaux que les utilisateurs peuvent parcourir rapidement.
Utilisez du texte clair sur un fond sombre. Ce style est plus facile à lire sur un téléviseur.
Évitez les polices légères ou les polices avec des traits à la fois très étroits et très larges. Utilisez des polices Sans Serif simples et l'anticrénelage pour améliorer la lisibilité.

Utilisez les tailles de police standards d'Android:

<TextView
      android:id="@+id/atext"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center_vertical"
      android:singleLine="true"
      android:textAppearance="?android:attr/textAppearanceMedium"/>

Faites en sorte que tous vos widgets d'affichage soient suffisamment grands pour être bien visibles par les utilisateurs. à une distance de 3 mètres de l'écran. La Pour ce faire, le meilleur moyen est d'utiliser un dimensionnement relatif à la mise en page plutôt qu'un dimensionnement absolu. unités de pixels indépendants de la densité (dp) au lieu d'unités de pixels absolues. Par exemple, pour définir le la largeur d'un widget, utilisez wrap_content au lieu d'une mesure en pixels et définissez marge d'un widget, utilisez des valeurs dp au lieu de valeurs en px.

Pour en savoir plus sur les pixels indépendants de la densité et sur la création de mises en page permettant de gérer tailles d'écran, reportez-vous à la section Compatibilité des écrans présentation.

Gérer les ressources de mise en page pour TV

Comme tous les autres appareils Android, les téléviseurs ont des tailles d'écran différentes et acceptent différentes y compris, mais sans s'y limiter, les résolutions 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 pour différentes tailles d'écran, résolutions et densités de pixels, définissez les mesures de l'UI des pixels indépendants de la densité (dp) plutôt que des pixels. Densité de pixels de l'écran pour un autre écran de télévision résolutions sont décrites ci-dessous.

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

Voir Assurer la compatibilité avec différentes densités de pixels pour plus d'informations.

Pour en savoir plus sur l'optimisation des mises en page et des ressources pour les grands écrans, consultez Présentation de la compatibilité des écrans

Modèles de mise en page à éviter

Il existe plusieurs approches pour créer des mises en page qui ne fonctionnent pas sur les appareils TV. Voici quelques approches de l'interface utilisateur à éviter lors du développement d'une mise en page pour la télévision.

Réutilisation des mises en page pour téléphone ou tablette:ne réutilisez pas les mises en page d'un téléphone ou d'une tablette application pour tablette sans modification. Les mises en page conçues pour d'autres facteurs de forme d'appareils Android ne sont pas adapté aux téléviseurs et doit être simplifié pour pouvoir l'utiliser sur ce type de téléviseur.
Avec ActionBar:les barres d'action sont recommandées. sur les téléphones et les tablettes, elles ne sont pas adaptées à une interface TV. À l'aide d'un le menu d'options de la barre d'action, ou tout menu déroulant, est vivement déconseillé pour les applications TV, car à la difficulté de naviguer dans un tel menu avec une télécommande.
Avec ViewPager:le fait de passer d'un écran à l'autre peut être pratique sur un téléphone ou une tablette. mais n'essayez pas de le faire sur un téléviseur !

Pour en savoir plus sur la conception de mises en page adaptées à la télévision, consultez les Guide de conception de téléviseurs

Gérer les bitmaps volumineux

Les téléviseurs, comme les autres appareils Android, ont une quantité de mémoire limitée. Si vous créez votre la mise en page de votre application avec des images à très haute résolution ou de nombreuses images haute résolution pour vos opérations. de votre application, celle-ci peut rapidement atteindre les limites de mémoire et provoquer des erreurs de mémoire insuffisante. Pour la plupart nous vous conseillons d'utiliser la méthode Glide pour récupérer, décoder et afficher des bitmaps dans votre application. Pour en savoir plus sur l'obtention de la valeur pour optimiser les performances lorsque vous utilisez des bitmaps, Bonnes pratiques pour les éléments graphiques Android

Diffuser des annonces efficaces

Pour les salles de séjour, nous vous recommandons d'utiliser des solutions publicitaires qui s'affichent en plein écran et peuvent être ignorées dans un délai de 30 secondes. Fonctionnalité pour la publicité sur Android TV, comme les boutons "Ignorer" et les clics, accessibles à l'aide du pavé directionnel plutôt que du toucher.

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

Remarque:Vous pouvez utiliser la classe WebView. pour les connexions aux services de réseaux sociaux.

Ressources supplémentaires

Concevoir des applications pour la télévision

Bonnes pratiques pour générer de l'engagement sur Google TV

Migrer vers Compose pour la télévision