Aproveite o acesso integrado a seus filmes, programas de TV, músicas favoritos e muito mais na tela grande, a qualquer momento e em casa.
Recursos
Tipo | Vincular | Status |
---|---|---|
design | Fonte de design (Figma) | Disponível |
Inter (Google Fonts) | Disponível | |
Implementação | Jetpack Compose (GitHub) | Disponível |
Tema
Tema de cores
Um tema de cores é gerado usando o gerador de temas
do Material Design 3.
![Tema de cores](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/color.webp?authuser=3&hl=pt-br)
Tipografia
A escala de tipografia do JetStream usa a família tipográfica Inter para criar uma aparência simples e clara para telas de TV.
![Tipografia](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/typography.webp?authuser=3&hl=pt-br)
Forma
Um raio sutil é aplicado aos cards e botões para criar bordas simples e acessíveis.
![Forma](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/shape.webp?authuser=3&hl=pt-br)
Foco
Um contorno de 3 dp com uma cor de contorno é usado no JetStream.
![Foco](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/focus-theme.webp?authuser=3&hl=pt-br)
Início
Início
Página de destino do app JetStream.
![Início](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home.webp?authuser=3&hl=pt-br)
Carrossel em destaque
Um carrossel com layout de cartas.
![Carrossel em destaque](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-fc-focused.webp?authuser=3&hl=pt-br)
Linha de conteúdo
O JetStream usa um estilo de card padrão com proporção de 2:3 em um layout de cinco colunas.
![Linha de conteúdo](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-trending-focused.webp?authuser=3&hl=pt-br)
Lista imersiva
Destaque conteúdo especial no app usando o componente de lista imersiva, como os 10 principais filmes em alta.
![Lista imersiva](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-top-10.webp?authuser=3&hl=pt-br)
Categorias
Categorias
A página "Categorias" mostra os gêneros em um formato de grade para facilitar a navegação e o acesso.
![Categorias](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories.webp?authuser=3&hl=pt-br)
Cards de categoria
![Cards de categoria](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories-action.webp?authuser=3&hl=pt-br)
Detalhes da categoria
Uma grade de cards de 2:3 com um cabeçalho é usada para criar a página "Detalhes da categoria".
![Detalhes da categoria](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories-details.webp?authuser=3&hl=pt-br)
Mídia
Filmes
Uma guia "Filmes" padrão com cards em destaque 16:9 na parte de cima e a grade de conteúdo na parte de baixo.
![Filmes](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/movies.webp?authuser=3&hl=pt-br)
Programas
![Programas](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/shows.webp?authuser=3&hl=pt-br)
Biblioteca
Favoritos
A guia "Favoritos" inclui ícones de filtro na parte de cima da tela para facilitar a pesquisa de conteúdo.
![Favoritos](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/favorities.webp?authuser=3&hl=pt-br)
Pesquisar
Destino da pesquisa
Uma página de pesquisa apresenta uma barra de pesquisa com sugestões de consultas com base em pesquisas recentes.
![Página de destino da pesquisa](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/search-default.webp?authuser=3&hl=pt-br)
Pesquisa ativa
Quando o usuário foca na barra de pesquisa, o teclado aparece, e os resultados abaixo são atualizados dinamicamente conforme o usuário digita.
![Pesquisa ativa](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/search-active.webp?authuser=3&hl=pt-br)
Detalhes da entidade
Detalhes da página de destino
A página de detalhes apresenta uma visão cinematográfica com um breve resumo do enredo e um botão de call-to-action em destaque para assistir ao filme.
![Detalhes da página de destino](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/details.webp?authuser=3&hl=pt-br)
Elenco e equipe
A seção "Elenco e equipe" apresenta uma fileira de cards clássicos com títulos e descrições, cada um acompanhado de um recurso de imagem de 2:3.
![Equipe de filmagem e atores](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/cast-crew.webp?authuser=3&hl=pt-br)
Avaliações
A seção de notas apresenta um card largo clássico personalizado que inclui mais informações.
![Notas](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/ratings.webp?authuser=3&hl=pt-br)
Reprodução
Player de vídeo
Um player de vídeo padrão com práticas recomendadas.
![Player de vídeo](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/player.webp?authuser=3&hl=pt-br)
Configurações do player de vídeo
Um pop-up de legenda descritiva no player de vídeo.
![Configurações do player de vídeo](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/player-closed-captions.webp?authuser=3&hl=pt-br)
Configurações
Configurações da conta
O layout da página de contas apresenta um design de duas colunas com um componente de lista à esquerda e componentes de card personalizados à direita, organizados em formato de grade.
![Configurações da conta](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-account.webp?authuser=3&hl=pt-br)
Caixa de diálogo "Excluir conta"
A caixa de diálogo foi projetada com um plano de fundo contrastante para se destacar do restante da tela. Os dois botões na caixa de diálogo estão alinhados à esquerda para uma aparência limpa e organizada.
![Caixa de diálogo "Excluir conta"](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-delete-account.webp?authuser=3&hl=pt-br)
Sobre
A seção "Sobre" apresenta um painel à direita com uma visualização de texto rolável.
![Sobre](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-about.webp?authuser=3&hl=pt-br)
Configurações de legendas
Um componente de lista é usado para mostrar várias configurações nas legendas e usa ações como uma chave ou um marcador.
![Configurações de legendas](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-subtitles.webp?authuser=3&hl=pt-br)
Histórico
O histórico de pesquisa usa um layout que mostra uma lista de consultas pesquisadas anteriormente, além de uma opção para limpar todo o histórico de pesquisa.
![Histórico](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-history.webp?authuser=3&hl=pt-br)
Ajuda
A seção "Ajuda e suporte" usa um componente de lista personalizado para mostrar várias opções, incluindo dados de contato e perguntas frequentes.
![Ajuda](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-help.webp?authuser=3&hl=pt-br)