Google Cast

Google Cast Design Checklist

The design checklist below is provided to make the Cast user experience simple and predictable across all platforms.

Early research and experience with Google Cast has led to the development of this checklist. Following these guidelines when designing your app will ensure the best Cast experience for your users.

Cast basics

  •   Cast sequence

  •   Chromecast home screen

  •   Cast terminology


Cast button

✔   Cast button availability

✔   Cast button states


Cast menu

✔   Cast menu, not connected (receivers available)

✔   Cast menu, connected but not casting

✔   Cast menu, while casting


Sender app

✔   Introduce Cast to users

✔   Sender expanded controls

✔   Sender persistent controls

✔   Sender notification

✔   Sender lock screen

✔   Sender resumes cast

✔   Sender stops cast


Receiver app

✔   Receiver UI

✔   Receiver app idle

✔   Receiver app loading

✔   Receiver content loading

✔   Receiver playback

✔   Receiver paused

✔   Receiver buffering

✔   Receiver stops cast


Changelog

  •   March 21, 2014: Updated cast icon

  •   March 10, 2014: Introducing Cast

  •   March 7, 2014: Broad refinements

Cast basics

Before a Cast session can begin, both the sender device (e.g. Mobile phone) and the receiver device (e.g. Chromecast plugged into a TV) must be connected to the same Wi-Fi network.

Cast sequence

There are two ways users can start a Cast session:
  1.   Connect & play: Connect to a Cast receiver before playing content
  2.   Play & connect: Connect to a Cast receiver while playing content

1. Connect & play

Android

Tap the cast button

Receiver home screen

Select a receiver

Receiver app loading

Play the content

Receiver playing content

iOS

Tap the cast button

Receiver home screen

Select a receiver

Receiver app loading

Play the content

Receiver playing content

Chrome

Tap the cast button

Receiver home screen

Select a receiver

Receiver app loading

Play the content

Receiver playing content

 

2. Play & connect

Android

Play the content

Receiver home screen

Tap the cast button

Receiver home screen

Select a receiver

Receiver playing content

iOS

Play the content

Receiver home screen

Tap the cast button

Receiver home screen

Select a receiver

Receiver playing content

Chrome

Play the content

Receiver home screen

Tap the cast button

Receiver home screen

Select a receiver

Receiver playing content

 

Chromecast home screen

On Chromecast, a home screen with photos, time and device status appear when no sender devices are connected. When Cast receiver apps stop running, the home screen is shown.

For more info about how receiver apps stop running, see:

Android

Sender disconnected

Receiver home screen

iOS

Sender disconnected

Receiver home screen

Chrome

Sender disconnected

Receiver home screen

 

Chromecast terminology

Cast / Casting
The word cast or casting (not capitalized) describes the act of displaying all forms of media (e.g. video) dynamically on a Google Cast Ready receiver (e.g. Chromecast).
The word Cast (when capitalized) references the Google Cast protocol.

Sender app / device (e.g. YouTube app on mobile)
The sender initiates connecting to and / or casting (sending a content link) to a Google Cast Ready receiver (a.k.a Cast receiver) on the same Wi-Fi network.

Receiver app / device (e.g. YouTube app on Chromecast)
The Google Cast Ready receiver (a.k.a Cast receiver) connects to and / or displays content and commands from the sender on the same Wi-Fi network.

Cast states

  • Unavailable: No Cast receivers are available
  • Disconnected: Cast receivers are available
  • Connecting: Cast receiver is connecting
  • Connected: Cast receiver is connected

Cast button

The cast button invokes a menu to connect, control and disconnect from Cast receivers.

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 menu, and never under another menu.

✔   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

Receiver home screen

iOS

Cast introduction

Receiver home screen

Chrome

Cast introduction

Receiver 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

Receiver home screen

iOS

Sender disconnected

Receiver home screen

Chrome

Sender disconnected

Receiver 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
  D   Connected: While the Cast receiver is connected, the cast button appears with a filled frame shape

Best practices
For each of the button states, use colors that match the style / functionality of other UI elements of your app.

Notes
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 on the downloads page.

Android

