Tận hưởng khả năng truy cập liền mạch vào các bộ phim, chương trình truyền hình, âm nhạc và nhiều nội dung khác mà bạn yêu thích trên màn hình lớn, bất cứ lúc nào tại nhà.
Tài nguyên
Loại | Đường liên kết | Trạng thái |
---|---|---|
Thiết kế | Nguồn thiết kế (Figma) | Có |
Inter (Google Fonts) | Có | |
Triển khai | Jetpack Compose (GitHub) | Có |
Giao diện
Giao diện màu
Giao diện màu được tạo bằng trình tạo giao diện Material Design 3.
![Chủ đề màu](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/color.webp?authuser=5&hl=vi)
Kiểu chữ
Kiểu chữ của JetStream sử dụng kiểu chữ Inter để tạo ra một giao diện đơn giản và rõ ràng cho màn hình TV.
![Kiểu chữ](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/typography.webp?authuser=5&hl=vi)
Hình dạng
Bán kính tinh tế được áp dụng cho thẻ và nút để tạo ra các cạnh thân thiện và dễ tiếp cận.
![Hình dạng](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/shape.webp?authuser=5&hl=vi)
Tiêu điểm
Đường viền 3dp với màu đường viền được sử dụng trong JetStream.
![Trọng tâm](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/focus-theme.webp?authuser=5&hl=vi)
Màn hình chính
Trang chủ
Trang đích của ứng dụng JetStream.
![Màn hình chính](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home.webp?authuser=5&hl=vi)
Băng chuyền nổi bật
Một băng chuyền có bố cục kiểu thẻ.
![Băng chuyền nổi bật](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home-fc-focused.webp?authuser=5&hl=vi)
Hàng nội dung
JetStream sử dụng kiểu thẻ tiêu chuẩn với tỷ lệ khung hình 2:3 trong bố cục 5 cột.
![Hàng nội dung](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home-trending-focused.webp?authuser=5&hl=vi)
Danh sách sống động
Làm nổi bật nội dung đặc biệt trong ứng dụng bằng thành phần Danh sách sống động (chẳng hạn như 10 bộ phim thịnh hành nhất).
![Danh sách sống động](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home-top-10.webp?authuser=5&hl=vi)
Danh mục
Danh mục
Trang Danh mục hiển thị các thể loại ở định dạng lưới để dễ dàng điều hướng và truy cập.
![Danh mục](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/categories.webp?authuser=5&hl=vi)
Thẻ danh mục
![Thẻ danh mục](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/categories-action.webp?authuser=5&hl=vi)
Chi tiết danh mục
Một lưới thẻ 2:3 có tiêu đề được dùng để tạo trang Thông tin chi tiết về danh mục.
![Chi tiết danh mục](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/categories-details.webp?authuser=5&hl=vi)
Nội dung nghe nhìn
Phim
Một thẻ phim tiêu chuẩn có các thẻ nổi bật tỷ lệ 16:9 ở trên cùng và lưới nội dung ở dưới cùng.
![Phim](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/movies.webp?authuser=5&hl=vi)
Chương trình
![Chương trình](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/shows.webp?authuser=5&hl=vi)
Thư viện
Mục yêu thích
Thẻ Yêu thích bao gồm các khối bộ lọc ở đầu màn hình để giúp bạn tìm nhanh nội dung.
![Mục Yêu thích](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/favorities.webp?authuser=5&hl=vi)
Tìm kiếm
Trang đích tìm kiếm
Trang tìm kiếm có thanh tìm kiếm với các cụm từ tìm kiếm đề xuất dựa trên nội dung tìm kiếm gần đây.
![Trang đích tìm kiếm](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/search-default.webp?authuser=5&hl=vi)
Tìm kiếm đang hoạt động
Khi người dùng tập trung vào thanh tìm kiếm, bàn phím sẽ bật lên và các kết quả bên dưới sẽ tự động cập nhật khi người dùng nhập.
![Tìm kiếm đang hoạt động](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/search-active.webp?authuser=5&hl=vi)
Thông tin về thực thể
Trang đích chi tiết
Trang chi tiết hiển thị chế độ xem điện ảnh với tóm tắt cốt truyện ngắn gọn và nút kêu gọi hành động nổi bật để người dùng xem phim.
![Trang đích chi tiết](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/details.webp?authuser=5&hl=vi)
Diễn viên và đội ngũ thực hiện
Phần Diễn viên và Phi hành đoàn có một hàng thẻ cổ điển, có tiêu đề và nội dung mô tả, mỗi thẻ đi kèm một thành phần hình ảnh có tỷ lệ khung hình 2:3.
![Diễn viên và đoàn phim](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/cast-crew.webp?authuser=5&hl=vi)
Điểm xếp hạng
Phần điểm xếp hạng có một thẻ rộng tuỳ chỉnh và kiểu cũ có thông tin bổ sung.
![Điểm xếp hạng](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/ratings.webp?authuser=5&hl=vi)
Phát
Trình phát video
Một trình phát video chuẩn có các phương pháp hay nhất.
![Trình phát video](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/player.webp?authuser=5&hl=vi)
Cài đặt trình phát video
Cửa sổ bật lên phụ đề gần trên trình phát video.
![Cài đặt trình phát video](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/player-closed-captions.webp?authuser=5&hl=vi)
Cài đặt
Cài đặt tài khoản
Bố cục trang tài khoản có thiết kế 2 cột, trong đó có một thành phần danh sách ở bên trái và thành phần thẻ tuỳ chỉnh ở bên phải, được sắp xếp theo định dạng lưới.
![Cài đặt tài khoản](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-account.webp?authuser=5&hl=vi)
Hộp thoại xoá tài khoản
Hộp thoại được thiết kế với nền tương phản để làm nổi bật hộp thoại so với phần còn lại của màn hình. Hai nút trong hộp thoại được căn chỉnh sang trái để mang lại giao diện gọn gàng và ngăn nắp.
![Hộp thoại xoá tài khoản](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-delete-account.webp?authuser=5&hl=vi)
Giới thiệu
Phần Giới thiệu có bảng điều khiển bên phải với chế độ xem văn bản có thể cuộn.
![Giới thiệu](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-about.webp?authuser=5&hl=vi)
Cài đặt phụ đề
Thành phần danh sách được dùng để hiển thị nhiều chế độ cài đặt trong tiêu đề phụ và sử dụng các thao tác như nút chuyển hoặc nhãn.
![Cài đặt phụ đề](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-subtitles.webp?authuser=5&hl=vi)
Nhật ký
Nhật ký tìm kiếm sử dụng một bố cục hiển thị danh sách các cụm từ tìm kiếm trước đây cùng với tuỳ chọn xoá toàn bộ nhật ký tìm kiếm.
![Nhật ký](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-history.webp?authuser=5&hl=vi)
Trợ giúp
Phần Trợ giúp và hỗ trợ sử dụng thành phần danh sách tuỳ chỉnh để cho thấy nhiều lựa chọn, trong đó có thông tin liên hệ và Câu hỏi thường gặp.
![Trợ giúp](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-help.webp?authuser=5&hl=vi)