Disfruta de acceso sin interrupciones a tus películas, programas de TV y música favoritos, y mucho más en la pantalla grande cuando quieras en casa.
Recursos
Tipo | Vínculo | Estado |
---|---|---|
Diseño | Fuente del diseño (Figma) | Disponible |
Inter (Google Fonts) | Disponible | |
Implementación | Jetpack Compose (GitHub) | Disponible |
Tema
Tema de color
Se genera un tema de color con el generador de temas de Material Design 3.
![Tema de color](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/color.webp?authuser=5&hl=es)
Tipografía
La escala de tipos de JetStream usa el tipo de letra Inter para crear una apariencia simple y clara de las pantallas de TV.
![Tipografía](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/typography.webp?authuser=5&hl=es)
Forma
Se aplica un radio sutil a las tarjetas y los botones para crear bordes amigables y accesibles.
![Forma](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/shape.webp?authuser=5&hl=es)
Enfoque
En JetStream, se usa un contorno de 3 dp con un color de contorno.
![Enfoque](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/focus-theme.webp?authuser=5&hl=es)
Principal
Principal
Página de destino de la app de JetStream.
![Principal](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home.webp?authuser=5&hl=es)
Carrusel destacado
Un carrusel con un diseño en forma de tarjeta.
![Carrusel destacado](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-fc-focused.webp?authuser=5&hl=es)
Fila de contenido
JetStream usa un diseño de tarjeta estándar con una relación de aspecto de 2:3 en un diseño de 5 columnas.
![Fila de contenido](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-trending-focused.webp?authuser=5&hl=es)
Lista envolvente
Destaca el contenido especial en la app con el componente de lista envolvente, como las 10 películas del momento.
![Lista envolvente](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-top-10.webp?authuser=5&hl=es)
Categorías
Categorías
En la página Categorías, se muestran los géneros en formato de cuadrícula para facilitar la navegación y el acceso.
![Categorías](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories.webp?authuser=5&hl=es)
Tarjetas de categorías
![Tarjetas de categorías](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories-action.webp?authuser=5&hl=es)
Detalles de la categoría
Se usa una cuadrícula de tarjetas de 2:3 con un encabezado para crear la página Detalles de la categoría.
![Detalles de la categoría](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories-details.webp?authuser=5&hl=es)
Contenido multimedia
Películas
Una pestaña de películas estándar con tarjetas de contenido destacado de 16:9 en la parte superior y cuadrícula de contenido en la parte inferior
![Películas](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/movies.webp?authuser=5&hl=es)
Programas
![Programas](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/shows.webp?authuser=5&hl=es)
Biblioteca
Favoritos
En la pestaña Favoritos, se incluyen chips de filtro en la parte superior de la pantalla para permitir la búsqueda rápida de contenido.
![Favoritos](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/favorities.webp?authuser=5&hl=es)
Buscar
Destino de la búsqueda
Una página de búsqueda incluye una barra con búsquedas sugeridas basadas en búsquedas recientes.
![Destino de la búsqueda](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/search-default.webp?authuser=5&hl=es)
Búsqueda activa
Cuando el usuario se enfoque en la barra de búsqueda, aparece el teclado y los resultados que se muestran a continuación se actualizan de forma dinámica a medida que el usuario escribe.
![Búsqueda activa](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/search-active.webp?authuser=5&hl=es)
Detalles de la entidad
Detalles de la página de destino
La página de detalles presenta una vista cinemática con un breve resumen de la trama y un botón de llamado a la acción destacado para mirar la película.
![Detalles de la página de destino](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/details.webp?authuser=5&hl=es)
Reparto y equipo
La sección Cast and Crew incluye una fila de tarjetas clásicas con títulos y descripciones, cada una acompañada de un recurso de imagen de 2:3.
![Reparto y equipo](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/cast-crew.webp?authuser=5&hl=es)
Calificaciones
La sección de calificaciones incluye una tarjeta ancha y clásica personalizada que incluye información adicional.
![Calificaciones](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/ratings.webp?authuser=5&hl=es)
Reproducción
Reproductor de video
Un reproductor de video estándar con prácticas recomendadas.
![Reproductor de video](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/player.webp?authuser=5&hl=es)
Configuración del reproductor de video
Una ventana emergente de subtítulos en el reproductor de video
![Configuración del reproductor de video](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/player-closed-captions.webp?authuser=5&hl=es)
Configuración
Configuración de la cuenta
El diseño de la página Cuentas presenta un diseño de dos columnas con un componente de lista a la izquierda y componentes de tarjetas personalizadas a la derecha, organizados en formato de cuadrícula.
![Configuración de la cuenta](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-account.webp?authuser=5&hl=es)
Diálogo para borrar la cuenta
El cuadro de diálogo está diseñado con un fondo que contrasta para que se destaque del resto de la pantalla. Los dos botones del diálogo están alineados a la izquierda para ofrecer una apariencia prolija y organizada.
![Diálogo Borrar cuenta](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-delete-account.webp?authuser=5&hl=es)
Acerca de
La sección Acerca de cuenta con un panel derecho con una vista de texto desplazable.
![Información](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-about.webp?authuser=5&hl=es)
Configuración de subtítulos
Un componente de lista se usa para mostrar varias opciones de configuración bajo subtítulos y utiliza acciones como un interruptor o una etiqueta.
![Configuración de subtítulos](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-subtitles.webp?authuser=5&hl=es)
Historia
El historial de búsqueda tiene un diseño que muestra una lista de búsquedas anteriores, junto con una opción para borrar todo el historial de búsqueda.
![Historial](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-history.webp?authuser=5&hl=es)
Ayuda
La sección Ayuda y asistencia utiliza un componente de lista personalizada para mostrar varias opciones, incluida la información de contacto y las Preguntas frecuentes.
![Ayuda](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-help.webp?authuser=5&hl=es)