Sender, Cast unavailable

Receiver home screen

Sender, Cast disconnected

Receiver home screen

Sender, Cast connecting

Receiver app loading

Sender, Cast connected

Receiver app loaded / idle

iOS

Sender, Cast unavailable

Receiver home screen

Sender, Cast disconnected

Receiver home screen

Sender, Cast connecting

Receiver app loading

Sender, Cast connected

Receiver app loaded / idle

Chrome

Sender, Cast unavailable

Receiver home screen

Sender, Cast disconnected

Receiver home screen

Sender, Cast connecting

Receiver app loading

Sender, Cast connected

Receiver app loaded / idle

 

Cast menu

The devices menu is shown whenever the cast button is pressed. The cast menu lets users connect, control and disconnect from Cast receivers. Apps must implement this menu in a consistent way, so that users recognize and trust it to function consistently across devices, apps and platforms.

For info about how the cast menu UI adapts to each state, see:

✔   Cast menu, not connected (receivers available)

Required (default behavior of Android MediaRouter):
  A   When the sender app is not connected to a Cast receiver, tapping the cast button shows the cast menu
  B   The cast menu title "Connect to device" is to the right of the cast icon
  C   The cast menu shows a list of available Cast receivers
  D   Each receiver in the list shows a state below its name. The receiver state is the device model when idle (e.g. Chromecast) and a status when connected (e.g. "Casting YouTube").

Note the multi-user scenarios:

  • When another user connects to a receiver currently casting (e.g. "Office - Casting YouTube") from the same app (e.g. YouTube), the sender app provides controls for the content being cast.
  • When another user connects to a receiver currently casting (e.g. "Office - Casting YouTube") from an app that is not casting (e.g. Play Movies), the previous sender app (e.g. YouTube) disconnects and the new sender app connects.

Android

Cast menu, not connected

Receiver home screen

iOS

Cast menu, not connected

Receiver home screen

Chrome

Cast menu, not connected

Receiver home screen

 

✔   Cast menu, connected but not casting

Required
  A   When the sender app is connected to a Cast receiver, tapping the cast button shows the cast menu
  B   The cast menu title "Receiver-Name" is to the right of the cast icon
  C   The cast menu shows a button to disconnect from the receiver (for more info about disconnecting, see: Sender stops cast)

Best practices
Providing a call-to-action (e.g. "Ready to cast videos from this app") within the cast menu when not connected is a great way to teach or remind users about what the cast menu is for.

Android

Cast menu, connected but not casting

Receiver app loaded / idle

iOS

Cast menu, connected but not casting

Receiver app loaded / idle

 

✔   Cast menu, while casting

Required
  A   The cast menu title "Receiver-Name" is to the right of the cast icon
  B   The receiver / content currently casting is shown below the title
  C   Tapping a receiver / content item, closes the cast menu and shows the full controls and info for that content item
  D   An option to disconnect from the receiver is available (for more info about disconnecting, see: Sender stops cast)

Best practices

  • At it's best, the cast menu is a summary of what's casting. Show what's casting with a device name, content title / artwork and basic controls (e.g. Sintel, Casting to Living Room, play / pause).
  • For the best user experience, provide persistent controls in addition to the controls in the cast menu.

Android

Cast menu, while casting

Receiver playing content

iOS

Cast menu, while casting

Receiver playing content

Chrome

Cast menu, while casting

Receiver playing content

 

Sender app

When content is casting / playing on a Cast receiver, the user must always be able to control it from the sender app.

Sender apps should provide Cast controls in these areas:

Android

Cast menu controls

Persistent controls

Notification controls

Lock screen controls

iOS

Cast menu controls

Persistent controls

Notification controls

Lock screen controls

Chrome

Cast menu controls

Persistent controls

 

✔   Sender expanded controls

The sender app must provide expanded controls for the content being cast. These controls could be directly embedded in a content items page or presented as a full screen view of the persistent controls.

