Un téléviseur est généralement visualisé à une distance d'environ trois mètres. Bien qu'il soit beaucoup plus grand que la plupart des autres écrans d'appareils Android, un écran de téléviseur 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 adaptées aux téléviseurs 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 constituer une base pour les mises en page dans vos applications TV. Utilisez un thème pour modifier l'affichage des activités de votre application destinées à s'exécuter 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 applications TV créées 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 pour les applications Android sur les téléphones et les tablettes, mais elle n'est pas appropriée pour les 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 provenant 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 avec l'un des thèmes Theme.AppCompat. Cette combinaison vous permet d'utiliser des fonctionnalités telles que la teinte des drawables sans vous soucier de la version d'Android exécutée sur l'appareil. Si vous développez 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 ne sont pas pertinentes.
Si vous créez une application avec un codebase partagé entre les appareils mobiles Android et Android TV, la thématisation peut vous poser des problèmes. AppCompatActivity et les différents widgets AppCompat nécessitent l'utilisation de Theme.AppCompat, tandis que les fragments du kit d'interface utilisateur Leanback s'attendent à ce que vous utilisiez FragmentActivity et Theme.Leanback.
Si vous devez utiliser la même activité de base pour les mobiles Android 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 donnent accès à tous les thèmes 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 au OnboardingSupportFragment du kit d'interface utilisateur 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 des téléviseurs doivent respecter quelques consignes de base pour garantir leur utilisation et leur efficacité 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 des 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 interfaces utilisateur divisées en sections à l'aide de fragments. Utilisez des groupes de vues tels que
GridViewau lieu deListViewpour optimiser l'utilisation de 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 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 visant à présenter une image en plein écran aux spectateurs. Pour cette raison, les téléviseurs peuvent rogner le bord extérieur d'une mise en page d'application pour garantir que tout l'écran est plein. 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 zone protégée par le surbalayage. L'ajout d'une marge de 5% de 48 dp sur les bords gauche et droit et de 27 dp en haut et en bas à une mise en page permet de s'assurer que les éléments de l'écran se trouvent dans la zone de protection contre le surbalayage.
N'ajustez pas les éléments de l'écran d'arrière-plan avec lesquels l'utilisateur n'interagit pas directement, et ne les rognez pas à la zone sécurisée par le surbalayage. Cette approche permet de garantir 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% et pouvant contenir des éléments dans la zone sécurisée du 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 sûres.
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"/> - Veillez à ce que tous vos widgets d'affichage soient suffisamment grands pour être bien visibles par une personne assise à trois mètres de l'écran. Pour ce faire, le meilleur moyen consiste à utiliser un dimensionnement relatif pour la mise en page plutôt qu'un dimensionnement absolu, et des unités de pixels indépendants de la densité (dp) au lieu d'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 permettant de gérer des écrans de plus grande taille, consultez la section Présentation de la compatibilité des écrans.
Gérer les ressources de mise en page pour TV
Comme tous les autres appareils Android, les téléviseurs ont différentes tailles d'écran 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.
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 les 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) plutôt que de pixels. La densité en pixels de l'écran pour différentes résolutions d'écran de téléviseur est indiquée ci-dessous.
| Résolution du panneau | Densité de pixels de l'écran |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
Afin d'en savoir plus sur l'optimisation des mises en page et des ressources pour les grands écrans, consultez la section Présentation de la compatibilité des écrans.
Modèles de mise en page à éviter
Il existe quelques approches pour créer des mises en page qui ne fonctionnent pas bien sur les téléviseurs. Voici quelques approches d'interface utilisateur à éviter lors du développement d'une mise en page pour TV.
- Réutiliser des mises en page pour téléphone ou tablette:ne réutilisez pas les mises en page d'une application pour téléphone ou tablette sans la 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:si les barres d'action sont recommandées pour les téléphones et les tablettes, elles ne sont pas adaptées à une interface TV. L'utilisation d'un menu d'options de la barre d'action ou de tout menu déroulant est vivement déconseillée pour les applications TV en raison de la difficulté à parcourir ce type de menu à l'aide d'une télécommande. - À l'aide de
ViewPager:le fait de glisser entre les écrans peut être idéal 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 aux téléviseurs, consultez le guide Conception des 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 la mise en page de votre application avec des images à très haute résolution ou que vous utilisez de nombreuses images haute résolution pour le fonctionnement de votre application, celle-ci peut rapidement se heurter aux 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 savoir comment optimiser les performances lorsque vous utilisez des bitmaps, consultez nos bonnes pratiques générales pour les graphiques Android.
Diffuser des annonces efficaces
Pour l'environnement de salon, nous vous recommandons d'utiliser des solutions publicitaires vidéo qui s'affichent en plein écran et peuvent être ignorées dans les 30 secondes. Les fonctionnalités de publicité sur Android TV, comme les boutons "Ignorer" et les clics, doivent être 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 ni de rediriger 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 télévision