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

Por lo general, una pantalla de TV se ve desde unos 3 metros de distancia y, si bien es mucho más grande que la mayoría de las pantallas de otros dispositivos Android, una pantalla de TV no proporciona el mismo nivel de detalle y color que una pantalla de dispositivo más pequeña. Estos factores requieren que crees diseños de apps teniendo en cuenta los dispositivos de TV para crear una experiencia del usuario útil y agradable.

Cómo usar temas de diseño para TV

Los temas de Android pueden aportar las bases para los diseños de tus apps para TV. Usa un tema para modificar la visualización de las actividades de tu app que están destinadas a 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 cualquier app para TV compilada con las clases de AndroidX Leanback. En el siguiente ejemplo de código, se muestra cómo aplicar este tema a una 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, pero no es apropiada en apps para TV. Si no usas las clases Leanback de AndroidX, aplica el tema NoTitleBar a tus actividades para TV para evitar que se muestre una barra de título. En el siguiente ejemplo de código del manifiesto de una app para TV, se demuestra cómo aplicar este tema para no mostrar 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 de Android, es muy común usar AppCompatActivity junto con uno de los temas Theme.AppCompat. Esta combinación te permite usar funciones como el ajuste de tono de los elementos de diseño sin preocuparte por la versión de Android que se ejecuta en el dispositivo. Si estás desarrollando una app que se ejecuta solo en Android TV, no uses AppCompatActivity, ya que las funciones que habilita ya están disponibles en Android TV o no son relevantes.

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

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

Puedes personalizar los temas Theme.AppCompat.Leanback de la misma manera que con cualquier otro tema. Por ejemplo, si deseas cambiar valores específicos del OnboardingSupportFragment del kit de herramientas de la IU de Leanback, 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 que se puedan usar y sean eficaces 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 controles de navegación en pantalla sobre el lado izquierdo o derecho de la pantalla para ahorrar espacio vertical para el contenido.
• Crea IUs que se dividan en secciones con fragmentos. Usa grupos de vistas como GridView en lugar 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 una imagen en pantalla completa a los usuarios. Por este motivo, los dispositivos de TV pueden recortar el borde exterior del diseño de una app para asegurarse de que se rellene toda la pantalla. Este comportamiento se suele denominar sobrebarrido.

Posiciona los elementos de la pantalla que deben ser visibles para el usuario en todo momento dentro del área segura para el sobrebarrido. Agregar un margen del 5% de 48 dp en los bordes izquierdo y derecho, y de 27 dp en los bordes inferior y superior a un diseño ayuda a garantizar que los elementos de la pantalla del diseño estén dentro del área segura contra el sobrebarrido.

No ajustes los elementos de la pantalla de fondo con los que el usuario no interactúa directamente ni los recortes en el área segura para el 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 un diseño secundario anidado que tiene un margen del 5% y puede 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 a tu diseño si usas las clases Leanback de AndroidX, como BrowseSupportFragment o widgets relacionados, puesto que esos diseños ya incorporan márgenes seguros para 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 puedan verlos claramente una persona sentada a 3 metros de la pantalla. La mejor manera de hacerlo es usar el ajuste de tamaño relativo con respecto al diseño y no absoluto, y unidades de píxeles independientes de la densidad (dp) en lugar de unidades absolutas de píxeles. Por ejemplo, para configurar el ancho de un widget, usa wrap_content en lugar de una medida de píxeles; para configurar el margen para un widget, usa valores de dp en lugar de valores de px.

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

Cómo administrar recursos de diseño para TV

Al igual que todos los demás dispositivos Android, las TVs tienen diferentes tamaños de pantalla y admiten distintas resoluciones, 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 conservar el aspecto de la IU en todos los tamaños de pantalla, la resolución y las densidades de píxeles, define las medidas de la IU con píxeles independientes de la densidad (dp) en lugar de píxeles. A continuación, se describe la densidad de píxeles de la pantalla para diferentes resoluciones de paneles de TV.

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

Para obtener más información, consulta Cómo brindar compatibilidad con diferentes densidades de píxeles.

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 bien en dispositivos de TV. A continuación, se muestran algunos enfoques de la interfaz de usuario que debes evitar cuando desarrollas un diseño para TV.

• Reutilizar diseños para teléfonos o tablets: No vuelvas a usar diseños de una app para teléfonos o tablets sin modificarlos. Los diseños creados para otros factores de forma de dispositivos Android no son adecuados para dispositivos de TV y deben simplificarse para su funcionamiento en una TV.
• Usa ActionBar: Si bien se recomienda usar barras de acción en teléfonos y tablets, no son apropiadas para una interfaz de TV. En el caso de las apps para TV, no se recomienda usar un menú de opciones de barra de acciones ni cualquier menú desplegable, debido a la dificultad de navegar por ese tipo de menú con un control remoto.
• Usar ViewPager: deslizarse entre pantallas puede funcionar a la perfección en un teléfono o una tablet, pero no lo pruebes en una TV.

Para obtener más información sobre cómo crear diseños apropiados para TV, consulta la guía Diseño para 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 creas el diseño de tu app con imágenes de resolución muy alta o utilizas muchas imágenes de alta resolución en el funcionamiento de tu app, puede alcanzar rápidamente los límites de memoria y causar errores de falta de memoria. En la mayoría de los casos, te recomendamos que uses la biblioteca Glide para recuperar, decodificar y mostrar mapas de bits en tu app. Si quieres obtener más información para obtener el mejor rendimiento cuando trabajas con mapas de bits, consulta nuestras Prácticas recomendadas de gráficos de Android generales.

Cómo brindar publicidad efectiva

Para un entorno de sala de estar, te recomendamos que uses soluciones de anuncios de video que sean en pantalla completa y puedan descartarse en un plazo de 30 segundos. Se debe poder acceder a las funciones de publicidad en Android TV, como botones para descartar y clics, mediante el pad direccional en lugar de los controles táctiles.

Android TV no ofrece un navegador web. Tus anuncios no deben intentar iniciar un navegador web ni 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