Required
  A   Identify content being cast (e.g. show content title / artwork)
  B   Before playback begins, display a loading indicator (e.g. "Loading") and content title / artwork
  C   When content starts, identify the receiver & state (e.g. "Casting to Receiver-Name")
  D   Provide relevant controls (e.g. play / pause, next / prev)
  E   Identify elapsed time and content duration for media streams (e.g. streaming movie)
  F   Hide controls not relevant to casting (e.g. full-screen button)
  G   Do not disconnect or stop the cast when users navigate away from the expanded controls or content item page
  H   Provide an easy way back to the expanded controls when users navigate away
  I   For volume control on mobile devices, use the hardware buttons (not an on screen slider), and display the volume level on the receiver as it changes. Visual volume sliders are not recommended because they can too easily blow out a receivers speakers.

Best practices

  • Provide a playback position slider for media streams (e.g. streaming movie)
  • For volume controls on websites for Chrome, use +/- buttons or add a lag to the volume slider. This is recommended because small / normal volume sliders can too easily blow out the receivers speakers.
  • Display other meaningful content related artwork and metadata (e.g. show music artist photo when playing an album)

Notes
When casting, the sender app controls the audio level sent to the TV, rather than the native TV volume.

Android

Sender content loading

Receiver content loading

Sender content playing

Receiver playing content

iOS

Sender content loading

Receiver content loading

Sender content playing

Receiver playing content

Chrome

Sender content loading

Receiver content loading

Sender content playing

Receiver playing content

 

✔   Sender persistent controls

Persistent controls should appear when the user navigates away from the current content page or expanded controls. Persistent controls provide instant access and a visible reminder for the current cast.

Required
  A   A bar or box that shows what's casting appears near the bottom of the sender app. These controls persist while the user browses other content or sections of the app
  B   The controls work best when they are simple and communicate what is being cast (e.g. show content title / artwork and play / pause)
  C   Available in all screens of the app
  D   Tapping on the content area opens the expanded controls
  E   Provide any other controls relevant to immediate action (e.g. add to favorites)

Best practices
For the best user experience, provide controls in the cast menu in addition to persistant controls.

Android

Sender persistent controls

Receiver content paused

iOS

Sender persistent controls

Receiver content paused

Chrome

Sender persistent controls

Receiver content paused

 

✔   Sender notification

Required (Android only)
  A   Display a notification only when the sender app casting is not currently in view (e.g. notification for Play Movies is shown when casting from Play Movies while browsing YouTube)
  B   Use the cast icon for the notification in the statusbar
  C   Identify which content is casting (e.g. show content title / artwork)
  D   Identify which receiver is casting (e.g. "Casting to Living Room")
  E   Provide basic content controls (e.g. play / pause)
  F   Provide a way to disconnect from the receiver (e.g. "X" button)
  G   Tapping on the app logo, content title / artwork should open the sender apps player controls.

Notes

  • Android only: it is not possible to implement this in iOS.
  • In Android Gingerbread (version 2.3), notifications will only show the app icon and text, not play / pause or "X".
  • See Android Sender Apps for more information.

Android

Sender notification icon

Receiver playing content

Sender notification controls

Receiver playing content

 

✔   Sender lock screen

Required
  A   Identify content casting using content title / artwork
  B   Identify which receiver is casting (e.g. "Casting to Living Room")
  C   Provide playback controls (e.g. play / pause)
  D   Provide access to the volume control via hardware buttons

Required for Android 4.4 KitKat:

  • App icon
  • Artwork (e.g. album cover)
  • Identify in text what content is casting (e.g. "Sintel")
  • Identify which receiver is casting (e.g. "Casting to Office")

Required for Android 4.3 Jelly Bean and earlier:

  • Artwork (e.g. album cover)
  • Identify in text what content is casting (e.g. "Sintel")
  • Identify which receiver is casting (e.g. "Casting to Office")

Notes

  • The lock screen controls are required for Android 4.1 and later versions.
  • Different controls are available for different versions of the Android operating system, and the lock screen can accommodate only text fields. Generally, graphics and iconography more immediately describe the content than text.
  • Volume control hardware buttons should adjust the volume on the sender app when the phone is locked.
  • The control must use the Android RemoteControlClient API where available.

Android

Sender lock screen controls

