# Non-Touch Receiver App The receiver plays content and reflects its state to the user. The receiver must respond immediately to actions in the sender app . 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: - Playing - Paused - Playback position / seeking - Buffering ### [YesReceiver UI](https://developers.google.com/cast/docs/design_checklist/receiver#receiver-ui-elements) **Required** A Place most UI elements within the lower 1/4 of the screen and keep it consistent with your other UX's. B Do not present elements as interactive controls. For example, 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. ### Android Sender UI ![](https://developers.google.com/static/cast/images/a/sender-persistent-control2.png) Receiver UI ![](https://developers.google.com/static/cast/images/r/receiver-ui-elements1_a.png) ### iOS Sender UI ![](https://developers.google.com/static/cast/images/i/sender-persistent-control2.png) Receiver UI ![](https://developers.google.com/static/cast/images/r/receiver-ui-elements1_a.png) ### Chrome Sender UI ![Sender UI](https://developers.google.com/static/cast/images/w/sender-persistent-control2.png) Receiver UI ![](https://developers.google.com/static/cast/images/r/receiver-ui-elements1_a.png) ### [YesReceiver app idle](https://developers.google.com/cast/docs/design_checklist/receiver#receiver-ui-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 **Best practices** - Use the idle screen to promote content or features from the sender app. - Change the content every 30-60 seconds to display more and prevent screen burn. - Disconnect from the receiver app and stop it from running if idle for 5 minutes. When stopped, the receiver home screen appears and will help prevent screen burn. ### Android Cast dialog, connected but not casting ![](https://developers.google.com/static/cast/images/a/sender-cast-menu-connected1.png) Receiver app loaded / idle ![](https://developers.google.com/static/cast/images/r/receiver-ui-idle1_a.png) ### iOS Cast dialog, connected but not casting ![](https://developers.google.com/static/cast/images/i/sender-cast-menu-connected1.png) Receiver app loaded / idle ![](https://developers.google.com/static/cast/images/r/receiver-ui-idle1_a.png) ### [YesReceiver app loading](https://developers.google.com/cast/docs/design_checklist/receiver#receiver-player-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 by displaying the app logo B Identify that the receiver app is loading by displaying the animated loading spinner ### Android Sender connecting ![](https://developers.google.com/static/cast/images/a/sender-cast-icon-states4.png) Receiver app loading ![](https://developers.google.com/static/cast/images/r/receiver-player-loading1_a.gif) ### iOS Sender connecting ![](https://developers.google.com/static/cast/images/i/sender-cast-icon-states4.png) Receiver app loading ![](https://developers.google.com/static/cast/images/r/receiver-player-loading1_a.gif) ### Chrome Sender connecting ![Sender connecting](https://developers.google.com/static/cast/images/w/sender-cast-icon-states4.png) Receiver app loading ![](https://developers.google.com/static/cast/images/r/receiver-player-loading1_a.gif) ### [YesReceiver content loading](https://developers.google.com/cast/docs/design_checklist/receiver#receiver-content-loading) Once the receiver app has loaded, content can begin streaming to the receiver. **Required** A Identify what content is being loaded by displaying the content title or artwork B Identify that content is loading by displaying an 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 ![](https://developers.google.com/static/cast/images/a/sender-control-elements1.gif) Receiver content loading ![](https://developers.google.com/static/cast/images/r/receiver-content-loading1_a.gif) ### iOS Sender content loading ![](https://developers.google.com/static/cast/images/i/sender-control-elements1.gif) Receiver content loading ![](https://developers.google.com/static/cast/images/r/receiver-content-loading1_a.gif) ### Chrome Sender content loading ![](https://developers.google.com/static/cast/images/w/sender-control-elements1.gif) Receiver content loading ![](https://developers.google.com/static/cast/images/r/receiver-content-loading1_a.gif) ### [YesReceiver playback](https://developers.google.com/cast/docs/design_checklist/receiver#receiver-ui-seek) **Required** A Identify what is playing when content starts B Identify playback position when position is adjusted C Identify that the receiver is seeking content when the playback position is changed, but not yet playing ### Android Sender adjusting play position ![](https://developers.google.com/static/cast/images/a/sender-control-elements3.gif) Receiver content seeking ![](https://developers.google.com/static/cast/images/r/receiver-ui-seek1_a.gif) ### iOS Sender adjusting play position ![](https://developers.google.com/static/cast/images/i/sender-control-elements3.gif) Receiver content seeking ![](https://developers.google.com/static/cast/images/r/receiver-ui-seek1_a.gif) ### Chrome Sender adjusting play position ![](https://developers.google.com/static/cast/images/w/sender-control-elements3.gif) Receiver content seeking ![](https://developers.google.com/static/cast/images/r/receiver-ui-seek1_a.gif) ### [YesReceiver paused](https://developers.google.com/cast/docs/design_checklist/receiver#receiver-ui-pause) **Required** A Identify that content is paused by displaying a paused icon and playback position B Identify what content is paused by displaying content title or artwork C Identify which receiver app is loaded by displaying an app logo **Best practices** - Users will often pause content to examine it, so have unnecessary UI fade away when paused for a few seconds by displaying a pause icon. - The receiver app should not continue content playback unless there is an explicit request from the user to begin playback such as resume, or skipping an item on the queue. - Disconnect from the receiver app and stop it from running if idle for 20 minutes. 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 ![](https://developers.google.com/static/cast/images/a/sender-persistent-control2.png) Receiver content paused ![](https://developers.google.com/static/cast/images/r/receiver-ui-pause1_a.png) Sender paused ![](https://developers.google.com/static/cast/images/a/sender-persistent-control2.png) Receiver paused, after 5 seconds ![](https://developers.google.com/static/cast/images/r/receiver-ui-pause2.png) ### iOS Sender paused ![](https://developers.google.com/static/cast/images/i/sender-persistent-control2.png) Receiver content paused ![](https://developers.google.com/static/cast/images/r/receiver-ui-pause1_a.png) Sender paused ![](https://developers.google.com/static/cast/images/i/sender-persistent-control2.png) Receiver paused, after 5 seconds ![](https://developers.google.com/static/cast/images/r/receiver-ui-pause2.png) ### Chrome Sender paused ![](https://developers.google.com/static/cast/images/w/sender-persistent-control2.jpg) Receiver content paused ![](https://developers.google.com/static/cast/images/r/receiver-ui-pause1_a.png) Sender paused ![](https://developers.google.com/static/cast/images/w/sender-persistent-control2.jpg) Receiver paused, after 5 seconds ![](https://developers.google.com/static/cast/images/r/receiver-ui-pause2.png) ### [YesReceiver buffering](https://developers.google.com/cast/docs/design_checklist/receiver#receiver-ui-buffer) 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 by displaying a 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 ![](https://developers.google.com/static/cast/images/a/sender-control-elements3.gif) Receiver content buffering ![](https://developers.google.com/static/cast/images/r/receiver-ui-buffer1_a.gif) ### iOS Sender indicates receiver buffering ![](https://developers.google.com/static/cast/images/i/sender-control-elements3.gif) Receiver content buffering ![](https://developers.google.com/static/cast/images/r/receiver-ui-buffer1_a.gif) ### Chrome Sender indicates receiver buffering ![](https://developers.google.com/static/cast/images/w/sender-control-elements3.gif) Receiver content buffering ![](https://developers.google.com/static/cast/images/r/receiver-ui-buffer1_a.gif) ### [YesReceiver stops cast](https://developers.google.com/cast/docs/design_checklist/receiver#receiver-ui-complete) 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 or idle by displaying an 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 - Change the idle screen content every 30-60 seconds to prevent screen burn - Disconnect from the receiver app and stop it from running if idle for 5 minutes. When stopped, the receiver home screen appears and will help prevent screen burn. ### Android Sender app idle ![](https://developers.google.com/static/cast/images/a/sender-cast-icon-states4.png) Receiver app idle ![](https://developers.google.com/static/cast/images/r/receiver-ui-complete1_a.png) Sender disconnected ![](https://developers.google.com/static/cast/images/a/sender-cast-icon-states2.png) Cast home screen ![](https://developers.google.com/static/cast/images/r/receiver-home2.png) ### iOS Sender app idle ![](https://developers.google.com/static/cast/images/i/sender-cast-icon-states4.png) Receiver app idle ![](https://developers.google.com/static/cast/images/r/receiver-ui-complete1_a.png) Sender disconnected ![](https://developers.google.com/static/cast/images/i/sender-cast-icon-states2.png) Cast home screen ![](https://developers.google.com/static/cast/images/r/receiver-home2.png) ### Chrome Sender app idle ![Sender app idle](https://developers.google.com/static/cast/images/w/sender-cast-icon-states4.png) Receiver app idle ![](https://developers.google.com/static/cast/images/r/receiver-ui-complete1_a.png) Sender disconnected ![Sender disconnected](https://developers.google.com/static/cast/images/w/sender-cast-icon-states2.png) Cast home screen ![](https://developers.google.com/static/cast/images/r/receiver-home2.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