The Cast dialog is shown whenever the Cast button is pressed. The Cast dialog lets users connect, control, and disconnect from Web Receivers. > [!NOTE] > **Note:** 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. > [!NOTE] > **Note:** For iOS senders, a special Local Network Access interstitial dialog must be displayed the first time a user attempts to cast. 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](https://developers.google.com/cast/docs/sample_apps.md.txt#reference_apps) for examples. ### [YesCast dialog, not connected (receivers available)](https://developers.google.com/cast/docs/design_checklist/cast-dialog.md.txt#sender-cast-menu-available) **Required** (default behavior of [Android MediaRouter](https://developer.android.com/reference/androidx/mediarouter/media/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 Web 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 from the same app and account, the sender app provides the controls for the cast content. - When another user connects to a receiver currently casting from an app that is not casting, the previous sender app disconnects and the new sender app connects. ### Android Cast dialog, not connected ![Cast dialog, not connected image](https://developers.google.com/static/cast/images/a/sender-cast-menu-available1_a.png) Cast home screen ![Cast home screen image](https://developers.google.com/static/cast/images/r/receiver-home2.png) ### iOS Cast dialog, not connected ![Cast dialog not connected image](https://developers.google.com/static/cast/images/i/sender-cast-menu-available1_a.png) Cast home screen ![Cast home screen image](https://developers.google.com/static/cast/images/r/receiver-home2.png) ### Chrome Cast dialog, not connected ![Cast dialog not connected image](https://developers.google.com/static/cast/images/w/sender-cast-menu-available1_a.jpg) Cast home screen ![Cast home screen image](https://developers.google.com/static/cast/images/r/receiver-home2.png) ### [YesCast dialog, not connected (iOS only)](https://developers.google.com/cast/docs/design_checklist/cast-dialog.md.txt#sender-cast-menu-available) For iOS, when casting for the first time, users must consent to allow local network access (LNA) to Cast devices. An interstitial information screen is presented to users explaining why this permission is needed, followed by the standard Apple LNA permissions dialog. After casting for the first time, if no devices are found when the Cast button is tapped while the user is on Wi-Fi, a help screen is presented explaining why Web Receivers might not be available (for example, local network access is disabled, or there is a problem with the Wi-Fi network). **Required** : A First-time casting: After tapping on the Cast button for the first time, an Interstitial must be shown to explain to the user why they should allow the app to access local network devices. The interstitial should include information on why local network access is needed, to increase the likelihood of the user accepting local permission access. B Receivers unavailable: Tapping the Cast button displays a help screen explaining possible reasons the user is unable to discover Web Receivers, along with links to Settings to fix LNA permissions issues. ### First-time casting (iOS) First-time casting: interstitial and local network access permissions ![Cast local network access acceptance flow](https://developers.google.com/static/cast/images/ios14/iOS14-Enable_LNA_flow1.png) ### Receivers unavailable Receivers unavailable ![Cast flow, local network access turned off](https://developers.google.com/static/cast/images/ios14/iOS14-Enable_LNA_flow2-devicesunavail.png) ### [YesCast dialog, connected but not casting](https://developers.google.com/cast/docs/design_checklist/cast-dialog.md.txt#sender-cast-menu-connected) **Required** A When the sender app is connected to a Web 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](https://developers.google.com/cast/docs/design_checklist/sender.md.txt#sender-control-end)) ### Android Cast dialog, connected but not casting ![](https://developers.google.com/static/cast/images/a/sender-cast-menu-connected1_a.png) Receiver app loaded / idle ![](https://developers.google.com/static/cast/images/r/receiver-ui-idle1.png) ### iOS Cast dialog, connected but not casting ![](https://developers.google.com/static/cast/images/i/sender-cast-menu-connected1_a.png) Receiver app loaded / idle ![](https://developers.google.com/static/cast/images/r/receiver-ui-idle1.png) ### [YesCast dialog, while casting](https://developers.google.com/cast/docs/design_checklist/cast-dialog.md.txt#sender-cast-menu-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 "STOP CASTING" button that stops casting (for more information see [Sender stops cast](https://developers.google.com/cast/docs/design_checklist/sender.md.txt#sender-control-end)) **Best practice** - For the best user experience, provide [persistent controls](https://developers.google.com/cast/docs/design_checklist/sender.md.txt#sender-mini-controller) in addition to the controls in the Cast dialog. ### Android Cast dialog, while casting ![](https://developers.google.com/static/cast/images/a/sender-cast-menu-active1_a.png) Receiver playing content ![](https://developers.google.com/static/cast/images/r/receiver-content-playing1.png) ### iOS Cast dialog, while casting ![](https://developers.google.com/static/cast/images/i/sender-cast-menu-active1_a.png) Receiver playing content ![](https://developers.google.com/static/cast/images/r/receiver-content-playing1.png) ### Chrome Cast dialog, while casting ![Cast dialog, while casting](https://developers.google.com/static/cast/images/w/sender-cast-menu-active1_a.png) Receiver playing content ![](https://developers.google.com/static/cast/images/r/receiver-content-playing1.png) **Images used in this design 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