Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Developing for the Big Screen - from Android TV...

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.

Hasan Hosgel

December 06, 2014
Tweet

More Decks by Hasan Hosgel

Other Decks in Technology

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 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
  3. Once upon a time Developing for the Big Screen |

    Hasan Hosgel Image Source https://www.flickr.com/photos/theinfamousgdub/1765952198
  4. Has time to create something new Developing for the Big

    Screen | Hasan Hosgel Image Source https://www.flickr.com/photos/slworking/8095803230
  5. 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
  6. Before we start programming Developing for the Big Screen |

    Hasan Hosgel Image Source https://www.flickr.com/photos/pgautier/166610944
  7. Prerequisite •casual consumption - not focused like on phone •cinematic

    experience - 3 meter away Developing for the Big Screen | Hasan Hosgel
  8. Prerequisite •casual consumption - not focused like on phone •cinematic

    experience - 3 meter away •Simplicity - no touchpad Developing for the Big Screen | Hasan Hosgel
  9. Navigation •use appropriate states for better recognotion of focus/ selection

    •use sound – occasionally Developing for the Big Screen | Hasan Hosgel
  10. 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
  11. 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
  12. Start Developing for the Big Screen | Hasan Hosgel Image

    Source https://www.flickr.com/photos/thevancats/422670456
  13. Needed libraries •v17 leanback support library •v7 recyclerview support library

    •v7 cardview support library Developing for the Big Screen | Hasan Hosgel
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. avoid filtering in Playstore set the attribute “required” to “false”

    in AndroidManifest Developing for the Big Screen | Hasan Hosgel
  22. 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
  23. 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
  24. 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
  25. Avoid Layout Anti-Patterns •Reuse of phone or tablet layout •Usage

    of ActionBar Developing for the Big Screen | Hasan Hosgel
  26. Avoid Layout Anti-Patterns •Reuse of phone or tablet layout •Usage

    of ActionBar •Usage of ViewPager Developing for the Big Screen | Hasan Hosgel
  27. 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
  28. Model View Constroller vs. Model View Presenter Developing for the

    Big Screen | Hasan Hosgel Source: http://i.imgur.com/xbeB5.png
  29. Model View Constroller vs. Model View Presenter Developing for the

    Big Screen | Hasan Hosgel Source: http://i.imgur.com/xbeB5.png
  30. Browse Fragment Developing for the Big Screen | Hasan Hosgel

    Source: https://github.com/googlesamples/androidtv-Leanback/
  31. Browse Fragment Developing for the Big Screen | Hasan Hosgel

    Source: https://github.com/googlesamples/androidtv-Leanback/
  32. Detail Fragment Developing for the Big Screen | Hasan Hosgel

    Source: https://github.com/googlesamples/androidtv-Leanback/
  33. Detail Fragment Developing for the Big Screen | Hasan Hosgel

    Source: https://github.com/googlesamples/androidtv-Leanback/
  34. Search Fragment Developing for the Big Screen | Hasan Hosgel

    Source: https://github.com/googlesamples/androidtv-Leanback/
  35. Recommendation Developing for the Big Screen | Hasan Hosgel Source:

    https://github.com/googlesamples/androidtv-Leanback/
  36. Some days later a friend sends a message Developing for

    the Big Screen | Hasan Hosgel Image Source https://www.flickr.com/photos/jparise/214330120
  37. Chromecast Developing for the Big Screen | Hasan Hosgel Image

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

    Source http://www.google.de/intl/de/chrome/devices/chromecast/
  39. Starting the conversation Developing for the Big Screen | Hasan

    Hosgel Image Source http://pixabay.com/de/katze-hauskate-tier-augen-blick-278187/
  40. 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/
  41. Developing for Chomecast •Registration (cost 5$) Register application and developer

    devices •Create sender app Android, IOs, Chrome Developing for the Big Screen | Hasan Hosgel
  42. Needed libraries •v7 appcompat support library •v7 mediarouter support library

    •google play services library Developing for the Big Screen | Hasan Hosgel
  43. 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
  44. 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
  45. 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
  46. 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/
  47. After you understand the problem Developing for the Big Screen

    | Hasan Hosgel Image Source http://pixabay.com/de/darstellung-porträt-schreien-schrei-89189/
  48. Presenation API •In Android API Level 17 support for secondary

    screen was added Developing for the Big Screen | Hasan Hosgel
  49. 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
  50. 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
  51. Now we can rule the world! Developing for the Big

    Screen | Hasan Hosgel Image Source http://www.bhmpics.com/success_kid-wallpapers.html
  52. 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
  53. 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