Developing for Smart TVs

Developing for Smart TVs

Developing for Smart TVsSbastien ArbogastSaid Eloudrhiri

#Devoxx #tvoxx@sarbogast @eloudsa


Last year, on Devoxx



Devoxx: from talks to YouTube



Case study: TVoxx



AgendaLet's get to know each otherWhy would you develop a smart TV app?Which devices can you develop for?New platform, new rulesHow do you design a smart TV app?How do you develop one?TVoxx demoLearn more

#Devoxx #tvoxx@sarbogast @eloudsaAgendaLet's get to know each otherWhy would you develop a smart TV app?Which devices can you develop for?New platform, new rulesHow do you design a smart TV app?How do you develop one?TVoxx demoLearn more

#Devoxx #tvoxx@sarbogast @eloudsaSurveyWho has a Smart TV?Who has a set-top box?Who has already read his TVs manual?Who has already developed a Smart TV app?Who is a mobile developer?Who owns a TV?Who already appeared on TV?


Sbastien Arbogast@sarbogastJava developer for 11+ yearsiOS developers for 6+ years (developer of the first Devoxx schedule app)Apple Watch developer (Smartvoxx, My Devoxx)Apple TV developer (TVoxx)Agile practitioner and Lean Startup coachBlockchain enthusiast (ChainSkills)futurologist.co Founder of Epseelon

#Devoxx #tvoxx@sarbogast @eloudsaSaid Eloudrhiri@eloudsaDeveloper since 1992Agile Coach, ScrumMaster, Team LeadDevoxx4Kids trainer, Wajug organizerAndroid Wear developer (Smartvoxx, My Devoxx)Android TV developer (Tvoxx)Blockchain developer (ChainSkills)Fatherologist (Nora, Rayane and Djenna)Founder of Noratek

#Devoxx #tvoxx@sarbogast @eloudsaDisclaimerWe are not related to any company (Apple, Google, Samsung, etc.) or linked to any TV show.We are not Smart TV experts but curious developers sharing our experience.Material used in this presentation remains the property of their owners.



#Devoxx #tvoxx@sarbogast @eloudsaOld TVPassive modeInteractivity == ZappingInescapable advertisingNot mobileChannel-based: you can only watch what's currently on



New TVInteractiveConnectedWay more TV channelsCustom contentGamesIntegration with devicesSmart Home integrationCatch-up TVTV on demandApps

We believe the future of TV is apps

Tim Cook



https://www.pinterest.com/BeOOk/blockchain/

Kinds of apps that make senseMultimedia contentGames"A propos" servicesFun (group) experienceTeach or inspire VisibilityInternet of things


Make multimedia content easier to browse and accessOffer a relevant service while people are enjoying content: e.g. allowing them to order food while they are watching a game)Offer a group experience for people to have fun together (or not)Teach or inspire people while they are relaxed at home in their couchMake something more visible on a big screenTurn people's TV into a hub for their connected things

Business models for TV appsApp salesIn-app purchaseIn-content adsIn-app subscriptions


AgendaLet's get to know each otherWhy would you develop a smart TV app?Which devices can you develop for?New platform, new rulesHow do you design a smart TV app?How do you develop one?TVoxx demoLearn more

#Devoxx #tvoxx@sarbogast @eloudsaMarket share



Apple TV (tvOS)


#Devoxx #tvoxx@sarbogast @eloudsaApple TV: SpecstvOS (derivated from iOS)4th generationCPU: A8 - 64-bitCapacity: 32 Gb or 64 GbBluetooth 4.0Accelerometer / GyroscopeSiriEthernet, WiFiH.264, 1080p, 60 frames/sec


#Devoxx #tvoxx@sarbogast @eloudsaAndroid Televisions setPhilips

Sharp

Sony


#Devoxx #tvoxx@sarbogast @eloudsaAndroid TV set-top box(es)


#Devoxx #tvoxx@sarbogast @eloudsaAndroid TV box: Nvidia Shield

