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 autres écrans d'appareils Android, il ne fournit pas le même niveau de détail et de couleur qu'un écran d'appareil plus petit. Ces facteurs vous obligent à créer des mises en page d'application en tenant compte des téléviseurs afin d'offrir une expérience utilisateur utile et agréable.
Utiliser des thèmes de mise en page pour la TV
Les thèmes Android peuvent servir de base pour les mises en page de vos applications TV. Utilisez un thème pour modifier l'affichage des activités de votre application qui sont destinées à s'exécuter sur un téléviseur. Cette section explique quels thèmes utiliser.
Thème Leanback
La bibliothèque androidx.leanback obsolète inclut Theme.Leanback, un thème pour les activités TV qui fournit un style visuel cohérent pour les applications de la boîte à outils Leanback UI. Utilisez ce thème pour toute application TV créée avec les classes AndroidX Leanback. 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 pour les applications Android sur téléphones et tablettes, mais elle ne convient pas aux applications TV. Si vous n'utilisez pas les classes AndroidX Leanback, appliquez le thème NoTitleBar à vos activités TV pour supprimer l'affichage d'une barre de titre. L'exemple de code suivant extrait du fichier manifeste d'une appli 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 avec l'un des thèmes Theme.AppCompat. Cette combinaison vous permet d'utiliser des fonctionnalités telles que la teinte des éléments drawables sans vous soucier de la version d'Android exécutée sur l'appareil. Si vous développez une application qui ne fonctionne que sur Android TV, n'utilisez pas AppCompatActivity, car les fonctionnalités qu'il active sont déjà disponibles sur Android TV ou ne sont pas pertinentes.
Si vous créez une application avec un code base partagé entre Android Mobile et Android TV, vous pouvez rencontrer des difficultés en raison du thème. AppCompatActivity et les différents widgets AppCompat nécessitent l'utilisation de Theme.AppCompat, tandis que les fragments du kit d'UI Leanback s'attendent à ce que vous utilisiez 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 des widgets AppCompat tels que AppCompatImageView, utilisez les thèmes Theme.AppCompat.Leanback. Ces thèmes vous offrent toutes les fonctionnalités de thématisation de AppCompat et fournissent également les valeurs spécifiques à Leanback.
Vous pouvez personnaliser les thèmes Theme.AppCompat.Leanback de la même manière que n'importe quel autre thème. Par exemple, si vous souhaitez modifier des valeurs spécifiques à OnboardingSupportFragment du kit d'UI Leanback, procédez comme suit :
<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 pour les appareils TV doivent respecter certaines consignes de base pour garantir leur facilité d'utilisation et leur efficacité 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.
- Créez des UI divisées en sections à l'aide de fragments. Utilisez des groupes de vues comme
GridViewau lieu deListViewpour mieux utiliser l'espace horizontal de l'écran. - Utilisez des groupes de vues tels que
RelativeLayoutouLinearLayoutpour organiser les vues. Cette approche permet au système d'ajuster la position des vues en fonction de la taille, de l'alignement, du format et de la densité de pixels d'un écran de télévision. - Ajoutez des marges suffisantes entre les contrôles de mise en page pour éviter une interface utilisateur encombrée.
Calibrage
Les mises en page pour téléviseur sont soumises à des exigences spécifiques en raison de l'évolution des normes TV pour présenter une image en plein écran aux spectateurs. Pour cette raison, les appareils TV peuvent rogner le bord extérieur de la mise en page d'une 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é de surbalayage. L'ajout d'une marge de 5 % (48 dp sur les bords gauche et droit, et 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é de surbalayage.
N'ajustez pas les éléments d'arrière-plan avec lesquels l'utilisateur n'interagit pas directement, et ne les rognez pas dans la zone de sécurité de 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 une mise en page enfant imbriquée avec une marge de 5 % pouvant contenir des éléments dans la zone de sécurité de 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 classes AndroidX Leanback, telles que BrowseSupportFragment ou les widgets associés, car ces mises en page intègrent déjà des marges de sécurité pour le surbalayage.
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 de loin :
- Divisez le texte en petits blocs 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 fines ou celles dont les traits sont à la fois très fins et très épais. Utilisez des polices sans empattement 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"/>
- Rendez tous vos widgets de vue suffisamment grands pour qu'ils soient clairement visibles par une personne assise à trois mètres de l'écran. Le meilleur moyen d'y parvenir est d'utiliser une taille relative à la mise en page plutôt qu'une taille absolue, et des unités de pixels indépendants de la densité (dp) plutôt que des unités de pixels absolues. Par exemple, pour définir la largeur d'un widget, utilisez
wrap_contentau lieu d'une mesure en pixels. Pour définir la marge d'un widget, utilisez des valeurs dp au lieu de valeurs px.
Pour en savoir plus sur les pixels indépendants de la densité et sur la création de mises en page pour les écrans plus grands, consultez Présentation de la compatibilité des écrans.
Gérer les ressources de mise en page pour la TV
Comme tous les autres appareils Android, les téléviseurs ont des tailles d'écran différentes et sont compatibles avec différentes résolutions, y compris, mais sans s'y limiter, 720p, 1080p et 4K. Assurez-vous que votre application est compatible avec différentes tailles d'écran.
Différentes tailles et résolutions d'écran ont des densités de pixels différentes. Pour préserver l'apparence de votre UI sur différentes tailles d'écran, résolutions et densités de pixels, définissez les mesures de l'UI à l'aide de pixels indépendants de la densité (dp) plutôt que de pixels. La densité de pixels de l'écran pour différentes résolutions de panneaux TV est indiquée ci-dessous.
| Résolution du panneau | Densité de pixels de l'écran |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
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.
Schémas de mise en page à éviter
Il existe plusieurs approches de création de mises en page qui ne fonctionnent pas bien sur les appareils TV. Voici quelques approches d'interface utilisateur à éviter lorsque vous développez une mise en page pour la TV.
- Réutilisation de 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 téléviseurs et doivent être simplifiées pour fonctionner sur un téléviseur.
- Utilisation de
ActionBar: bien que les barres d'action soient recommandées pour les téléphones et les tablettes, elles ne conviennent pas à une interface TV. L'utilisation d'un menu d'options de barre d'action ou de tout menu déroulant est fortement déconseillée pour les applications TV en raison de la difficulté à naviguer dans un tel menu avec une télécommande. - Utiliser
ViewPager: le balayage entre les écrans peut être très pratique sur un téléphone ou une tablette, mais ne l'essayez pas sur un téléviseur !
Pour en savoir plus sur la conception de mises en page adaptées à la TV, consultez le guide Conception pour la TV.
Gérer les bitmaps volumineux
Comme les autres appareils Android, les téléviseurs disposent d'une quantité de mémoire limitée. Si vous créez la mise en page de votre application avec des images à très haute résolution ou si vous utilisez de nombreuses images à haute résolution dans le fonctionnement de votre application, celle-ci peut rapidement atteindre les limites de mémoire et provoquer des erreurs de mémoire insuffisante. Dans la plupart des cas, nous vous recommandons d'utiliser la bibliothèque Glide pour récupérer, décoder et afficher les bitmaps dans votre application. Pour en savoir plus sur l'optimisation des performances lorsque vous travaillez avec des bitmaps, consultez nos bonnes pratiques générales concernant les graphiques Android.
Fournir une publicité efficace
Pour l'environnement du salon, nous vous recommandons d'utiliser des solutions d'annonces vidéo plein écran et désactivables 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 de l'écran tactile.
Android TV ne fournit pas de navigateur Web. Vos annonces ne doivent pas tenter de lancer un navigateur Web ni de rediriger les utilisateurs vers du contenu Google Play Store non approuvé pour les appareils Android TV.
Remarque : Vous pouvez utiliser la classe WebView pour vous connecter aux services de réseaux sociaux.
Ressources supplémentaires
Concevoir des applications pour la TV