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

www.immobilienscout24.de

Developing for the Big Screen - from Android TV to Chromecast DevFest Istanbul 2014 | 06.12.2014 | Hasan Hosgel

About me

+HasanHosgel

@alosdev

alosdev

hosgel

CO-Organizer

Developer

Developing for the Big Screen | Hasan Hosgel

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


Once upon a time

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

Has time to create something new

Developing for the Big Screen | Hasan Hosgel Image Source https://www.flickr.com/photos/slworking/8095803230

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

Image source: http://upload.wikimedia.org/wikipedia/commons/b/b2/Google_tv_logo.svg


Wait



Oops



Android TV

Image source: http://www.android.com/tv/


Device

Image source: http://www.android.com/tv/


Let’s build the ground

Image source: http://www.flickr.com/photos/hertenberger/1434191066/


Before we start programming

Developing for the Big Screen | Hasan Hosgel Image Source https://www.flickr.com/photos/pgautier/166610944

Prerequisite


Prerequisite

● casual consumption - not focused like on

phone


Prerequisite


phone

● cinematic experience - 3 meter away


Prerequisite


phone

● cinematic experience - 3 meter away

● Simplicity - no touchpad


Navigation


Navigation

● Home


Navigation

● Home

● Enter Button


Navigation

● Home

● Enter Button

● Back


Navigation

● Home

● Enter Button

● Back

● D-Pad in two axis


Navigation with D-Pad

Source: http://www.flickr.com/photos/16210667@N02/9172895225


Navigation


Navigation

● use appropriate states for better

recognotion of focus/ selection


Navigation



● use sound – occasionally


Navigation




● use next focus targets - for defining own

navigation flow


Navigation




● use next focus targets - for defining own

navigation flow

èTest it properly


Start

Developing for the Big Screen | Hasan Hosgel Image Source https://www.flickr.com/photos/thevancats/422670456

Needed libraries


Needed libraries

● v17 leanback support library


Needed libraries


● v7 recyclerview support library


Needed libraries



● v7 cardview support library


Needed libraries



● v7 cardview support library

è Forces you to use also

● v4 support library


AndroidManifest.xml changes

<manifest ...> ...

... </manifest>



<manifest ...> ...

<uses-feature android:name="android.hardware.touchscreen" android:required="false" />

... </manifest>



<manifest ...> ...


... </manifest>



<manifest ...> ...


... </manifest>



<manifest ...> ...


... </manifest>



<manifest ...> ...


<uses-feature android:name="android.software.leanback" android:required="true" />

... </manifest>



<manifest ...> ...



... </manifest>



<manifest ...> ...



... </manifest>



<manifest ...> ...



... </manifest>


AndroidManifest.xml application changes



<application android:banner="@drawable/banner" > ... </application>









<application android:banner="@drawable/banner" > ... <activity android:name="com.example.android.TvActivity“ android:theme="@style/Theme.Leanback"> </activity> </application>



<application android:banner="@drawable/banner" > ... <activity android:name="com.example.android.TvActivity“ android:theme="@style/Theme.Leanback"> </activity> </application>



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



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


Not Supported Hardware Features

● android.hardware.touchscreen

● android.hardware.telephony

● android.hardware.camera

● android.hardware.nfc

● android.hardware.location.gps

● android.hardware.microphone


avoid filtering in Playstore



set the attribute “required” to “false” in

AndroidManifest



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


Recognize TV programmatically



UiModeManager uiModeManager = (UiModeManager) getSystemService(UI_MODE_SERVICE);



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") }



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") }


Consider Overscan


Avoid Layout Anti-Patterns



● Reuse of phone or tablet layout




● Usage of ActionBar




● Usage of ActionBar

● Usage of ViewPager


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

Model View Constroller vs. Model View Presenter


Source: http://i.imgur.com/xbeB5.png

Model View Constroller vs. Model View Presenter


Source: http://i.imgur.com/xbeB5.png

Some Base Classes

● BrowseFragment


Browse Fragment


Source: https://github.com/googlesamples/androidtv-Leanback/

Browse Fragment



Some Base Classes


● DetailFragment


Detail Fragment



Detail Fragment



Some Base Classes



● SearchFragment


Search Fragment



Some Base Classes



● SearchFragment

● Recommendations (no base class)


Recommendation



Testing

● Emulator

● ADT-1

● Nexus Player


Finished waiting for $$$



Some days later a friend sends a message

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

Chromecast

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

Chromecast

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

Starting the conversation

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

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/

Developing for Chomecast

● Registration (cost 5$)




"  Register application and developer

devices


You can conquer a new world





devices

● Create sender app

"  Android, IOs, Chrome





devices

● Create sender app



Needed libraries


Needed libraries

● v7 appcompat support library


Needed libraries


● v7 mediarouter support library


Needed libraries



● google play services library


Needed libraries






Needed libraries





● v4 support library





devices

● Create sender application


● Create receiver application

"  HTML


Wait again for $$$



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/

After you understand the problem

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

Presenation API


Presenation API

● In Android API Level 17 support for

secondary screen was added


Presenation API



è Android Mirroring can display different Uis

for device and what is displayed ChromeCast


Presenation API



è Android Mirroring can display different Uis

for device and what is displayed ChromeCast

Similar to MiraCast


Now we can rule the world!

Developing for the Big Screen | Hasan Hosgel Image Source http://www.bhmpics.com/success_kid-wallpapers.html

Q & A

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

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

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


Technology

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