Nikmati akses lancar ke film, acara TV, musik, dan konten favorit Anda lainnya di layar TV, kapan saja di rumah.
Referensi
Jenis | Link | Status |
---|---|---|
Desain | Sumber desain (Figma) | Tersedia |
Inter (Google Fonts) | Tersedia | |
Penerapan | Jetpack Compose (GitHub) | Tersedia |
Tema
Tema warna
Tema warna dibuat menggunakan generator tema
Desain Material 3.
![Tema warna](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/color.webp?authuser=8&hl=id)
Tipografi
Skala tulisan JetStream menggunakan typeface Inter untuk menciptakan tampilan yang sederhana dan jelas untuk layar TV.
![Tipografi](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/typography.webp?authuser=8&hl=id)
Bentuk
Radius halus diterapkan pada kartu dan tombol untuk membuat tepi yang bersahabat dan mudah dijangkau.
![Bentuk](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/shape.webp?authuser=8&hl=id)
Fokus
Garis batas 3 dp dengan warna garis batas digunakan di JetStream.
![Fokus](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/focus-theme.webp?authuser=8&hl=id)
Beranda
Beranda
Halaman landing aplikasi JetStream.
![Beranda](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home.webp?authuser=8&hl=id)
Carousel unggulan
Carousel dengan tata letak bergaya kartu.
![Carousel unggulan](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-fc-focused.webp?authuser=8&hl=id)
Baris konten
JetStream menggunakan gaya kartu standar dengan rasio aspek 2:3 dalam tata letak 5 kolom.
![Baris konten](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-trending-focused.webp?authuser=8&hl=id)
Daftar imersif
Tandai konten khusus dalam aplikasi menggunakan komponen daftar imersif, seperti 10 film trending teratas.
![Daftar imersif](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-top-10.webp?authuser=8&hl=id)
Kategori
Kategori
Halaman Kategori menampilkan genre dalam format petak untuk memudahkan navigasi dan akses.
![Kategori](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories.webp?authuser=8&hl=id)
Kartu kategori
![Kartu kategori](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories-action.webp?authuser=8&hl=id)
Detail kategori
Petak kartu 2:3 dengan header digunakan untuk membuat halaman detail Kategori.
![Detail kategori](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories-details.webp?authuser=8&hl=id)
Media
Film
Tab film standar dengan kartu unggulan berukuran 16:9 di bagian atas dengan petak konten di bagian bawah.
![Film](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/movies.webp?authuser=8&hl=id)
Acara TV
![Acara](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/shows.webp?authuser=8&hl=id)
Koleksi
Favorit
Tab Favorit menyertakan filter chip di bagian atas layar untuk memungkinkan penelusuran konten dengan cepat.
![Favorit](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/favorities.webp?authuser=8&hl=id)
Telusuri
Halaman landing penelusuran
Halaman penelusuran menampilkan kotak penelusuran dengan kueri penelusuran yang disarankan berdasarkan penelusuran terbaru.
![Telusuri halaman landing](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/search-default.webp?authuser=8&hl=id)
Penelusuran aktif
Ketika pengguna berfokus pada kotak penelusuran, keyboard akan muncul, dan hasil di bawah akan diperbarui secara dinamis seiring pengguna mengetik.
![Penelusuran aktif](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/search-active.webp?authuser=8&hl=id)
Detail entitas
Detail landing
Halaman detail menyajikan tampilan sinematik dengan ringkasan plot singkat dan tombol pesan ajakan (CTA) yang terlihat jelas untuk menonton film.
![Halaman landing detail](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/details.webp?authuser=8&hl=id)
Pemeran dan kru
Bagian Cast and Crew menampilkan deretan kartu klasik dengan judul dan deskripsi, masing-masing disertai aset gambar 2:3.
![Pemeran dan kru](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/cast-crew.webp?authuser=8&hl=id)
Rating
Bagian rating menampilkan kartu lebar klasik kustom yang menyertakan informasi tambahan.
![Rating](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/ratings.webp?authuser=8&hl=id)
Pemutaran
Pemutar video
Pemutar video standar dengan praktik terbaik.
![Pemutar video](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/player.webp?authuser=8&hl=id)
Setelan pemutar video
Pop-up teks tertutup pada pemutar video.
![Setelan pemutar video](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/player-closed-captions.webp?authuser=8&hl=id)
Setelan
Setelan akun
Tata letak halaman akun menampilkan desain dua kolom dengan komponen daftar di sebelah kiri dan komponen kartu kustom di sebelah kanan, yang disusun dalam format petak.
![Setelan akun](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-account.webp?authuser=8&hl=id)
Dialog hapus akun
Kotak dialog dirancang dengan latar belakang yang kontras agar terlihat berbeda dari bagian layar lainnya. Dua tombol dalam dialog ini disejajarkan ke kiri untuk tampilan yang bersih dan teratur.
![Dialog hapus akun](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-delete-account.webp?authuser=8&hl=id)
Tentang
Bagian Tentang menampilkan panel sebelah kanan dengan tampilan teks yang dapat di-scroll.
![Tentang](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-about.webp?authuser=8&hl=id)
Setelan subtitel
Komponen daftar digunakan untuk menampilkan berbagai setelan di bawah subtitel, dan menggunakan tindakan seperti tombol atau label.
![Setelan subtitel](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-subtitles.webp?authuser=8&hl=id)
Histori
Histori penelusuran menggunakan tata letak yang menampilkan daftar kueri yang ditelusuri sebelumnya, beserta opsi untuk menghapus semua histori penelusuran.
![Histori](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-history.webp?authuser=8&hl=id)
Bantuan
Bagian Bantuan dan Dukungan menggunakan komponen daftar kustom untuk menampilkan berbagai opsi, termasuk informasi kontak dan FAQ.
![Bantuan](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-help.webp?authuser=8&hl=id)