Profitez d'un accès fluide à vos films, séries TV, titres musicaux et autres contenus préférés sur grand écran, à tout moment chez vous.
Ressources
Type | Lien | État |
---|---|---|
conception | Source de la conception (Figma) | Disponible |
Inter (Google Fonts) | Disponible | |
Implémentation | Jetpack Compose (GitHub) | Disponible |
Thème
Thème de couleur
Un thème de couleur est généré à l'aide du générateur de thèmes Material Design 3.
![Palette de couleurs](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/color.webp?authuser=9&hl=fr)
Typographie
L'échelle de type de JetStream utilise la police Inter pour créer un style simple et clair pour les écrans TV.
![Typographie](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/typography.webp?authuser=9&hl=fr)
Forme
Un rayon subtil est appliqué aux fiches et aux boutons pour créer des bords conviviaux et accessibles.
![Forme](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/shape.webp?authuser=9&hl=fr)
Mise au point
Un contour 3dp avec une couleur de contour est utilisé dans JetStream.
![Objet](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/focus-theme.webp?authuser=9&hl=fr)
Accueil
Maison
Page de destination de l'application JetStream
![Accueil](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home.webp?authuser=9&hl=fr)
Carrousel de promotion de contenus
Carrousel avec une mise en page de type carte.
![Carrousel de sélections](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home-fc-focused.webp?authuser=9&hl=fr)
Ligne de contenu
JetStream utilise un style de carte standard au format 2:3 dans une mise en page à cinq colonnes.
![Ligne de contenu](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home-trending-focused.webp?authuser=9&hl=fr)
Liste immersive
Mettez en avant des contenus spéciaux dans l'application à l'aide du composant de liste immersive, comme le top 10 des films tendance.
![Liste immersive](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home-top-10.webp?authuser=9&hl=fr)
Catégories
Catégories
La page "Catégories" affiche les genres sous forme de grille pour faciliter la navigation et l'accès.
![Catégories](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/categories.webp?authuser=9&hl=fr)
Fiches sur les catégories
![Fiches de catégorie](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/categories-action.webp?authuser=9&hl=fr)
Détails de la catégorie
Une grille de fiches au format 2:3 avec un en-tête est utilisée pour créer la page d'informations sur la catégorie.
![Informations sur la catégorie](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/categories-details.webp?authuser=9&hl=fr)
Contenus multimédias
Films
Onglet "Films" standard avec des fiches mises en avant au format 16:9 en haut et une grille de contenu en bas
![Films](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/movies.webp?authuser=9&hl=fr)
Séries
![Émissions](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/shows.webp?authuser=9&hl=fr)
Bibliothèque
Favoris
L'onglet "Favoris" inclut des chips de filtre en haut de l'écran pour vous permettre de rechercher rapidement des contenus.
![Favoris](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/favorities.webp?authuser=9&hl=fr)
Rechercher
Page de destination sur le Réseau de Recherche
Une page de recherche contient une barre de recherche avec des suggestions de requêtes basées sur les recherches récentes.
![Page de destination sur le Réseau de Recherche](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/search-default.webp?authuser=9&hl=fr)
Recherche active
Lorsque l'utilisateur sélectionne la barre de recherche, le clavier s'affiche, et les résultats ci-dessous sont mis à jour de manière dynamique au fur et à mesure de la saisie.
![Recherche active](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/search-active.webp?authuser=9&hl=fr)
Détails de l'entité
Page de destination "Détails"
La page d'informations présente une vue cinématique avec un bref résumé de l'intrigue et un bouton d'incitation à l'action bien visible pour regarder le film.
![Détails de la page de destination](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/details.webp?authuser=9&hl=fr)
Acteurs et équipe
La section "Caster et équipe de jeu" présente une rangée de fiches classiques avec des titres et des descriptions, chacune étant accompagnée d'une image au format 2:3.
![Distribution et équipe](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/cast-crew.webp?authuser=9&hl=fr)
Notes
La section "Notes" contient une fiche large classique personnalisée qui contient des informations supplémentaires.
![Avis](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/ratings.webp?authuser=9&hl=fr)
Lecture
Lecteur vidéo
Lecteur vidéo standard respectant les bonnes pratiques
![Lecteur vidéo](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/player.webp?authuser=9&hl=fr)
Paramètres du lecteur vidéo
Fenêtre pop-up de sous-titres fermés sur le lecteur vidéo.
![Paramètres du lecteur vidéo](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/player-closed-captions.webp?authuser=9&hl=fr)
Paramètres
Paramètres de compte
La mise en page "Comptes" se présente sous la forme de deux colonnes. L'une d'elles comporte un composant de liste à gauche et une fiche personnalisée à droite, présentée sous forme de grille.
![Paramètres du compte](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-account.webp?authuser=9&hl=fr)
Boîte de dialogue "Supprimer le compte"
La boîte de dialogue est dotée d'un arrière-plan contrasté qui la distingue du reste de l'écran. Les deux boutons de la boîte de dialogue sont alignés à gauche pour un aspect épuré et organisé.
![Boîte de dialogue "Supprimer le compte"](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-delete-account.webp?authuser=9&hl=fr)
À propos
La section "À propos" comprend un panneau de droite avec un affichage de texte déroulant.
![À propos](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-about.webp?authuser=9&hl=fr)
Paramètres des sous-titres
Un composant de liste permet d'afficher différents paramètres sous un sous-titre et utilise des actions telles qu'un bouton bascule ou un libellé.
![Paramètres des sous-titres](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-subtitles.webp?authuser=9&hl=fr)
Historique
L'historique des recherches présente une mise en page qui affiche la liste des requêtes précédemment recherchées, ainsi qu'une option permettant d'effacer tout l'historique des recherches.
![Historique](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-history.webp?authuser=9&hl=fr)
Aide
La section "Aide et assistance" utilise un composant de liste personnalisée pour afficher diverses options, y compris les coordonnées et les questions fréquentes.
![Aide](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-help.webp?authuser=9&hl=fr)