Por lo general, una pantalla de TV se ve desde aproximadamente 3 metros de distancia. Si bien es mucho más grande que la mayoría de las otras pantallas de dispositivos con tecnología 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 proporcionar una base 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 diseñadas para ejecutarse en un dispositivo de TV. En esta sección, se explica qué temas usar.
Tema Leanback
La biblioteca androidx.leanback, que dejó de estar disponible, incluye Theme.Leanback,
un tema para las actividades de TV que proporciona un estilo visual coherente para las apps del kit de herramientas de IU de Leanback. Usa este tema para cualquier app para TV compilada 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 el
NoTitleBar 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>
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 sombreado de 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 uses AppCompatActivity, ya que las funciones que habilita ya están disponibles en Android TV o no son relevantes.
Si compilas una app con una base de código compartida entre Android para dispositivos móviles y Android TV, es posible que tengas
algunos problemas debido a la aplicación de temas. AppCompatActivity y los diversos
widgets AppCompat requieren que uses Theme.AppCompat, mientras que los
fragmentos del kit de herramientas de IU de Leanback esperan que uses
FragmentActivity
y Theme.Leanback.
Si necesitas usar la misma actividad base para Android para dispositivos móviles y Android TV, o si deseas usar
vistas personalizadas basadas en AppCompat widgets como
AppCompatImageView,
usa los temas Theme.AppCompat.Leanback. Estos temas te brindan toda la aplicación de 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 lo haces con cualquier otro
tema. Por ejemplo, si deseas cambiar los valores que son específicos de
`OnboardingSupportFragment` del 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 algunas instrucciones básicas para garantizar que sean utilizables y eficaces en pantallas grandes. Sigue estos consejos para compilar diseños optimizados para pantallas de TV:
- Crea diseños con orientación horizontal. Las pantallas de TV siempre se visualizan en modo horizontal.
- 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. 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 únicos debido a la evolución de los estándares de TV para presentar una imagen de pantalla completa a los usuarios. Por este motivo, los dispositivos de TV pueden recortar el borde exterior de un diseño de app para garantizar que se llene toda la pantalla. Este comportamiento normalmente se denomina sobrebarrido.
Coloca los elementos de la pantalla que deben permanecer visibles para el usuario en todo momento 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.
No ajustes los elementos de la pantalla en el fondo con los que el usuario no interactúa directamente y no recortes los elementos en el área segura de sobrebarrido. Este enfoque ayuda a garantizar que los elementos de la pantalla en el 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 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 las
clases de Leanback de AndroidX, como
BrowseSupportFragment
o widgets relacionados, dado que sus diseños ya incorporan márgenes para evitar el sobrebarrido.
Cómo compilar texto y controles utilizables
Sigue estos consejos para que el texto y los controles de tu app para TV sean más fáciles de ver desde la 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 sean claramente visibles para alguien
que esté sentado a 3 metros de la pantalla. 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 establecer el
ancho de un widget, usa
wrap_contenten lugar de una medición de píxeles y, para establecer el margen de 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, entre otras, 720p, 1080p y 4K. Asegúrate de que tu app admita diferentes tamaños de pantalla.
Los diferentes tamaños y resoluciones de pantalla tienen diferentes densidades de píxeles. Para preservar la apariencia de tu IU en diferentes tamaños de pantalla, resoluciones y densidades de píxeles, define las mediciones 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 panel 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 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 de la interfaz de usuario que se deben evitar cuando se desarrolla un diseño para TV.
- Reutilización de diseños de teléfonos o tablets: No reutilices diseños de una app para teléfonos o tablets sin modificaciones. Los diseños compilados 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. Se desaconseja el uso de un menú de opciones de la barra de acciones o de cualquier otro menú desplegable en apps para TV debido a la dificultad de navegar por este tipo de menús con un control remoto. - Uso de
ViewPager: Deslizar 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 el diseño de diseños adecuados para TV, consulta la guía de diseño para TV.
Cómo controlar mapas de bits grandes
Los dispositivos de TV, al igual que otros dispositivos Android, tienen una cantidad limitada de memoria. Si compilas el diseño de tu app con imágenes de muy alta resolución o usas muchas imágenes de alta resolución en el funcionamiento de tu app, es posible que se agote la memoria rápidamente y se produzcan 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 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.