The document discusses building TV apps using Chromecast. It covers the Chromecast infrastructure which connects via HDMI and USB. It outlines the app lifecycle involving an app ID, URL, HTML and data channel. Design principles are provided for receiver apps placed in the bottom third of the screen and sender apps always showing the cast button. Sample apps and publishing costs on Google Play and the Google Cast developer console are also mentioned.

1. Tomás Ruiz-López
Software Design Manager at Everyware Technologies
@tomasruizlopez
Building TV Apps with
Chromecast
@everywaretech /everywaretech
http://www.everywaretech.es
#gandroid

2. What is?
#gandroid

3. What is?
#gandroid

4. What is?
+
#gandroid

5. What is?
+
#gandroid

6. What is?
+
=
#gandroid

7. What is?
+
=
#gandroid

8. What is?
+
=
35€
#gandroid

9. Infrastructure
#gandroid

10. Infrastructure
#gandroid

11. Infrastructure
#gandroid

12. Infrastructure
#gandroid

13. SameWiFinetwork
Infrastructure
#gandroid

14. SameWiFinetwork
Infrastructure
#gandroid

15. SameWiFinetwork
Infrastructure
HDMI
USB for power
#gandroid

16. SameWiFinetwork
Infrastructure
HDMI
USB for power
Android, iOS,
web for Chrome
#gandroid

17. App Lifecycle
#gandroid

18. App Lifecycle
#gandroid

19. App Lifecycle
#gandroid

20. App Lifecycle
App ID
#gandroid

21. App Lifecycle
App ID
App ID
#gandroid

22. App Lifecycle
App ID
App ID
URL
#gandroid

23. App Lifecycle
App ID
App ID
URLURL
#gandroid

24. App Lifecycle
App ID
App ID
URLURL
HTML
#gandroid

25. App Lifecycle
App ID
App ID
URLURL
HTML
Data
channel
#gandroid

26. App Lifecycle
App ID
App ID
URLURL
HTML
Data
channel
Limited Web
Browser
#gandroid

27. Design Principles
#gandroid

28. Design Principles
Receiver App
• No interactive elements
• UI placed in the bottom third of the screen
• Use transparency, don’t interfere with
content
• Use transitions (fade-in, fade-out)
#gandroid

29. Design Principles
Receiver App
• No interactive elements
• UI placed in the bottom third of the screen
• Use transparency, don’t interfere with
content
• Use transitions (fade-in, fade-out)
Sender App
• Support actions
• Prefer portrait while casting, but work in
both orientations
• Always show the cast button
#gandroid

30. Design Principles
Receiver App
• No interactive elements
• UI placed in the bottom third of the screen
• Use transparency, don’t interfere with
content
• Use transitions (fade-in, fade-out)
Sender App
• Support actions
• Prefer portrait while casting, but work in
both orientations
• Always show the cast button
Read Design Checklist at:
https://developers.google.com/cast/docs/design_checklist #gandroid

31. Dependencies
• Android Support Library v7
!
• Android Support Media Router Library
!
• Google Play Services
!
• Cast Companion Library (optional)
#gandroid

32. Development
• Sender app: Android, iOS, HTML (Chrome only)
!
• Receiver app:
‣ Default Media Receiver (nothing to do)
‣ Styled Media Receiver (custom CSS)
‣ Custom Receiver (HTML + Javascript)
#gandroid

33. Sample Apps
• Photowall for Chromecast
!
!
!
!
!
!
!
• Google Cast GitHub
https://github.com/googlecast
#gandroid

34. Sample Apps
• Photowall for Chromecast
!
!
!
!
!
!
!
• Google Cast GitHub
https://github.com/googlecast
#gandroid

35. Publishing
• Sender app: Google Play, App Store, your server
!
• Receiver app:
‣ Default Media Receiver (no publishing)
!
‣ Styled Media Receiver (Google Cast)
‣ Custom Receiver (Google Cast)
#gandroid

36. Publishing
• Sender app: Google Play, App Store, your server
!
• Receiver app:
‣ Default Media Receiver (no publishing)
!
‣ Styled Media Receiver (Google Cast)
‣ Custom Receiver (Google Cast)
~25€
#gandroid

37. Publishing
• Sender app: Google Play, App Store, your server
!
• Receiver app:
‣ Default Media Receiver (no publishing)
!
‣ Styled Media Receiver (Google Cast)
‣ Custom Receiver (Google Cast)
~25€
#gandroid

38. Publishing
• Sender app: Google Play, App Store, your server
!
• Receiver app:
‣ Default Media Receiver (no publishing)
!
‣ Styled Media Receiver (Google Cast)
‣ Custom Receiver (Google Cast)
~25€
~5€
#gandroid

39. Tomás Ruiz-López
Software Design Manager at Everyware Technologies
@tomasruizlopez
Thanks for your attention!
Questions?
@everywaretech /everywaretech
http://www.everywaretech.es
#gandroid

40. Tomás Ruiz-López
Software Design Manager at Everyware Technologies
@tomasruizlopez
@everywaretech /everywaretech
http://www.everywaretech.es
Building TV Apps with
Chromecast
#gandroid