Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

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.

  • Als Erste(r) kommentieren

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

  1. 1. www.immobilienscout24.de Developing for the Big Screen - from Android TV to Chromecast DevFest Istanbul 2014 | 06.12.2014 | Hasan Hosgel
  2. 2. About me +HasanHosgel @alosdev alosdev hosgel CO-Organizer Developer Developing for the Big Screen | Hasan Hosgel
  3. 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. 4. Once upon a time Developing for the Big Image Source Screen | Hasan Hosgel https://www.flickr.com/photos/theinfamousgdub/1765952198
  5. 5. Has time to create something new Developing for the Big Image Source Screen | Hasan Hosgel https://www.flickr.com/photos/slworking/8095803230
  6. 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. 7. Image source: http://upload.wikimedia.org/wikipedia/commons/b/b2/Google_tv_logo.svg Developing for the Big Screen | Hasan Hosgel
  8. 8. Wait Image source: http://upload.wikimedia.org/wikipedia/commons/b/b2/Google_tv_logo.svg Developing for the Big Screen | Hasan Hosgel
  9. 9. Oops Image source: http://upload.wikimedia.org/wikipedia/commons/b/b2/Google_tv_logo.svg Developing for the Big Screen | Hasan Hosgel
  10. 10. Android TV Image source: http://www.android.com/tv/ Developing for the Big Screen | Hasan Hosgel
  11. 11. Device Image source: http://www.android.com/tv/ Developing for the Big Screen | Hasan Hosgel
  12. 12. Let’s build the ground Image source: http://www.flickr.com/photos/hertenberger/1434191066/ Developing for the Big Screen | Hasan Hosgel
  13. 13. Before we start programming Developing for the Big Image Source Screen | Hasan Hosgel https://www.flickr.com/photos/pgautier/166610944
  14. 14. Prerequisite Developing for the Big Screen | Hasan Hosgel
  15. 15. Prerequisite ● casual consumption - not focused like on phone Developing for the Big Screen | Hasan Hosgel
  16. 16. Prerequisite ● casual consumption - not focused like on phone ● cinematic experience - 3 meter away Developing for the Big Screen | Hasan Hosgel
  17. 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. 18. Navigation Developing for the Big Screen | Hasan Hosgel
  19. 19. Navigation ● Home Developing for the Big Screen | Hasan Hosgel
  20. 20. Navigation ● Home ● Enter Button Developing for the Big Screen | Hasan Hosgel
  21. 21. Navigation ● Home ● Enter Button ● Back Developing for the Big Screen | Hasan Hosgel
  22. 22. Navigation ● Home ● Enter Button ● Back ● D-Pad in two axis Developing for the Big Screen | Hasan Hosgel
  23. 23. Navigation with D-Pad Developing for the Big Screen | Hasan Hosgel Source: http://www.flickr.com/photos/16210667@N02/9172895225
  24. 24. Navigation Developing for the Big Screen | Hasan Hosgel
  25. 25. Navigation ● use appropriate states for better recognotion of focus/ selection Developing for the Big Screen | Hasan Hosgel
  26. 26. Navigation ● use appropriate states for better recognotion of focus/ selection ● use sound – occasionally Developing for the Big Screen | Hasan Hosgel
  27. 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. 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. 29. Start Developing for the Big Image Source Screen | Hasan Hosgel https://www.flickr.com/photos/thevancats/422670456
  30. 30. Needed libraries Developing for the Big Screen | Hasan Hosgel
  31. 31. Needed libraries ● v17 leanback support library Developing for the Big Screen | Hasan Hosgel
  32. 32. Needed libraries ● v17 leanback support library ● v7 recyclerview support library Developing for the Big Screen | Hasan Hosgel
  33. 33. Needed libraries ● v17 leanback support library ● v7 recyclerview support library ● v7 cardview support library Developing for the Big Screen | Hasan Hosgel
  34. 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. 35. AndroidManifest.xml changes <manifest ...> ... ... </manifest> Developing for the Big Screen | Hasan Hosgel
  36. 36. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
  37. 37. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
  38. 38. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
  39. 39. AndroidManifest.xml changes <manifest ...> ... <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> ... </manifest> Developing for the Big Screen | Hasan Hosgel
  40. 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. 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. 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. 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. 44. AndroidManifest.xml application changes Developing for the Big Screen | Hasan Hosgel
  45. 45. AndroidManifest.xml application changes <application android:banner="@drawable/banner" > ... </application> Developing for the Big Screen | Hasan Hosgel
  46. 46. AndroidManifest.xml application changes <application android:banner="@drawable/banner" > ... </application> Developing for the Big Screen | Hasan Hosgel
  47. 47. AndroidManifest.xml application changes <application android:banner="@drawable/banner" > ... </application> Developing for the Big Screen | Hasan Hosgel
  48. 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. 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. 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. 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. 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. 53. avoid filtering in Playstore Developing for the Big Screen | Hasan Hosgel
  54. 54. avoid filtering in Playstore set the attribute “required” to “false” in AndroidManifest Developing for the Big Screen | Hasan Hosgel
  55. 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. 56. Recognize TV programmatically Developing for the Big Screen | Hasan Hosgel
  57. 57. Recognize TV programmatically UiModeManager uiModeManager = (UiModeManager) getSystemService(UI_MODE_SERVICE); Developing for the Big Screen | Hasan Hosgel
  58. 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. 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. 60. Consider Overscan Developing for the Big Screen | Hasan Hosgel
  61. 61. Avoid Layout Anti-Patterns Developing for the Big Screen | Hasan Hosgel
  62. 62. Avoid Layout Anti-Patterns ● Reuse of phone or tablet layout Developing for the Big Screen | Hasan Hosgel
  63. 63. Avoid Layout Anti-Patterns ● Reuse of phone or tablet layout ● Usage of ActionBar Developing for the Big Screen | Hasan Hosgel
  64. 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. 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. 66. Model View Constroller vs. Model View Presenter Developing for the Big Screen | Hasan Hosgel Source: http://i.imgur.com/xbeB5.png
  67. 67. Model View Constroller vs. Model View Presenter Developing for the Big Screen | Hasan Hosgel Source: http://i.imgur.com/xbeB5.png
  68. 68. Some Base Classes ● BrowseFragment Developing for the Big Screen | Hasan Hosgel
  69. 69. Browse Fragment Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
  70. 70. Browse Fragment Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
  71. 71. Some Base Classes ● BrowseFragment ● DetailFragment Developing for the Big Screen | Hasan Hosgel
  72. 72. Detail Fragment Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
  73. 73. Detail Fragment Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
  74. 74. Some Base Classes ● BrowseFragment ● DetailFragment ● SearchFragment Developing for the Big Screen | Hasan Hosgel
  75. 75. Search Fragment Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
  76. 76. Some Base Classes ● BrowseFragment ● DetailFragment ● SearchFragment ● Recommendations (no base class) Developing for the Big Screen | Hasan Hosgel
  77. 77. Recommendation Developing for the Big Screen | Hasan Hosgel Source: https://github.com/googlesamples/androidtv-Leanback/
  78. 78. Testing ● Emulator ● ADT-1 ● Nexus Player Developing for the Big Screen | Hasan Hosgel
  79. 79. Finished waiting for $$$ Developing for the Big Screen | Hasan Hosgel Source: http://www.flickr.com/photos/16210667@N02/9172895225
  80. 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. 81. Chromecast Developing for the Big Image Source Screen | Hasan Hosgel http://www.google.de/intl/de/chrome/devices/chromecast/
  82. 82. Chromecast Developing for the Big Image Source Screen | Hasan Hosgel http://www.google.de/intl/de/chrome/devices/chromecast/
  83. 83. Starting the conversation Developing for the Big Image Source Screen | Hasan Hosgel http://pixabay.com/de/katze-hauskate-tier-augen-blick-278187/
  84. 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. 85. Developing for Chomecast ● Registration (cost 5$) Developing for the Big Screen | Hasan Hosgel
  86. 86. Developing for Chomecast ● Registration (cost 5$) " Register application and developer devices Developing for the Big Screen | Hasan Hosgel
  87. 87. You can conquer a new world Developing for the Big Screen | Hasan Hosgel
  88. 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. 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. 90. Needed libraries Developing for the Big Screen | Hasan Hosgel
  91. 91. Needed libraries ● v7 appcompat support library Developing for the Big Screen | Hasan Hosgel
  92. 92. Needed libraries ● v7 appcompat support library ● v7 mediarouter support library Developing for the Big Screen | Hasan Hosgel
  93. 93. Needed libraries ● v7 appcompat support library ● v7 mediarouter support library ● google play services library Developing for the Big Screen | Hasan Hosgel
  94. 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. 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. 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. 97. Wait again for $$$ Developing for the Big Screen | Hasan Hosgel Source: http://www.flickr.com/photos/16210667@N02/9172895225
  98. 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. 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. 100. Presenation API Developing for the Big Screen | Hasan Hosgel
  101. 101. Presenation API ● In Android API Level 17 support for secondary screen was added Developing for the Big Screen | Hasan Hosgel
  102. 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. 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. 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. 105. Q & A Source: http://www.flickr.com/photos/21496790@N06/5065834411/ Developing for the Big Screen | Hasan Hosgel
  106. 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. 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

×