Receiver playing content

iOS

Sender lock screen controls

Receiver playing content

 

✔   Sender resumes cast

A connected sender app should retain its connected state even after the app is exited and re-started.

Required
  A   The cast button should be in the connected state
  B   If the sender app accidentally gets disconnected (sender device battery dies, sender device Wi-Fi network drops), it should have the Cast session context stored and be able to resume the session from that context when the sender app is restarted.
  C   If the user taps the cast button before the sender reconnects, the list of receiver devices is shown. When the user selects the receiver currently casting, persistent or expanded controls should appear in the sender app.

Notes
The receiver app may also disconnect and stop running, due to a power failure or some other out-of-context interruption. This is treated as an ordinary session end, as described in Sender stops cast.

Android

Selecting the app

Receiver playing content

Cast connection restored

Receiver playing content

iOS

Selecting the app

Receiver playing content

Cast connection restored

Receiver playing content

 

✔   Sender stops cast

Content which is cast to a TV continues playing until either the last connected sender disconnects, or until a sender casts something new.

Required
  A   When the last or only sender is connected to a receiver, tapping Disconnect stops the app running on the receiver, and either continues playing or pauses on the sender device.
  B   When multiple senders are connected to a receiver, pressing Disconnect from one sender app does nothing to the receiver and removes Cast controls and notifications from that sender device. The remaining connected sender device(s) stay connected with cast controls available.
  C   When a sender app disconnects implicitly (e.g. sender device battery dies, sender device Wi-Fi network drops), it does nothing to the receiver, and removes the Cast controls and notifications from the sender device. The sender app should keep track of implicit disconnections and attempt to reconnect to a receiver when the sender app is opened again.

Notes
Depending on the sender apps business model, a second user may or may not be able to end a session by disconnecting her app instance.

  • In one scenario, disconnecting one of many app instances connected to the session may end the session only for that instance; content either continues playing or pauses on the sender device.
  • In another scenario, disconnecting one of many app instances connected to the session ends the session for all instances.

Android

Cast menu, disconnect button

Receiver playing content

iOS

Cast menu, disconnect button

Receiver playing content

Chrome

Cast menu, disconnect button

Receiver playing content

 

Receiver app

The receiver displays content (e.g. music) and reflects it's state to the user (e.g. paused). The receiver must respond immediately to actions in the sender app (e.g. play = continue playing music). For example, when content is paused on the receiver, it displays a pause icon and when the user presses play on the sender app, the receiver starts playing the content and removes the pause icon.

Examples of receiver UI feedback:

  • Volume adjustment
  • Playing
  • Paused
  • Playback position / seeking
  • Buffering
  • Photo transition

✔   Receiver UI

Required
  A   Place most UI elements within the lower 1/4 of the screen to respect the content
  B   Do not present elements as interactive controls (e.g. do not reproduce the sender UI on the receiver UI)

Best practices

  • Use transition (fade), transparency, and nuance to soften the visual effect
  • Consider the fact that users want to see as much of the content as possible. Users will often pause content to examine it, so fade away unnecessary UI when possible (e.g. when paused after a few seconds, all UI except the pause icon fades away).

Android

Sender UI

Receiver UI

iOS

Sender UI

Receiver UI

Chrome

Sender UI

Receiver UI

 

✔   Receiver app idle

An idle screen is displayed on the receiver, when the receiver is connected to a sender but not casting.

Required
  A   Identify which receiver app is loaded (e.g. app logo)

Best practices

  • Use the idle screen to promote content or features from the sender app (e.g. new releases)
  • Change the content every 30-60 seconds to show more and prevent screen burn
  • Disconnect from the receiver app and stop it from running if idle for 5 minutes (or less). When stopped, the receiver home screen appears and will help prevent screen burn.

Android

Cast menu, connected but not casting

Receiver app loaded / idle

iOS

Cast menu, connected but not casting

Receiver app loaded / idle

 

✔   Receiver app loading

When a user connects to a receiver, the receiver app must first load before it can display the app idle state or begin playing content.

Required
  A   Identify which receiver app is loading (e.g. show app logo)
  B   Identify that the receiver app is loading (e.g. animated loading spinner)

