The cast button opens a dialog to connect, control and disconnect from Cast receivers.
See Cast icons to download the Cast button templates.
Note that the Cast button is not specific to Google Cast; it can be used to represent both Cast and non-Cast receivers (e.g. bluetooth headsets). Cast receivers should always appear under the Cast dialog, and never under another dialog, menu, or control.
Introduce Cast to users
Introducing the cast button helps existing users know that the sender app now supports Casting and also helps users new to Google Cast.
Required
A Show a Cast introduction screen the first time Cast
receivers are available
B Visually highlight the cast button (e.g. circle the button)
C Explain how the cast button works (e.g. "Touch to cast
videos to your TV")
Android
Cast introduction
Cast home screen
iOS
Cast introduction
Cast home screen
Chrome
Cast introduction
Cast home screen
Cast button availability
Required
A When Cast receivers are available, the cast button must
be visible from every screen in the sender app and located in a consistent position while browsing
or playing content. It will also appear in Chrome's header for global control.
B In mobile apps, the cast button should be on the right
side of the header.
C In Chrome, the cast button should be on the right side in
the content media controls (e.g. embedded video). If the media controls contain a fullscreen button,
place the Cast button to the left of it.
Notes
- Google Cast employs a multi-tasking model, which allows users to browse the sender app and other apps while casting. The Cast button must be visible from every screen of the sender app, so the user doesn’t have to hunt to find where to pause or stop the content playing on TV.
- In Chrome, the Cast button will automatically appear in Chrome's header if the user has the Cast extension installed.
Android
Sender disconnected
Cast home screen
iOS
Sender disconnected
Cast home screen
Chrome
Sender disconnected
Cast home screen
Cast button states
Required
A Unavailable: While Cast receivers are not available, the
Cast button does not appear
B Disconnected: While Cast receivers are available, the
Cast button appears
C Connecting: While the Cast receiver is connecting, the
Cast button animates the waves in the icon progressively (for details, see note below)
D Connected: While this app is connected to the Cast
receiver, its Cast button appears with a filled frame shape
Best practices
For each of the button states, use colors that match the style of other UI
elements of your app.
Notes
The Cast icon displays in Chrome to provide access to the Cast extension regardless of the
availability of Cast devices.
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 receiver app launches.
The ON / Connected state of the Cast icon has been updated and now uses a solid fill within the
icon frame. Using a distinct highlight color for the ON / Connected state is now optional
(e.g. yellow). The new cast icon and icon templates are available
here.
Android
Sender, Cast unavailable
Cast home screen
Sender, Cast disconnected
Cast home screen
Sender, Cast connecting
Cast home screen
Sender, Cast connected
Receiver app loading
Sender, Cast connected
Receiver app loaded / idle
iOS
Sender, Cast unavailable
Cast home screen
Sender, Cast disconnected
Cast home screen
Sender, Cast connecting
Cast home screen
Sender, Cast connected
Receiver app loading
Sender, Cast connected
Receiver app loaded / idle
Chrome
Sender, Cast unavailable
The Cast icon displays in Chrome to provide access to the Cast extension regardless of the connection state.
Cast home screen
Sender, Cast disconnected
Cast home screen
Sender, Cast connecting
Cast home screen
Sender, Cast connected
Receiver app loading
Sender, Cast connected
Receiver app loaded / idle
Images used in this guide are courtesy of the Blender Foundation, shared under copyright or Creative Commons license.
- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
- Sintel: (c) copyright Blender Foundation | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org