Cast Dialog

The Cast dialog is shown whenever the Cast button is pressed. The Cast dialog lets users connect to, control, and disconnect from Cast receivers.

For Android apps, use the MediaRouter component from the MediaRouter Support Library to implement the Cast dialog. It has all of the UX requirements built right in.

If you're developing a custom implementation or building an app for iOS or Chrome, you must implement this dialog in a consistent way, so that users recognize and trust it to function consistently across devices, apps and platforms. Refer to the Reference apps for examples.

For information about how the Cast dialog UI adapts to each state, see:

  Cast dialog, 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 dialog
  B   The Cast dialog title, "Cast to" appears
  C   The Cast dialog shows a list of available Cast receivers
  D   Each receiver currently casting should display, "Casting app name"

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) and using the same account, 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 dialog, not connected

Cast home screen

iOS

Cast dialog, not connected

Cast home screen

Chrome

Cast dialog, not connected

Cast home screen

 

  Cast dialog, connected but not casting

Required
  A   When the sender app is connected to a Cast receiver, tapping the Cast button shows the Cast dialog
  B   The Cast dialog title "Receiver-Name" appears
  C   The Cast dialog shows a button to stop casting with button label "STOP CASTING" (for more information about disconnecting, see Sender stops cast)

Best practices

  • For Android apps, use the MediaRouter component from the MediaRouter Support Library to implement the Cast dialog. It has all of the UX requirements built right in.
  • Providing a call-to-action (e.g. "Ready to cast videos from this app") within the Cast dialog when connected but not casting, is a great way to teach or remind users about the Cast dialog.

Android

Cast dialog, connected but not casting

Receiver app loaded / idle

iOS

Cast dialog, connected but not casting

Receiver app loaded / idle

 

  Cast dialog, while casting

Required
  A   The Cast dialog title "Receiver-Name" appears
  B   The receiver or content currently casting is shown below the title
  C   The Cast dialog shows a button to stop casting with button label "STOP CASTING" (for more information see Sender stops cast)

Best practices

  • For Android apps, use the MediaRouter component from the MediaRouter Support Library to implement the Cast dialog. It has all of the UX requirements built right in.
  • The Cast dialog is a summary of what's casting. Show what's casting with a device name, content title or 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 dialog.

Android

Cast dialog, while casting

Receiver playing content

iOS

Cast dialog, while casting

Receiver playing content

Chrome

Cast dialog, while casting

Receiver playing content

 

 

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