Tombol Transmisi
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Tombol Cast membuka dialog untuk menghubungkan, mengontrol, dan memutuskan sambungan dari Penerima Web.
Lihat Ikon Cast untuk mendownload template tombol Cast.
Perhatikan bahwa tombol Cast tidak khusus untuk Google Cast; tombol ini dapat digunakan untuk merepresentasikan Penerima Web dan non-Web (seperti headset Bluetooth). Penerima Web harus selalu muncul di dialog Cast, dan tidak pernah muncul di dialog, menu, atau kontrol lain.
Memperkenalkan tombol Cast membantu pengguna lama mengetahui bahwa aplikasi pengirim kini mendukung Transmisi
dan juga membantu pengguna baru Google Cast.
Wajib diisi
A Tampilkan layar pengantar Transmisi untuk pertama kalinya
Penerima Web tersedia. Untuk pengirim iOS, tampilkan layar pengantar Cast saat tombol Cast muncul untuk pertama kalinya.
B Soroti tombol Cast secara visual dengan melingkari
tombol)
C Jelaskan cara kerja tombol Cast (misalnya,
menampilkan pesan seperti "Sentuh untuk mentransmisikan video ke TV")
Android
Pengantar Cast
Mentransmisikan layar utama
iOS
Pengantar Cast
Mentransmisikan layar utama
Chrome
Pengantar Cast
Mentransmisikan layar utama
Wajib
A Tombol Cast harus
terlihat dari setiap layar yang berisi konten yang dapat diputar, dan berada di posisi yang konsisten
saat menjelajahi atau memutar konten. Fitur ini juga akan muncul di header Chrome untuk kontrol global.
B Di Chrome, tombol Cast dapat disembunyikan
saat Penerima Web tidak tersedia. Untuk pengirim Android dan iOS,
tombol Cast harus selalu ditampilkan saat perangkat terhubung ke Wi-Fi, sehingga bantuan yang tepat dapat diberikan
jika pengguna telah menonaktifkan akses jaringan lokal dan perangkat tidak dapat ditemukan sebagai akibatnya
(lihat Izin dan Penemuan iOS
untuk mengetahui detail selengkapnya).
C Di aplikasi seluler, tombol Cast harus berada di sisi
kanan.
D Di Chrome, tombol Cast akan berada di sisi kanan di
kontrol media konten (misalnya, lihat video sematan). Jika kontrol media berisi tombol layar penuh, letakkan tombol Cast di sebelah kirinya.
Catatan
Google Cast menggunakan model multi-tasking, yang memungkinkan pengguna menjelajahi aplikasi pengirim dan
aplikasi lain saat melakukan transmisi. Tombol Cast harus terlihat dari setiap layar yang menampilkan konten yang dapat diputar, sehingga pengguna tidak perlu mencari-cari tempat untuk menjeda atau menghentikan konten yang diputar di TV.
Android
Koneksi pengirim terputus
Mentransmisikan layar utama
iOS
Koneksi pengirim terputus
Mentransmisikan layar utama
Chrome
Koneksi pengirim terputus
Mentransmisikan layar utama
Wajib
A Terputus: Jika Penerima Web tersedia, tombol
Transmisi akan muncul
B Menghubungkan: Saat Penerima Web terhubung, tombol
Transmisi akan menganimasikan gelombang dalam ikon secara progresif (untuk mengetahui detailnya, lihat catatan di bawah)
C Terhubung: Jika aplikasi ini terhubung ke Penerima Web
Transmisi, tombol Transmisinya akan muncul dengan bentuk bingkai yang terisi
Praktik terbaik
Untuk setiap status tombol, gunakan warna yang cocok dengan gaya elemen UI
lainnya di aplikasi Anda. Penggunaan warna sorotan yang berbeda (seperti kuning) untuk status AKTIF / Terhubung
bersifat opsional.
Catatan
- Ikon Cast ditampilkan di Chrome, Android, dan iOS untuk memberikan akses ke ekstensi Cast
terlepas dari ketersediaan perangkat Cast.
- Status Menghubungkan (beranimasi) muncul saat koneksi ke Cast API membutuhkan waktu lebih lama dari yang diharapkan (Android dan Chrome SDK akan otomatis menganimasikan ikon Cast). Setelah terhubung,
aplikasi Penerima Web akan diluncurkan.
- Status AKTIF / Terhubung dari ikon Cast telah diperbarui dan kini menggunakan pengisian solid dalam
frame ikon. Ikon Cast baru dan template ikon tersedia
di sini.
Android
Pengirim, Transmisi terputus
Mentransmisikan layar utama
Pengirim, Cast sedang dihubungkan
Mentransmisikan layar utama
Pengirim, Cast terhubung
Pemuatan aplikasi Penerima Web
Pengirim, Cast terhubung
Aplikasi Penerima Web dimuat / tidak aktif
iOS
Pengirim, Cast tidak tersedia
Mentransmisikan layar utama
Pengirim, Transmisi terputus
Mentransmisikan layar utama
Pengirim, Cast sedang dihubungkan
Mentransmisikan layar utama
Pengirim, Cast terhubung
Pemuatan aplikasi Penerima Web
Pengirim, Cast terhubung
Aplikasi Penerima Web dimuat / tidak aktif
Chrome
Pengirim, Cast tidak tersedia
Ikon Cast ditampilkan di Chrome untuk memberikan akses ke ekstensi Cast
terlepas dari status koneksi.
Mentransmisikan layar utama
Pengirim, Transmisi terputus
Mentransmisikan layar utama
Pengirim, Cast sedang dihubungkan
Mentransmisikan layar utama
Pengirim, Cast terhubung
Pemuatan aplikasi Penerima Web
Pengirim, Cast terhubung
Aplikasi Penerima Web dimuat / tidak aktif
Gambar yang digunakan dalam panduan desain ini
adalah milik Blender Foundation, yang dibagikan berdasarkan lisensi hak cipta atau Creative Commons.
- Elephant's Dream: (c) hak cipta 2006, Blender Foundation / Netherlands Media Art Institute /
www.elephantsdream.org
- Sintel: (c) hak cipta Blender Foundation | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) hak cipta 2008, Blender Foundation / www.bigbuckbunny.org
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-26 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-26 UTC."],[[["\u003cp\u003eThe Cast button, used for connecting to Web Receivers and other devices, should be visible on every screen with playable content.\u003c/p\u003e\n"],["\u003cp\u003eUsers should be introduced to the Cast button's functionality with a highlight and explanatory message, especially on first use.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button has distinct visual states (Disconnected, Connecting, Connected) to indicate the connection status.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button should be consistently positioned, typically on the right side of the UI in mobile apps and Chrome's content media controls.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast allows for multitasking, enabling users to browse other apps while casting content.\u003c/p\u003e\n"]]],["The Cast button facilitates connections to Web Receivers, allowing users to control and disconnect. It should be consistently visible on all screens with playable content, positioned on the right in mobile apps and to the left of the fullscreen button in Chrome media controls. The button has distinct states: disconnected, connecting (animated), and connected (filled frame). Users should receive an introduction to the Cast feature, including visual highlights and explanatory messages.\n"],null,["# Cast Button\n\nThe Cast button opens a dialog to connect, control, and disconnect from Web Receivers.\n\nSee [Cast icons](/cast/docs/get-started#download_cast_icons_optional) to download the Cast button templates.\n\nNote that the Cast button is not specific to Google Cast; it can be used to represent both Web\nand non-Web Receivers (like Bluetooth headsets). Web Receivers should always appear under the\nCast dialog, and never under another dialog, menu, or control.\n\n### [Introduce Cast to users](#prompting)\n\nIntroducing the Cast button helps existing users know that the sender app now supports Casting\nand also helps users new to Google Cast.\n\n\n**Required**\n\n\nA Show a Cast introduction screen the first time\nWeb Receivers are available. For iOS senders, show a Cast introduction\nscreen the first time the Cast button appears.\n\n\nB Visually highlight the Cast button by circling the\nbutton)\n\n\nC Explain how the Cast button works (for example,\ndisplaying a message such as \"Touch to cast videos to your TV\") \n\n### Android\n\nCast introduction \nCast home screen \n\n### iOS\n\nCast introduction \nCast home screen \n\n### Chrome\n\nCast introduction \nCast home screen \n\n### [Cast button availability](#sender-cast-icon-available)\n\n\n**Required**\n\n\nA The Cast button must\nbe visible from every screen where there is playable content, and located in a consistent position\nwhile browsing or playing content. It will also appear in Chrome's header for global control.\n\n\nB In Chrome, the Cast button can be hidden\nwhen Web Receivers aren't available. For Android and iOS senders,\nthe Cast button should always display when the device is on Wi-Fi, so proper help can be given\nif the user has turned off local network access and devices become undiscoverable as a result\n(see [iOS Permissions and Discovery](/cast/docs/ios_sender/permissions_and_discovery)\nfor more details).\n\n\nC In mobile apps, the Cast button should be on the right\nside.\n\n\nD In Chrome, the Cast button should be on the right side in\nthe content media controls (for example, see embedded video). If the media controls contain a fullscreen\nbutton, place the Cast button to the left of it.\n\n**Note**\n\nGoogle Cast employs a multi-tasking model, which allows users to browse the sender app and\nother apps while casting. The Cast button must be visible from every screen where there is\nplayable content, so the user doesn't have to hunt to find where to pause or stop the content\nplaying on TV. \n\n### Android\n\nSender disconnected \nCast home screen \n\n### iOS\n\nSender disconnected \nCast home screen \n\n### Chrome\n\nSender disconnected \nCast home screen \n\n### [Cast button states](#sender-cast-icon-states)\n\n\n**Required**\n\n\nA Disconnected: When Web Receivers are available, the\nCast button appears\n\n\nB Connecting: When the Web Receiver is connecting, the\nCast button animates the waves in the icon progressively (for details, see note below)\n\n\nC Connected: When this app is connected to the Cast\nWeb Receiver, its Cast button appears with a filled frame shape\n\n\n**Best practices**\n\n\nFor each of the button states, use colors that match the style of other UI\nelements of your app. Using a distinct highlight color (such as yellow) for the ON / Connected\nstate is optional.\n\n\n**Notes**\n\n- The Cast icon displays on Chrome, Android, and iOS to provide access to the Cast extension regardless of the availability of Cast devices.\n- The Connecting (animated) state appears when the connection to the Cast API takes longer than expected (the Android and Chrome SDK's will automatically animate the Cast icon). Once connected, the Web Receiver app launches.\n- The ON / Connected state of the Cast icon has been updated and now uses a solid fill within the icon frame. The new Cast icon and icon templates are available [here](/cast/docs/get-started#download_cast_icons_optional).\n\n\u003cbr /\u003e\n\n### Android\n\nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### iOS\n\nSender, Cast unavailable \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### Chrome\n\nSender, Cast unavailable\n\nThe Cast icon displays in Chrome to provide access to the Cast extension regardless of the connection state. \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n**Images used in this design guide**\nare courtesy of the Blender Foundation, shared under copyright or Creative Commons license.\n\n- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org\n- Sintel: (c) copyright Blender Foundation \\| www.sintel.org\n- Tears of Steel: (CC) Blender Foundation \\| mango.blender.org\n- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org"]]
