Cómo crear diseños de TV

Una pantalla de TV normalmente se ve desde una distancia aproximada de 3 metros y, si bien es mucho más grande que la mayoría de las pantallas de los 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.

En esta guía, se describen los requisitos mínimos y los detalles de implementación para crear diseños efectivos de apps para TV.

Para obtener más información, lee Diseño para TV.

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 destinadas a ejecutarse en un dispositivo de TV. En esta sección, se explica qué temas utilizar.

Tema Leanback

La biblioteca de Leanback de AndroidX incluye Theme.Leanback, un tema para actividades para TV que proporciona un estilo visual coherente. Te recomendamos que uses este tema para cualquier app para TV compilada con las clases Leanback de AndroidX. En la siguiente muestra de código, se indica 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 adecuada para apps para TV. Si no usas las clases Leanback de AndroidX, aplica el tema NoTitleBar a tus actividades para TV a fin de evitar que se muestre una barra de título. En el siguiente ejemplo de código del manifiesto de una app para TV, se muestra cómo aplicar este tema para quitar la visualización de 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 el tono de los elementos de diseño sin preocuparte por la versión de Android que se ejecuta en el dispositivo. Si desarrollas una app que solo se ejecuta en Android TV, no es necesario usar AppCompatActivity, porque 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 un dispositivo móvil Android y Android TV, es posible que encuentres algunos desafíos debido a los temas. AppCompatActivity y los distintos widgets AppCompat requieren que uses Theme.AppCompat, mientras que los fragmentos 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 de AppCompat, como AppCompatImageView, utiliza los temas Theme.AppCompat.Leanback. Estos temas proporcionan todos los temas de AppCompat y también los valores específicos de Leanback.

Puedes personalizar los temas Theme.AppCompat.Leanback de la misma manera que lo haces con cualquier otro tema. Por ejemplo, si deseas cambiar valores que son específicos de OnboardingSupportFragment 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.
  • Crear IUs que se dividan en secciones mediante 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 particulares debido a la evolución de los estándares de TV y al deseo de mostrar siempre imágenes en pantalla completa. 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 normalmente se denomina sobrebarrido.

Posiciona los elementos de la pantalla que deben ser visibles para el usuario en todo momento dentro del área segura de sobrebarrido. Agregar un 5% de margen de 48 dp en los bordes izquierdo y derecho y 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 de sobrebarrido.

No ajustes los elementos de la pantalla en segundo plano con los que el usuario no interactúa directamente ni los recortes en el área segura de sobrebarrido. Este enfoque ayuda a garantizar que los elementos de la pantalla de fondo se vean correctos 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 de 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 de Leanback de AndroidX, como BrowseFragment o widgets relacionados, ya que esos diseños ya incorporan márgenes para evitar el sobrebarrido.

Crea texto y controles útiles

Sigue estas sugerencias para hacer que el texto y los controles en la app para TV sea más fácil 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 vistas sean lo suficientemente grandes como para que sean claramente visibles para alguien que se siente a 3 metros de la pantalla. La mejor manera de hacerlo es usar el tamaño relativo de diseño en lugar del tamaño 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 la compatibilidad de pantallas.

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 diferentes resoluciones, incluidas, sin limitaciones, 720p, 1080p y 4K. Asegúrate de que tu app admita diferentes tamaños de pantalla.

Los distintos tamaños y resoluciones de pantalla tienen distintas densidades de píxeles. Para preservar 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 las 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

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

  • Volver a usar 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.
  • Uso de ActionBar: Si bien se recomienda usar barras de acciones en teléfonos y tablets, no son adecuadas para una interfaz de TV. No se recomienda el uso de un menú de barra de acciones o de cualquier menú desplegable para las apps para TV, debido a la dificultad de navegar por este tipo de menús con un control remoto.
  • Con ViewPager: Deslizar entre una pantalla y otra puede funcionar a la perfección 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 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 usas muchas imágenes de alta resolución en el funcionamiento de tu app, puedes 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 en pantalla completa y que se puedan descartar en 30 segundos. Se debe poder acceder a las funciones de publicidad en Android TV, como botones para descartar y proporciones de clics, mediante el pad direccional, en lugar de controles táctiles.

Android TV no ofrece un navegador web. Tus 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.