The document discusses developing applications for large screens like Android TV and Chromecast. It covers prerequisites like navigation without a touchscreen, needed libraries, and avoiding phone/tablet layouts. Base classes for Android TV like BrowseFragment and DetailFragment are described. Developing for Chromecast requires registering the app, creating a sender app, and developing the receiver app in HTML. Testing options for Android TV like emulators and ADT-1 are also mentioned.

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 Mio. App downloads
> 3.5 Mio. Android
> 55% mobile traffic
Developing for the Big Screen | Hasan Hosgel

4. Once upon a time
Developing for the Big Image Source Screen | Hasan Hosgel
https://www.flickr.com/photos/theinfamousgdub/1765952198

5. Has time to create something new
Developing for the Big Image Source Screen | Hasan Hosgel
https://www.flickr.com/photos/slworking/8095803230

6. While sitting in the living room…
Developing for the Big Image Source Screen | Hasan Hosgel
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 Image Source Screen | Hasan Hosgel
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
Developing for the Big Screen | Hasan Hosgel
Source: http://www.flickr.com/photos/16210667@N02/9172895225

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 Image Source Screen | Hasan Hosgel
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 Image Source Screen | Hasan Hosgel
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 $$$
Developing for the Big Screen | Hasan Hosgel
Source: http://www.flickr.com/photos/16210667@N02/9172895225

80. Some days later a friend sends a message
Developing for the Big Image Source Screen | Hasan Hosgel
https://www.flickr.com/photos/jparise/214330120

81. Chromecast
Developing for the Big Image Source Screen | Hasan Hosgel
http://www.google.de/intl/de/chrome/devices/chromecast/

82. Chromecast
Developing for the Big Image Source Screen | Hasan Hosgel
http://www.google.de/intl/de/chrome/devices/chromecast/

83. Starting the conversation
Developing for the Big Image Source Screen | Hasan Hosgel
http://pixabay.com/de/katze-hauskate-tier-augen-blick-278187/

84. You can conquer a new world
Developing for the Big Image Source Screen | Hasan Hosgel
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. Developing for Chomecast
● Registration (cost 5$)
" Register application and developer
devices
● Create sender app
" Android, IOs, Chrome
Developing for the Big Screen | Hasan Hosgel

90. Needed libraries
Developing for the Big Screen | Hasan Hosgel

91. Needed libraries
● v7 appcompat support library
Developing for the Big Screen | Hasan Hosgel

92. Needed libraries
● v7 appcompat support library
● v7 mediarouter support library
Developing for the Big Screen | Hasan Hosgel

93. Needed libraries
● v7 appcompat support library
● v7 mediarouter support library
● google play services library
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
Developing for the Big Screen | Hasan Hosgel

95. 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

96. 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

97. Wait again for $$$
Developing for the Big Screen | Hasan Hosgel
Source: http://www.flickr.com/photos/16210667@N02/9172895225

98. Users complaining: they can’t use it on Chromecast!
Developing for the Big Image Source Screen | Hasan Hosgel
http://pixabay.com/de/baby-tränen-kleinkind-traurig-443393/

99. After you understand the problem
Developing for the Big Image Source Screen | Hasan Hosgel
http://pixabay.com/de/darstellung-porträt-schreien-schrei-89189/

100. Presenation API
Developing for the Big Screen | Hasan Hosgel

101. Presenation API
● In Android API Level 17 support for
secondary screen was added
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
Developing for the Big Screen | Hasan Hosgel

103. 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

104. Now we can rule the world!
Developing for the Big Image Source Screen | Hasan Hosgel
http://www.bhmpics.com/success_kid-wallpapers.html

105. Q & A
Source: http://www.flickr.com/photos/21496790@N06/5065834411/
Developing for the Big Screen | Hasan Hosgel

106. 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

107. 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/
Presentation.html
" https://github.com/googlecast/CastPresentation-android
Developing for the Big Screen | Hasan Hosgel