En esta guía, se describe cómo crear íconos de selector y banners para Android TV.
Conclusiones principales
Los siguientes son los puntos clave de esta página:
- Existen dos tipos de íconos para las apps del SO Android TV en AndroidManifest.xml:
android:icon
(estándar, obligatorio)android:banner
(banner, obligatorio)
- Se recomienda usar íconos adaptables.
- Tanto el ícono como el banner deben cumplir con los lineamientos de diseño que se describen en esta guía.
- Usa la plantilla oficial de Figma para generar los íconos y el banner.
- El SO Android TV no admite íconos temáticos.
Descripción general
Google TV y el SO Android usan la iconografía que proporciona tu AndroidManifest.xml
de tres maneras:
- Ícono de selector (relación de aspecto de 1 x 1)
- Ícono de selector redondo (relación de aspecto de 1 x 1, pero circular)
- Logotipo del banner (relación de aspecto de 16 × 9)
Se usan en diferentes lugares para distintos casos de uso, como la fila Tus apps, Configuración o el progreso de la instalación.
Banner
El logotipo del banner es un logotipo con una relación de aspecto de 16 x 9 que se utiliza en el SO Android TV para mostrar tu selector de aplicaciones. Recomendamos que las apps para TV proporcionen un banner adaptable de 16:9 con las siguientes especificaciones. También puedes proporcionar recursos xhdpi con un tamaño de 320 x 180px
cuando usas el nivel de API 25 o uno inferior.
![Tamaños de los íconos de banner de TV](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/banner-sizes.webp?authuser=7&hl=es)
Densidad | Tamaño mín. | Ubicación de la carpeta (en resolución) | Tasa de píxeles |
---|---|---|---|
mdpi | 160x90 px | mipmap-mdpi | 1 |
hdpi | 240x135 px | mipmap-hdpi | 1.5 |
xhdpi | 320x180 px | mipmap-xhdpi | 2 |
xxhdpi | 480x270 px | mipmap-xxhdpi | 3 |
xxxhdpi | 640x360 px | mipmap-xxxhdpi | 4 |
Ícono de selector
El ícono de selector es un recurso de relación de aspecto de 1 x 1 que se usa en varios lugares, como Configuración e integraciones de sesiones multimedia (tarjeta Está sonando) en Android TV. El ícono de selector también se puede usar en la fila Tus apps en Google TV.
![Tamaños de los íconos de selector](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/launcher-sizes.webp?authuser=7&hl=es)
Densidad | Tamaño mín. | Ubicación de la carpeta (en resolución) | Tasa de píxeles |
---|---|---|---|
mdpi | 80 × 80 px | mipmap-mdpi | 1 |
hdpi | 120x120 px | mipmap-hdpi | 1.5 |
xhdpi | 160x160 px | mipmap-xhdpi | 2 |
xxhdpi | 240x240 px | mipmap-xxhdpi | 3 |
xxxhdpi | 320x320 px | mipmap-xxxhdpi | 4 |
Íconos adaptables
A partir de la versión de Android 8.0 (nivel de API 26), se admite la compatibilidad con los íconos de selector adaptables, lo que permite una mayor flexibilidad y efectos visuales interesantes en lo que respecta a los íconos de apps. Para los desarrolladores, eso significa que el ícono de la app se compone de dos capas: una en primer plano y otra en segundo.
Banner adaptable
También puedes proporcionar un banner adaptable junto con los banners heredados, que son similares a los banners con íconos de selector que también tienen dos capas.
![Banner adaptable para TV](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/banner-adaptive-safe.webp?authuser=7&hl=es)
Ícono de selector adaptable
Para asegurarte de que tu ícono adaptable admita diferentes formas y los efectos visuales, el diseño debe cumplir con los siguientes requisitos:
Proporciona dos capas para la versión en color del ícono: una para el primer plano y otra para el segundo plano.
![Ícono de selector adaptable de TV](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/launcher-adaptive-safe.webp?authuser=7&hl=es)
Los íconos adaptables se definen con capas en primer y segundo plano. La zona segura de 72 x 72 de la primera imagen muestra el lugar en el que una máscara con forma nunca recorta las capas del ícono y del primer plano.
No se requiere una versión monocromática del ícono, ya que Android TV no admite íconos temáticos.
Ejemplos
A continuación, se incluyen algunas sugerencias y precauciones que se deben tener en cuenta a la hora de diseñar un ícono de app para TV.
Ejemplos de banners
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/200.webp?authuser=7&hl=es)
Qué debes hacer
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/000.webp?authuser=7&hl=es)
Qué no debes hacer
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/001.webp?authuser=7&hl=es)
Qué no debes hacer
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/002.webp?authuser=7&hl=es)
Qué no debes hacer
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/003.webp?authuser=7&hl=es)
Qué no debes hacer
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/004.webp?authuser=7&hl=es)
Qué no debes hacer
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/005.webp?authuser=7&hl=es)
Precaución
Ejemplos de selectores
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/201.webp?authuser=7&hl=es)
Qué debes hacer
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/100.webp?authuser=7&hl=es)
Qué no debes hacer
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/101.webp?authuser=7&hl=es)
Qué no debes hacer
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/102.webp?authuser=7&hl=es)
Qué no debes hacer
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/103.webp?authuser=7&hl=es)
Qué no debes hacer
![](https://developer.android.com/static/design/ui/tv/guides/system/images/icons/104.webp?authuser=7&hl=es)
Qué no debes hacer
Recursos
- Plantilla oficial de Figma para íconos y banners
Lecturas relacionadas
- Íconos adaptables para dispositivos móviles
- Uso de los íconos adaptables
- Cómo diseñar íconos adaptables