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

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

● casual consumption - not focused like on

Prerequisite

● cinematic experience - 3 meter away

Prerequisite

● cinematic experience - 3 meter away

● Simplicity - no touchpad

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

● 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

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

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

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

Consider Overscan

Avoid Layout Anti-Patterns

● Reuse of phone or tablet layout

● 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

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

● v7 appcompat support library

Needed libraries

● v7 mediarouter support library

Needed libraries

● google play services library

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

● 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

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

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

Technology

Chromecast built-in · Chromecast tocando la pestaña "Chromecast built-in" - "Aplicaciones compatibles con Chromecast" en Pioneer Remote App. 2.Toque el icono [Cast] para seleccionar

SEO sunumuyla DevFest'15,

Test Driven Design - GDG DevFest Istanbul 2016

bsSelector (GDG DevFest 2014)

2D Endless Runner in Unity for Mobile - GDG DevFest Istanbul 2014

Google DevFest LA 2016

Chromecast 2015 Teardown - Amazon Web Services...Chromecast 2015 Teardown Chromecast 2015 and Chromecast Audio teardown on October 2, 2015. 作成者: Evan Noronha Chromecast 2015

GDG Devfest Paraná 2016

Tutoriel Google Chromecast

Chromecast get started

BİR BİLGİSAYAR MÜHENDİSİN AJANDASIİTÜ BigBang 2016 (12 Kasım, İstanbul) GDG Ankara DevFest’16 (4 Aralık 2016) TechAnkara Proje Pazarı (7-8 Aralık 2016) TBD Bilişim

GDG DevFest Xiamen 2017

Wikipedia Burgos devfest 2017

Googles Chromecast - A Disruptor

DevFest Istanbul - a free guided tour of Neo4J

Html5-Devfest Yaoundé 2013

K8s idm-devfest

Desenvolver para Chromecast

DevFest Japan 2014 Spring

Chromecast hdmi dongle