Se usó la API de Cloud Translation para traducir esta página.

Diseños en el kit de herramientas de la IU de Leanback

Una pantalla de TV normalmente se ve desde unos 3 metros de distancia y mientras es mucho más grande que la mayoría de las veces. otras pantallas de dispositivos con Android, una pantalla de TV no proporciona el mismo nivel de detalles y color como una pantalla de dispositivo más pequeña. Estos factores requieren que crees diseños de apps con dispositivos de TV en mente para crear una experiencia del usuario útil y agradable.

Cómo usar temas de diseño para TV

Los temas de Android pueden proporcionar una base para diseños en tus apps para TV. Usar un tema para modificar la visualización de las actividades de tu app que se diseñaron para ejecutarse en un dispositivo de TV. En esta sección, se explica qué temas utilizar.

Tema Leanback

La biblioteca androidx.Leanback incluye Theme.Leanback, un tema para actividades de TV que proporciona un estilo visual coherente. Usa este tema en todas las apps para TV creadas con las clases Leanback de AndroidX. El siguiente ejemplo de código muestra cómo aplicar este tema a un actividad:

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

Tema NoTitleBar

La barra de título es un elemento estándar de la interfaz de usuario de las apps para Android en teléfonos y tablets, no es adecuada para apps de TV. Si no usas clases Leanback de AndroidX, aplica la NoTitleBar a tus actividades para TV para evitar que se muestre una barra de título. El siguiente ejemplo de código desde el manifiesto de una aplicación para TV muestra cómo aplicar este tema para evitar que se muestre una barra de título:

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

Temas de AppCompat

En las apps para dispositivos móviles Android, es muy común usar AppCompatActivity junto con uno de los temas Theme.AppCompat. Esta combinación te permite usar funciones como ajustar el tono de los elementos de diseño sin preocuparte por la versión de Android que se ejecuta en el dispositivo. Si están desarrollando una aplicación que se ejecuta únicamente en Android TV, no la uses AppCompatActivity, porque las funciones que habilita ya están disponibles en Android TV o no es relevante.

Si estás compilando una app con una base de código compartida entre Android para dispositivos móviles y Android TV, puedes ejecutar en algunos desafíos debido a los temas. AppCompatActivity y los diversos Los widgets AppCompat requieren que uses Theme.AppCompat, mientras que Se espera que uses los fragmentos del kit de herramientas de IU de Leanback FragmentActivity y Theme.Leanback.

Si necesitas usar la misma actividad base para dispositivos móviles Android y Android TV, o si quieres usar vistas personalizadas basadas en AppCompat widgets, como AppCompatImageView, usa los temas Theme.AppCompat.Leanback. Estos temas te brindan todos los temas desde AppCompat y proporcionar los valores específicos de Leanback.

Puedes personalizar los temas Theme.AppCompat.Leanback de la misma manera que con cualquier otro el tema. Por ejemplo, si quieres cambiar valores específicos de la Kit de herramientas de IU de Leanback OnboardingSupportFragment, haz algo similar a lo siguiente:

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

Cómo crear diseños básicos para TV

Los diseños para dispositivos de TV deben seguir algunos lineamientos básicos para garantizar su usabilidad y eficaz en pantallas grandes. Sigue estas sugerencias para crear diseños optimizados para pantallas de TV:

Crea diseños con orientación horizontal. Las pantallas de TV siempre se visualizan en modo de paisaje.
Coloca los controles de navegación en pantalla sobre el lado izquierdo o derecho de la pantalla y guarda los espacio vertical para el contenido.
Crea IUs que se dividan en secciones con fragmentos. Usa grupos de vistas, como GridView en vez de ListView para aprovechar mejor el espacio horizontal de la pantalla.
Usa grupos de vistas, como RelativeLayout o LinearLayout para organizar las vistas. Este enfoque permite que el sistema ajuste la posición de las vistas al tamaño la alineación, la relación de aspecto y la densidad de píxeles de una pantalla de TV.
Agrega márgenes suficientes entre los controles del diseño para evitar una IU con demasiados elementos en poco espacio.

Sobrebarrido

Los diseños para TV tienen algunos requisitos únicos debido a la evolución de los estándares de TV para presentar un pantalla completa para los usuarios. Por este motivo, los dispositivos de TV podrían cortar el borde externo de una app. para garantizar que se rellene toda la pantalla. Por lo general, este comportamiento se conoce como sobrebarrido.

Posiciona los elementos de la pantalla que deben ser visibles para el usuario en todo momento dentro del entorno seguro de sobrebarrido. en una sola área de almacenamiento en etapa intermedia. Agrega un margen del 5% de 48 dp en los bordes izquierdo y derecho, y de 27 dp en los bordes inferior y superior los bordes de un diseño ayuda a garantizar que los elementos de pantalla del diseño estén dentro del rango de protección de sobrebarrido en una sola área de almacenamiento en etapa intermedia.

No ajustes los elementos de la pantalla de fondo con los que el usuario no interactúa directamente ni los recortas. los elementos al área segura de sobrebarrido. Este enfoque ayuda a garantizar que los elementos de la pantalla de fondo se vean correctamente en todas las pantallas.