Android TV 6.0NVIDIA Tegra X1 processor with a 256-core GPU and 3 GB RAMCapacity: 16 Gb or 500 GbBluetooth 4.17.1 and 5.1 surroundEthernet, WiFi4K Ultra HD readyVoice control


#Devoxx #tvoxx@sarbogast @eloudsaSamsung Smart TV setSpecs depend on modelsTizen OS



#Devoxx #tvoxx@sarbogast @eloudsaDesign Principles



Before entering into much details, we have to step back and to understand what does it mean developing for a TV.

10 ft UI design



By 10-foot UI Design we mean that its required to think in terms of simplicity and lightweight interaction.

http://blogs.adobe.com/dreamweaver/2015/11/designing-user-experiences-for-the-10-foot-ui.htmlhttps://en.wikipedia.org/wiki/10-foot_user_interface

Group vs individual



Dont think keyboard first



neither old remote controls



think d-pad (directional pad)



Voice control

De Niro in Taxi Driver



Always connected



#Devoxx #tvoxx@sarbogast @eloudsaDesign principles of Android TV



https://developer.android.com/design/tv/index.html

https://www.google.com/design/spec-tv/android-tv/introduction.html

Home screen





Home screen





GamesMediaType of applications



GamesMediaType of applications

CUSTOM LAYOUTLEANBACK SUPPORT LIBRARY



The Leanback support library provides a set of APIs and widgets that allows you to create apps that provide a great experience on Android TV.

Material design



Browse View



On the left side, you have the list of categories (or headers).

On the right side, you have the rows of cards.

The animation is managed by the Leanback library.

Navigation



Card View

Large iconContent titleContent textSmall icon



Detail View



Detail View



Consumption View



Dedicated to consume media content with all related action buttons.

In-app search



In-app settings



In-app settings with controls such as switches, text, button, etc.

Human Interface GuidelinesDesign principles: connected, clear and immersiveHome screen and top shelfFocus and parallaxSiri remote and game controllersUser interactionVisual designIcons and imagesUser interface elements


#Devoxx #tvoxx@sarbogast @eloudsaDesign principlesConnected


Design principlesConnectedClear


Design principlesConnectedClearImmersive


Home screen and top shelfClear app iconsShowcase content through top shelf


Focus and parallaxA way to reconnect your user's remote with the screenMakes focus more obviousApple provides tools for that

#Devoxx #tvoxx@sarbogast @eloudsaRemote and game controllers

By default, only the remoteSome game controllers availableDegrade gracefully


Navigation


Focus and selection


Loading content


Layout


Use grids


Templates

#Devoxx #tvoxx@sarbogast @eloudsaIcons and images

#Devoxx #tvoxx@sarbogast @eloudsaUser interface elementsTab barsTables and collectionsSplit viewsText & searchButtonsNavigation barsAlerts


#Devoxx #tvoxx@sarbogast @eloudsaDevelopment environmentJavaAndroid Studio

Minimum SDK Level:API 21 - Android 5.0 (Lollipop)

Required libraries:v17 leanback library: UI widgetsv7 recyclerview library: optimise display of imagesv4 support library: required by leanback



First, you need Java and Android Studio.

Unsupported featuresTouchscreen (android.hardware.touchscreen)Touchscreen emulator (android.hardware.faketouch)Telephony (android.hardware.telephony)Camera (android.hardware.camera)Near Field Communications (NFC) (android.hardware.nfc)GPS (android.hardware.location.gps)Sensors (android.hardware.sensor)



portraitreversePortraitsensorPortraituserPortraitreverseLandscapeUnsupported screen orientation


#Devoxx #tvoxx@sarbogast @eloudsaMust be compliant to:

https://developer.android.com/distribute/essentials/quality/tv.htmlTV App Quality



IDE: Android Studio

Deprecated



Manifest: Only on TV



Manifest: make it visible

Software

Developing for Smart TVs