Android

Sender connecting

Receiver app loading

iOS

Sender connecting

Receiver app loading

Chrome

Sender connecting

Receiver app loading

 

✔   Receiver content loading

Once the receiver app has loaded, content can begin streaming to the receiver.

Required
  A   Identify what content is being loaded (e.g. content title / artwork)
  B   Identify that content is loading (e.g. animated loading spinner)

Best practices
When resuming paused content, rewind playback 5-10 seconds so the viewer doesn't miss anything during the transition from sender to receiver.

Android

Sender content loading

Receiver content loading

iOS

Sender content loading

Receiver content loading

Chrome

Sender content loading

Receiver content loading

 

✔   Receiver playback

Required
  A   Identify what is playing when content starts (e.g. show content title / artwork for a few seconds when playback starts)
  B   Identify playback position when position is adjusted (e.g. user taps rewind 30 seconds in sender app)
  C   Identify that content is seeking when the playback position is changed and not yet playing (e.g. animated spinner)

Android

Sender adjusting play position

Receiver content seeking

iOS

Sender adjusting play position

Receiver content seeking

Chrome

Sender adjusting play position

Receiver content seeking

 

✔   Receiver paused

Required
  A   Identify that content is paused (e.g. show paused icon and playback position)
  B   Identify what content is paused (e.g. show content title / artwork)
  C   Identify which receiver app is loaded (e.g. app logo)

Best practices

  • Users will often pause content to examine it, so have unnecessary UI fade away when paused for a few seconds (e.g. only show pause icon).
  • Disconnect from the receiver app and stop it from running if idle for 20 minutes (or less). When stopped, the receiver home screen appears and will help prevent screen burn. Store the paused location so that the user can resume playback from that point at a later time.

Android

Sender paused

Receiver content paused

Sender paused

Receiver paused, after 5 seconds

iOS

Sender paused

Receiver content paused

Sender paused

Receiver paused, after 5 seconds

Chrome

Sender paused

Receiver content paused

Sender paused

Receiver paused, after 5 seconds

 

✔   Receiver buffering

Buffering on the receiver happens when network latency or other factors cause a delay in playback.

Required
  A   Identify that the receiver is buffering after a few seconds (e.g. show buffering spinner). Waiting a few seconds to indicate buffering will prevent the buffering spinner from appearing too frequently under bad network conditions.

Best practices
Identify what content is buffering if buffering continues after 5 seconds.

Android

Sender indicates receiver buffering

Receiver content buffering

iOS

Sender indicates receiver buffering

Receiver content buffering

Chrome

Sender indicates receiver buffering

Receiver content buffering

 

✔   Receiver stops cast

When playback stops or times out, the receiver UI should promote other content or features available in the sender app.

Required
  A   Identify which receiver app is loaded / idle (e.g. show app logo)

Best practices

  • Use the idle screen after playback to recommend content or features from the sender app, based on what was just cast (e.g. "Next episode of...")
  • Change the content every 30-60 seconds to show more and prevent screen burn
  • Disconnect from the receiver app and stop it from running if idle for 5 minutes (or less). When stopped, the receiver home screen appears and will help prevent screen burn.

Android

Sender app idle

Receiver app idle

Sender disconnected

Receiver home screen

iOS

Sender app idle

Receiver app idle

Sender disconnected

Receiver home screen

Chrome

Sender app idle

Receiver app idle

Sender disconnected

Receiver home screen

 

Changelog

March 21, 2014: Updated cast icon

  • Cast button states checklist requirements have been updated to reflect the new ON / Connected state of the cast icon

March 10, 2014: Introducing Cast

March 7, 2014: Broad refinements

  • Updated checklist titles
  • More clearly defined "Required" & "Best practices"
  • Added sender / receiver screenshot pairs to all states
  • Added animated gifs for loading & connecting states
  • Added terminology section
  • Updated Chrome guidelines to reflect current requirements
  • More clearly defined requirements for Sender stops cast
  • More clearly defined requiremnts for Sender resumes cast
 

 

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

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.