Un écran de télévision s'affiche généralement à environ 3 mètres de distance. Bien qu'il soit beaucoup plus grand que la plupart des autres écrans d'appareils Android, un écran de télévision n'offre pas le même niveau de détail et de couleurs 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 de proposer 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 les mises en page dans vos applications TV. Utilisez un thème pour modifier l'affichage des activités de vos applications qui sont destinées à s'exécuter sur un téléviseur. Cette section explique quels thèmes utiliser.
Thème YouTube Grand écran
La bibliothèque Android Leanback inclut Theme.Leanback, un thème pour les activités TV qui offre 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 ne convient pas aux applications TV. Si vous n'utilisez pas de classes Leanback d'AndroidX, appliquez le thème NoTitleBar à vos activités TV pour supprimer l'affichage d'une barre de titre. L'exemple de code suivant issu d'un fichier manifeste d'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 Android Mobile et Android TV, vous pouvez rencontrer des problèmes liés à la thématisation. AppCompatActivity et les différents widgets AppCompat nécessitent l'utilisation de Theme.AppCompat, tandis que les fragments du kit de l'interface utilisateur 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 fournissent toute la 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 pour n'importe quel autre thème. Par exemple, si vous souhaitez modifier des valeurs spécifiques au OnboardingSupportFragment du kit 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 téléviseurs doivent respecter certaines 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 les commandes de navigation à l'écran sur le côté gauche ou droit de l'écran et conservez l'espace vertical réservé au contenu.
- créer des interfaces utilisateur divisées en sections à l'aide de fragments ; Utilisez des groupes de vues tels que
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 commandes de mise en page pour éviter que l'interface utilisateur soit surchargée.
Calibrage
Les mises en page pour la télévision présentent des exigences uniques en raison de l'évolution des normes télévisuelles afin de 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 s'assurer que l'écran est plein. Ce comportement est généralement appelé surbalayage.
Placez les éléments d'écran qui doivent être visibles à tout moment par l'utilisateur dans la zone compatible avec le surbalayage. L'ajout d'une marge de 5% sur les bords gauche et droit de 27 dp sur les bords supérieur et inférieur permet de s'assurer que les éléments de l'écran se trouvent dans la zone compatible avec le surbalayage.
N'ajustez pas les éléments de l'écran en arrière-plan avec lesquels l'utilisateur n'interagit pas directement, et ne les rognez pas dans la zone compatible avec le 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% et pouvant contenir des éléments dans la zone compatible avec 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 classes Leanback d'AndroidX, telles que BrowseSupportFragment ou des widgets associés, car ces mises en page intègrent déjà ces marges.
Créer du texte et des commandes utilisables
Suivez ces conseils pour mieux voir le texte et les commandes de l'application TV de loin:
- Divisez le texte en petits segments 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 à la fois très étroites et très larges. 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"/> - Faites en sorte que tous vos widgets d'affichage soient suffisamment grands pour qu'ils soient clairement visibles par une personne assise à 3 mètres de l'écran. La meilleure façon de procéder est d'utiliser un dimensionnement relatif à 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, et pour définir la marge d'un widget, utilisez les valeurs dp au lieu des 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 des tailles d'écran plus grandes, consultez la section Présentation de la compatibilité des écrans.
Gérer les ressources de mise en page pour le téléviseur
Comme tous les autres appareils Android, les téléviseurs disposent de 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.
La densité en pixels varie selon les tailles et résolutions d'écran. Pour conserver l'apparence de votre UI pour toutes les 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é 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 |
| 4 k | xxxhdpi |
Pour 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 plusieurs façons de 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 la télévision.
- Réutilisation de 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 y apporter de modifications. 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 une utilisation sur un téléviseur.
- Utilisation de
ActionBar:bien que les barres d'action soient recommandées sur les téléphones et les tablettes, elles ne conviennent pas à une interface TV. Il est vivement déconseillé d'utiliser un menu d'options de barre d'action ou tout menu déroulant pour les applications TV, car il est difficile de naviguer dans ce type de menu avec une télécommande. - Utilisation de
ViewPager:vous pouvez passer d'un écran à l'autre sur un téléphone ou une tablette, mais n'essayez pas cette option sur un téléviseur.
Pour en savoir plus sur la conception de mises en page adaptées à la télévision, consultez le guide de conception de téléviseurs.
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 compilez 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 en fonctionnement, elle 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 savoir comment obtenir des performances optimales lorsque vous utilisez des bitmaps, consultez les bonnes pratiques générales pour les éléments graphiques Android.
Proposer des publicités 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, telles que les boutons "Ignorer" et les clics, doivent être accessibles à l'aide du pavé directionnel plutôt que tactile.
Android TV ne propose pas de navigateur Web. Vos annonces ne doivent pas tenter de lancer un navigateur Web ni 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 réseaux sociaux.