If you're not familiar with Cast terminology and concepts, review the [Cast Glossary](https://developers.google.com/cast/glossary) before going through the Design Checklist.   

Before a Cast session can begin, both the sender device (for example, a mobile phone or tablet)
and the receiver device (for example, a Chromecast plugged into a TV) must be connected to the
same Wi-Fi network.

## [Cast sequence](https://developers.google.com/cast/docs/design_checklist/cast-basics#cast-session-sequence)


There are two ways users can start a Cast session:


**1. Connect \& play:** Connect to a Web Receiver before playing content,
content starts from the beginning


**2. Play \& connect:** Connect to a Web Receiver while playing content,
content starts on the Web Receiver at its current position on sender device

### 1. Connect \& play

### Android

Tap the Cast button
![](https://developers.google.com/static/cast/images/a/connect-and-play1.png) Cast home screen
![](https://developers.google.com/static/cast/images/r/receiver-home2.png) Select a receiver
![](https://developers.google.com/static/cast/images/a/connect-and-play2.png) Web Receiver app loading
![Web Receiver app loading](https://developers.google.com/static/cast/images/r/receiver-player-loading1.png) Play the content
![](https://developers.google.com/static/cast/images/a/connect-and-play3.png) Web Receiver playing content
![](https://developers.google.com/static/cast/images/r/receiver-content-playing1.png)

### iOS

Tap the Cast button
![](https://developers.google.com/static/cast/images/i/connect-and-play1.png) Cast home screen
![](https://developers.google.com/static/cast/images/r/receiver-home2.png) Select a receiver
![](https://developers.google.com/static/cast/images/i/connect-and-play2.png) Web Receiver app loading
![Web Receiver app loading](https://developers.google.com/static/cast/images/r/receiver-player-loading1.png) Play the content
![](https://developers.google.com/static/cast/images/i/connect-and-play3.png) Web Receiver playing content
![](https://developers.google.com/static/cast/images/r/receiver-content-playing1.png)

### Chrome

Tap the Cast button
![Tap the Cast button](https://developers.google.com/static/cast/images/w/connect-and-play1.png) Cast home screen
![](https://developers.google.com/static/cast/images/r/receiver-home2.png) Select a receiver
![Select a receiver](https://developers.google.com/static/cast/images/w/connect-and-play2.png) Web Receiver app loading
![Web Receiver app loading](https://developers.google.com/static/cast/images/r/receiver-player-loading1.png) Play the content
![Play the content](https://developers.google.com/static/cast/images/w/connect-and-play3.png) Web Receiver playing content
![](https://developers.google.com/static/cast/images/r/receiver-content-playing1.png)

### 2. Play \& connect

### Android

Play the content
![](https://developers.google.com/static/cast/images/a/play-and-connect1.png) Cast home screen
![](https://developers.google.com/static/cast/images/r/receiver-home2.png) Tap the Cast button
![](https://developers.google.com/static/cast/images/a/play-and-connect2.png) Cast home screen
![](https://developers.google.com/static/cast/images/r/receiver-home2.png) Select a receiver
![](https://developers.google.com/static/cast/images/a/play-and-connect3.png) Cast home screen
![](https://developers.google.com/static/cast/images/r/receiver-home2.png) Cast connected
![](https://developers.google.com/static/cast/images/a/play-and-connect-castConnected.png) Web Receiver playing content
![](https://developers.google.com/static/cast/images/r/receiver-content-playing1.png)

### iOS

Play the content
![](https://developers.google.com/static/cast/images/i/play-and-connect1.png) Cast home screen
![](https://developers.google.com/static/cast/images/r/receiver-home2.png) Tap the Cast button
![](https://developers.google.com/static/cast/images/i/play-and-connect2.png) Cast home screen
![](https://developers.google.com/static/cast/images/r/receiver-home2.png) Select a receiver
![](https://developers.google.com/static/cast/images/i/play-and-connect3.png) Web Receiver playing content
![](https://developers.google.com/static/cast/images/r/receiver-content-playing1.png)

### Chrome

Play the content
![Play the content](https://developers.google.com/static/cast/images/w/play-and-connect1.png) Cast home screen
![](https://developers.google.com/static/cast/images/r/receiver-home2.png) Tap the Cast button
![Tap the Cast button](https://developers.google.com/static/cast/images/w/play-and-connect2.png) Cast home screen
![](https://developers.google.com/static/cast/images/r/receiver-home2.png) Select a receiver
![Select a receiver](https://developers.google.com/static/cast/images/w/play-and-connect3.png) Web Receiver playing content
![](https://developers.google.com/static/cast/images/r/receiver-content-playing1.png)

## [Cast home screen](https://developers.google.com/cast/docs/design_checklist/cast-basics#cast-home)

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

For more information about how Web Receiver apps stop running, see:

- [Cast dialog, while casting](https://developers.google.com/cast/docs/design_checklist/cast-dialog#sender-cast-menu-casting)
- [Sender stops cast](https://developers.google.com/cast/docs/design_checklist/sender#sender-control-end)
- [Web Receiver app idle](https://developers.google.com/cast/docs/design_checklist/receiver#receiver-ui-idle)
- [Web Receiver paused](https://developers.google.com/cast/docs/design_checklist/receiver#receiver-ui-pause)

### Android

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-home1.png)

### iOS

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-home1.png)

### Chrome

Sender disconnected
![](https://developers.google.com/static/cast/images/w/sender-cast-icon-states2.jpg) Cast home screen
![](https://developers.google.com/static/cast/images/r/receiver-home1.png)

<br />

**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