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.
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
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
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
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
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
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
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
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/
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
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/
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
Notes de l'éditeur
10% overscan
27dp left/ right
48 top/ down
http://i.imgur.com/xbeB5.png
http://i.imgur.com/xbeB5.png
Implement SearchResultProvider
Recommondations are notification with the category „Notification.CATEGORY_RECOMMENDATION “