En el siguiente ejemplo, se muestra un diseño raíz que puede contener elementos de fondo y una capa anidada un diseño secundario que tenga un margen del 5% y pueda contener elementos dentro del área segura para el sobrebarrido.

<?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>

Precaución: No apliques márgenes de sobrebarrido en tu diseño si utilizas Clases de AndroidX Leanback, como BrowseSupportFragment o widgets relacionados, dado que sus diseños ya incorporan márgenes para evitar el sobrebarrido.

Crea textos y controles utilizables

Sigue estas sugerencias para que el texto y los controles de la app para TVs sean más fáciles de ver a distancia:

Divide el texto en fragmentos pequeños que los usuarios puedan ojear rápidamente.
Usa texto claro sobre fondo oscuro. Este estilo es más fácil de leer en una TV.
Evita fuentes finas o aquellas que tengan trazos muy angostos o muy anchos. Utiliza siempre fuentes Sans Serif y con suavizado de contorno para facilitar la lectura.

Usa los tamaños de fuente estándar de 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"/>

Haz que todos los widgets de vista sean lo suficientemente grandes como para que alguien pueda verlos claramente. sentado a 3 metros de la pantalla. El La mejor manera de hacerlo es usar el tamaño relativo del diseño en lugar del tamaño absoluto, y unidades de píxeles independientes de la densidad (dp) en lugar de unidades de píxeles absolutas. Por ejemplo, para configurar el de un widget, usa wrap_content en lugar de una medida de píxeles y para establecer la margen para un widget, usa valores dp en lugar de valores px.

Para obtener más información sobre píxeles independientes de la densidad y cómo crear diseños para controlar imágenes tamaños de pantalla, consulta Compatibilidad de pantalla descripción general.

Cómo administrar recursos de diseño para TV

Como todos los demás dispositivos Android, las TVs tienen distintos tamaños de pantalla y admiten diferentes de resolución, incluidas, sin limitaciones, 720p, 1080p y 4K. Asegúrate de que tu app sea compatible con diferentes tamaños de pantalla.

Los diferentes tamaños y resoluciones de pantalla tienen distintas densidades de píxeles. Para preservar la apariencia de la IU en distintos tamaños de pantalla, resoluciones y densidades de píxeles, define las medidas de la IU con de píxeles independientes de la densidad (dp) en lugar de píxeles. Densidad de píxeles de la pantalla para diferentes paneles de TV resoluciones, se describe a continuación.

Resolución del panel	Densidad de píxeles de la pantalla
720p	`tvdpi`
1080	`xhdpi`
4K	`xxxhdpi`

Consulta Cómo brindar compatibilidad con diferentes densidades de píxeles para más información.

Para obtener más información sobre cómo optimizar diseños y recursos para pantallas grandes, consulta Descripción general de la compatibilidad de pantallas.

Patrones de diseño que se deben evitar

Hay algunos enfoques para compilar diseños que no funcionan en dispositivos de TV. Estos son algunos enfoques de la interfaz de usuario para evitar al desarrollar un diseño para TV.

Reutilizar diseños para teléfonos o tablets: No vuelvas a usar diseños de un teléfono o app para tablets sin modificaciones. Los diseños creados para otros factores de forma de dispositivos Android no se son adecuados para dispositivos de TV y deben simplificarse para su funcionamiento en TV.
Usar ActionBar: mientras que se recomienda usar barras de acciones en teléfonos y tablets, no son apropiados para una interfaz de TV. Con un el menú de opciones de la barra de acciones o cualquier menú desplegable, no se recomienda para las apps para TV, ya que a la dificultad de navegar ese tipo de menús con un control remoto.
Usar ViewPager: deslizarse entre pantallas puede funcionar muy bien en un teléfono o una tablet, pero no lo intentes en una TV.

Para obtener más información sobre cómo crear diseños apropiados para TV, consulta la Diseño de TV.

Cómo controlar mapas de bits grandes

Los dispositivos de TV, al igual que otros dispositivos Android, tienen una cantidad de memoria limitada. Si compilas tu un diseño de la app con imágenes de alta resolución o muchas de estas imágenes en la operación de tu app, puede alcanzar rápidamente los límites de memoria y causar errores de falta de memoria. Para la mayoría casos, recomendamos usar Glide para recuperar, decodificar y mostrar mapas de bits en tu app. Para obtener más información sobre cómo obtener el el mejor rendimiento cuando se trabaja con mapas de bits, consulta nuestro artículo Prácticas recomendadas de gráficos de Android.

Cómo brindar publicidad efectiva

Para el entorno de la sala de estar, recomendamos que utilice soluciones de anuncios de video en pantalla completa y descartables en 30 segundos. Funcionalidad para la publicidad en Android TV, como botones para descartar y clics, debe accesible mediante el pad direccional en lugar de los controles táctiles.

Android TV no ofrece un navegador web. Sus anuncios no deben intentar iniciar un navegador web o redireccionar a contenido de Google Play Store que no esté aprobado para dispositivos Android TV.

Nota: Puedes usar la clase WebView para acceder a servicios de redes sociales.

Recursos adicionales

Cómo diseñar para TV

Cómo migrar a Compose para TV