Developing for the Big Screen - from Android TV to Chromecast - DevFest Istanbul 2014

With the new release of Lollipop we have finally an updated API Level for Google TV, oops Android TV. This is not the only approach by Google for the large screen. There is also the Chromecast, a HDMI dongle/ media player. This Session gives an introduction how you can develop for Android TV and the ChromeCast. It presents the tools and also the support library for creating own Screens, based on an example application.

Transcript

1. www.immobilienscout24.de Developing for the Big Screen - from Android TV to Chromecast DevFest Istanbul 2014 | 06.12.2014 | Hasan Hosgel
2. About me +HasanHosgel @alosdev alosdev hosgel CO- Organizer Developer Developing for the Big Screen | Hasan Hosgel
3. About ImmobilienScout24 Germany’s largest real estate listing company. > 10.5 Mio. Monthly unique users > 1.5 Mio. real estates > 300 Mio. detail views > 1500 Servers ~ 8.5 Mio. App downloads ~ 4.5 Mio. Android > 55% mobile traffic Developing for the Big Screen | Hasan Hosgel
4. Once upon a time Developing for the Big Screen | Hasan Hosgel Image Source https://www.flickr.com/photos/theinfamousgdub/1765952198
5. Has time to create something new Developing for the Big Screen | Hasan Hosgel Image Source https://www.flickr.com/photos/slworking/8095803230
6. While sitting in the living room… Developing for the Big Screen | Hasan Hosgel Image Source http://upload.wikimedia.org/wikipedia/commons/4/4c/Children_watching_TV.jpg
7. Image source: http://upload.wikimedia.org/wikipedia/commons/b/b2/Google_tv_logo.svg Developing for the Big Screen | Hasan Hosgel
8. Wait Image source: http://upload.wikimedia.org/wikipedia/commons/b/b2/Google_tv_logo.svg Developing for the Big Screen | Hasan Hosgel
9. Oops Image source: http://upload.wikimedia.org/wikipedia/commons/b/b2/Google_tv_logo.svg Developing for the Big Screen | Hasan Hosgel
10. Android TV Image source: http://www.android.com/tv/ Developing for the Big Screen | Hasan Hosgel
11. Device Image source: http://www.android.com/tv/ Developing for the Big Screen | Hasan Hosgel
12. Let’s build the ground Image source: http://www.flickr.com/photos/hertenberger/1434191066/ Developing for the Big Screen | Hasan Hosgel
13. Before we start programming Developing for the Big Screen | Hasan Hosgel Image Source https://www.flickr.com/photos/pgautier/166610944
14. Prerequisite Developing for the Big Screen | Hasan Hosgel
15. Prerequisite •casual consumption - not focused like on phone Developing for the Big Screen | Hasan Hosgel
16. Prerequisite •casual consumption - not focused like on phone •cinematic experience - 3 meter away Developing for the Big Screen | Hasan Hosgel
17. Prerequisite •casual consumption - not focused like on phone •cinematic experience - 3 meter away •Simplicity - no touchpad Developing for the Big Screen | Hasan Hosgel
18. Navigation Developing for the Big Screen | Hasan Hosgel
19. Navigation •Home Developing for the Big Screen | Hasan Hosgel
20. Navigation •Home •Enter Button Developing for the Big Screen | Hasan Hosgel
21. Navigation •Home •Enter Button •Back Developing for the Big Screen | Hasan Hosgel
22. Navigation •Home •Enter Button •Back •D-Pad in two axis Developing for the Big Screen | Hasan Hosgel
23. Navigation with D-Pad Source: http://www.flickr.com/photos/16210667@N02/9172895225 Developing for the Big Screen | Hasan Hosgel
24. Navigation Developing for the Big Screen | Hasan Hosgel
25. Navigation •use appropriate states for better recognotion of focus/ selection Developing for the Big Screen | Hasan Hosgel
26. Navigation •use appropriate states for better recognotion of focus/ selection •use sound – occasionally Developing for the Big Screen | Hasan Hosgel
27. Navigation •use appropriate states for better recognotion of focus/ selection •use sound – occasionally •use next focus targets - for defining own navigation flow Developing for the Big Screen | Hasan Hosgel
28. Navigation •use appropriate states for better recognotion of focus/ selection •use sound – occasionally •use next focus targets - for defining own navigation flow Test it properly Developing for the Big Screen | Hasan Hosgel
29. Start Developing for the Big Screen | Hasan Hosgel Image Source https://www.flickr.com/photos/thevancats/422670456
30. Needed libraries Developing for the Big Screen | Hasan Hosgel
31. Needed libraries •v17 leanback support library Developing for the Big Screen | Hasan Hosgel
32. Needed libraries •v17 leanback support library •v7 recyclerview support library Developing for the Big Screen | Hasan Hosgel
33. Needed libraries •v17 leanback support library •v7 recyclerview support library •v7 cardview support library Developing for the Big Screen | Hasan Hosgel
34. Needed libraries •v17 leanback support library •v7 recyclerview support library •v7 cardview support library  Forces you to use also •v4 support library Developing for the Big Screen | Hasan Hosgel
35. AndroidManifest.xml changes <manifest ...> ... ... </manifest> Developing for the Big Screen | Hasan Hosgel
36. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
37. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
38. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
39. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
40. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> <uses-feature android:name="android.software.leanback" android:required="true" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
41. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> <uses-feature android:name="android.software.leanback" android:required="true" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
42. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> <uses-feature android:name="android.software.leanback" android:required="true" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
43. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> <uses-feature android:name="android.software.leanback" android:required="true" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
44. AndroidManifest.xml application changes Developing for the Big Screen | Hasan Hosgel
45. AndroidManifest.xml application changes <application android:banner="@drawable/banner" > ... </application> Developing for the Big Screen | Hasan Hosgel
46. AndroidManifest.xml application changes <application android:banner="@drawable/banner" > ... </application> Developing for the Big Screen | Hasan Hosgel
47. AndroidManifest.xml application changes <application android:banner="@drawable/banner" > ... </application> Developing for the Big Screen | Hasan Hosgel
48. AndroidManifest.xml application changes <application android:banner="@drawable/banner" > ... <activity android:name="com.example.android.TvActivity“ android:theme="@style/Theme.Leanback"> </activity> </application> Developing for the Big Screen | Hasan Hosgel
49. AndroidManifest.xml application changes <application android:banner="@drawable/banner" > ... <activity android:name="com.example.android.TvActivity“ android:theme="@style/Theme.Leanback"> </activity> </application> Developing for the Big Screen | Hasan Hosgel
50. AndroidManifest.xml application changes <application android:banner="@drawable/banner" > ... <activity android:name="com.example.android.TvActivity“ android:theme="@style/Theme.Leanback"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LEANBACK_LAUNCHER" /> </intent-filter> </activity> </application> Developing for the Big Screen | Hasan Hosgel
51. AndroidManifest.xml application changes <application android:banner="@drawable/banner" > ... <activity android:name="com.example.android.TvActivity“ android:theme="@style/Theme.Leanback"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LEANBACK_LAUNCHER" /> </intent-filter> </activity> </application> Developing for the Big Screen | Hasan Hosgel
52. Not Supported Hardware Features •android.hardware.touchscreen •android.hardware.telephony •android.hardware.camera •android.hardware.nfc •android.hardware.location.gps •android.hardware.microphone Developing for the Big Screen | Hasan Hosgel
53. avoid filtering in Playstore Developing for the Big Screen | Hasan Hosgel
54. avoid filtering in Playstore set the attribute “required” to “false” in AndroidManifest Developing for the Big Screen | Hasan Hosgel
55. avoid filtering in Playstore set the attribute “required” to “false” in AndroidManifest  If you don’t to this, the application cannot be found on the play store for TV Developing for the Big Screen | Hasan Hosgel
56. Recognize TV programmatically Developing for the Big Screen | Hasan Hosgel
57. Recognize TV programmatically UiModeManager uiModeManager = (UiModeManager) getSystemService(UI_MODE_SERVICE); Developing for the Big Screen | Hasan Hosgel
58. Recognize TV programmatically UiModeManager uiModeManager = (UiModeManager) getSystemService(UI_MODE_SERVICE); if (uiModeManager.getCurrentModeType() == Configuration.UI_MODE_TYPE_TELEVISION) { Log.d(TAG, "Running on a TV Device") } else { Log.d(TAG, "Running on a non-TV Device") } Developing for the Big Screen | Hasan Hosgel
59. Recognize TV programmatically UiModeManager uiModeManager = (UiModeManager) getSystemService(UI_MODE_SERVICE); if (uiModeManager.getCurrentModeType() == Configuration.UI_MODE_TYPE_TELEVISION) { Log.d(TAG, "Running on a TV Device") } else { Log.d(TAG, "Running on a non-TV Device") } Developing for the Big Screen | Hasan Hosgel
60. Consider Overscan Developing for the Big Screen | Hasan Hosgel
61. Avoid Layout Anti-Patterns Developing for the Big Screen | Hasan Hosgel
62. Avoid Layout Anti-Patterns •Reuse of phone or tablet layout Developing for the Big Screen | Hasan Hosgel
63. Avoid Layout Anti-Patterns •Reuse of phone or tablet layout •Usage of ActionBar Developing for the Big Screen | Hasan Hosgel
64. Avoid Layout Anti-Patterns •Reuse of phone or tablet layout •Usage of ActionBar •Usage of ViewPager Developing for the Big Screen | Hasan Hosgel
65. Let’s take a deeper look at the used Design Pattern Developing for the Big Screen | Hasan Hosgel Image Source https://www.flickr.com/photos/dsittig/12311006886
66. Model View Constroller vs. Model View Presenter Developing for the Big Screen | Hasan Hosgel Source: http://i.imgur.com/xbeB5.png
67. Model View Constroller vs. Model View Presenter Developing for the Big Screen | Hasan Hosgel Source: http://i.imgur.com/xbeB5.png
68. Some Base Classes •BrowseFragment Developing for the Big Screen | Hasan Hosgel
69. Browse Fragment Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
70. Browse Fragment Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
71. Some Base Classes •BrowseFragment •DetailFragment Developing for the Big Screen | Hasan Hosgel
72. Detail Fragment Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
73. Detail Fragment Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
74. Some Base Classes •BrowseFragment •DetailFragment •SearchFragment Developing for the Big Screen | Hasan Hosgel
75. Search Fragment Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
76. Some Base Classes •BrowseFragment •DetailFragment •SearchFragment •Recommendations (no base class) Developing for the Big Screen | Hasan Hosgel
77. Recommendation Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
78. Testing •Emulator •ADT-1 •Nexus Player Developing for the Big Screen | Hasan Hosgel
79. Finished waiting for $$$ Source: http://www.flickr.com/photos/16210667@N02/9172895225 Developing for the Big Screen | Hasan Hosgel
80. Some days later a friend sends a message Developing for the Big Screen | Hasan Hosgel Image Source https://www.flickr.com/photos/jparise/214330120
81. Chromecast Developing for the Big Screen | Hasan Hosgel Image Source http://www.google.de/intl/de/chrome/devices/chromecast/
82. Chromecast Developing for the Big Screen | Hasan Hosgel Image Source http://www.google.de/intl/de/chrome/devices/chromecast/
83. Starting the conversation Developing for the Big Screen | Hasan Hosgel Image Source http://pixabay.com/de/katze-hauskate-tier-augen-blick-278187/
84. You can conquer a new world Developing for the Big Screen | Hasan Hosgel Image Source http://pixabay.com/de/katze-wand-loch-überraschung-alt-491730/
85. Developing for Chomecast •Registration (cost 5$) Developing for the Big Screen | Hasan Hosgel
86. Developing for Chomecast •Registration (cost 5$) Register application and developer devices Developing for the Big Screen | Hasan Hosgel
87. You can conquer a new world Developing for the Big Screen | Hasan Hosgel
88. Developing for Chomecast •Registration (cost 5$) Register application and developer devices •Create sender app Android, IOs, Chrome Developing for the Big Screen | Hasan Hosgel
89. Needed libraries Developing for the Big Screen | Hasan Hosgel
90. Needed libraries •v7 appcompat support library Developing for the Big Screen | Hasan Hosgel
91. Needed libraries •v7 appcompat support library •v7 mediarouter support library Developing for the Big Screen | Hasan Hosgel
92. Needed libraries •v7 appcompat support library •v7 mediarouter support library •google play services library Developing for the Big Screen | Hasan Hosgel
93. Needed libraries •v7 appcompat support library •v7 mediarouter support library •google play services library  Forces you to use also Developing for the Big Screen | Hasan Hosgel
94. Needed libraries •v7 appcompat support library •v7 mediarouter support library •google play services library  Forces you to use also •v4 support library Developing for the Big Screen | Hasan Hosgel
95. Developing for Chomecast •Registration (cost 5$) Register application and developer devices •Create sender application Android, IOs, Chrome •Create receiver application HTML Developing for the Big Screen | Hasan Hosgel
96. Wait again for $$$ Source: http://www.flickr.com/photos/16210667@N02/9172895225 Developing for the Big Screen | Hasan Hosgel
97. Users complaining: they can’t use it on Chromecast! Developing for the Big Screen | Hasan Hosgel Image Source http://pixabay.com/de/baby-tränen-kleinkind-traurig-443393/
98. After you understand the problem Developing for the Big Screen | Hasan Hosgel Image Source http://pixabay.com/de/darstellung-porträt-schreien-schrei-89189/
99. Presenation API Developing for the Big Screen | Hasan Hosgel
100. Presenation API •In Android API Level 17 support for secondary screen was added Developing for the Big Screen | Hasan Hosgel
101. Presenation API •In Android API Level 17 support for secondary screen was added  Android Mirroring can display different Uis for device and what is displayed ChromeCast Developing for the Big Screen | Hasan Hosgel
102. Presenation API •In Android API Level 17 support for secondary screen was added  Android Mirroring can display different Uis for device and what is displayed ChromeCast Similar to MiraCast Developing for the Big Screen | Hasan Hosgel
103. Now we can rule the world! Developing for the Big Screen | Hasan Hosgel Image Source http://www.bhmpics.com/success_kid-wallpapers.html
104. Q & A Source: http://www.flickr.com/photos/21496790@N06/5065834411/ Developing for the Big Screen | Hasan Hosgel
105. www.immobilienscout24.de Thanks for your Attention! İlginiz için teşekkürler! Contact: +HasanHosgel Twitter: @alosdev Github: alosdev Developing for the Big Screen - from Android TV to Chromecast https://de.slideshare.net/hosgel/dev-fest-istanbul2014developingforthebig- screenfromandroidtvtochromecast
106. material • AndroidTV http://developer.android.com/training/tv/ https://github.com/googlesamples/androidtv-Leanback • ChromeCast https://developers.google.com/cast/ https://github.com/googlecast • Presentation API http://developer.android.com/reference/android/app/Pres entation.html https://github.com/googlecast/CastPresentation-android Developing for the Big Screen | Hasan Hosgel