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 demás dispositivos Android, no proporciona el mismo nivel de precisión, detalle y color que los dispositivos más pequeños. Estos factores requieren que desarrolles diseños de apps pensados para dispositivos de TV que te permitan crear una experiencia del usuario útil y agradable.
En esta lección, se describen los requisitos mínimos y los detalles de implementación para crear diseños efectivos de apps para TV.
También deberías consultar Diseño para Android TV.
Cómo usar temas de diseño para TV
Los temas de Android pueden aportar las bases que utilizarás a fin de diseñar tus apps para TV. Deberías usar un tema a fin de modificar el diseño de las actividades de tu app que se ejecutarán en un dispositivo de TV. En esta sección, verás los temas que deberías usar.
Tema Leanback
La biblioteca de Leanback de AndroidX incluye Theme.Leanback, un tema para las actividades de TV que proporciona un estilo visual coherente. Te recomendamos que lo uses en cualquier app para TV creada con las clases de Leanback de AndroidX. 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 de Android en teléfonos y tablets, pero no es adecuada para apps para TV. Si no usas las clases de Leanback de AndroidX, debes implementar este tema en 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, verás cómo implementar este tema de manera que no 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>
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 puedan usarse de manera eficiente en pantallas grandes. Sigue estas sugerencias para diseños horizontales 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 a fin de ahorrar espacio vertical para el contenido.
- Usa Fragments para crear IU divididas en secciones y usa grupos de vistas como
GridViewen lugar deListViewpara aprovechar mejor el espacio horizontal de la pantalla. - Usa grupos de vistas como
RelativeLayoutoLinearLayoutpara organizar las vistas. De esta manera, el sistema ajusta la posición de estas 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 cortar el borde exterior del diseño de una app para asegurarse de que se rellene toda la pantalla. Este comportamiento normalmente se denomina sobrebarrido.
Los elementos de la pantalla que deben permanecer visibles para el usuario deben ubicarse dentro del área segura de sobrebarrido. Al agregar un 5% de margen de 48 dp en los bordes izquierdo y derecho, y de 27 dp en los bordes inferior y superior del diseño, se garantiza que los elementos de la pantalla en ese diseño estén dentro del área segura de sobrebarrido.
Los elementos en el fondo de la pantalla con los que el usuario no interactúa directamente no deben ajustarse ni fijarse dentro del área segura de sobrebarrido. Este enfoque garantiza que los elementos en el fondo de la pantalla se vean correctamente en todos los tamaños.
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 implementes márgenes de sobrebarrido en tu diseño si usas clases de Leanback de AndroidX, como BrowseFragment o widgets relacionados, dado que sus diseños ya incorporan márgenes para evitar el sobrebarrido.
Cómo crear textos y controles útiles
El texto y los controles en el diseño de una app de TV deberían ser fáciles de visualizar y de navegar a distancia. Sigue estas sugerencias para lograr que los elementos de tu interfaz de usuario se vean fácilmente 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"/> - Asegúrate de que todos los widgets de vista tengan un diseño lo suficientemente grande como para que los usuarios puedan verlos claramente estando a 3 metros de la pantalla (esta distancia es mayor para pantallas más grandes). La mejor manera de hacerlo es usar la definición de tamaño relativo del diseño y no absoluto, además de unidades de píxeles independientes de la densidad (dip), en lugar de unidades de píxeles absolutas. Por ejemplo, para configurar el ancho de un widget, usa
wrap_contenten lugar de una medida de píxeles; en cambio, para configurar el margen para un widget, usa valores dip en lugar 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 Compatibilidad con varias pantallas.
Cómo administrar recursos de diseño para TV
Las resoluciones comunes de alta definición para TV son 720p, 1080i y 1080p. Tu diseño para TV debería orientarse a una resolución de 1920 x 1080 píxeles y permitir al sistema Android que reduzca la escala de tus elementos de diseño a 720 px si fuera necesario. En general, reducir la escala (quitar píxeles) no disminuye la calidad de presentación de tu diseño. Sin embargo, aumentar la escala puede generar artefactos que disminuyan la calidad de tu diseño y, por lo tanto, impacten negativamente en la experiencia del usuario de tu app.
Para obtener los mejores resultados de escalamiento de imágenes, agrégalas como elementos de imagen de 9-Patch, cuando sea posible. Si incluyes imágenes pequeñas o de baja calidad en tus diseños, se verán pixeladas, borrosas o granulosas; lo que no brinda una buena experiencia del usuario. En cambio, utiliza imágenes de alta calidad.
Para obtener más información sobre cómo optimizar diseños y recursos para pantallas grandes, consulta Cómo crear diseños para varias pantallas.
Cómo evitar antipatrones de diseño
Hay algunas estrategias para crear diseños que deberías evitar, ya que no funcionan correctamente en dispositivos de TV y brindan una mala experiencia del usuario. A continuación, se muestran algunos enfoques para la interfaz de usuario que específicamente no deberías usar al crear 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 apropiados para dispositivos de TV y deben simplificarse para su uso en una TV.
- ActionBar: Si bien esta convención de interfaz de usuario es recomendable para teléfonos y tablets, no es apropiada para una interfaz de TV. En especial, se desalienta el uso de un menú de barra de acciones (y de cualquier otro menú desplegable), debido a la dificultad de navegar por este tipo de menús mediante un control remoto.
- ViewPager: Deslizar entre una pantalla y otra puede funcionar a la perfección en un teléfono o 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, como cualquier otro dispositivo 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, podrías alcanzar rápidamente los límites de memoria y provocar errores de falta de memoria. En la mayoría de los casos, te recomendamos que uses la biblioteca de Glide para obtener, decodificar y mostrar mapas de bits en tu app. Para obtener más información sobre cómo lograr el mejor rendimiento cuando trabajas con mapas de bits, consulta nuestras Prácticas recomendadas de gráficos de Android.
Cómo brindar publicidad efectiva
Para un entorno de sala de estar, te recomendamos que uses soluciones de anuncios de video de pantalla completa y que puedan descartarse en 30 segundos. Se debe poder acceder a las funcionalidades 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 redirigir a contenido en Google Play Store que no esté aprobado para dispositivos con Android TV.
Nota: Puedes usar la clase WebView para acceder a servicios de redes sociales.