developing for smart tvs
TRANSCRIPT
Developing for Smart TVs
Developing for Smart TVsSbastien ArbogastSaid Eloudrhiri
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Last year, on Devoxx
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Devoxx: from talks to YouTube
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Case study: TVoxx
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
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?
#Devoxx #tvoxx@sarbogast @eloudsa
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 @eloudsa
#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 @eloudsaOld TVPassive modeInteractivity == ZappingInescapable advertisingNot mobileChannel-based: you can only watch what's currently on
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
New TVInteractiveConnectedWay more TV channelsCustom contentGamesIntegration with devicesSmart Home integrationCatch-up TVTV on demandApps
We believe the future of TV is apps
Tim Cook
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
https://www.pinterest.com/BeOOk/blockchain/
Kinds of apps that make senseMultimedia contentGames"A propos" servicesFun (group) experienceTeach or inspire VisibilityInternet of things
#Devoxx #tvoxx@sarbogast @eloudsa
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
#Devoxx #tvoxx@sarbogast @eloudsa
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
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Apple TV (tvOS)
#Devoxx #tvoxx@sarbogast @eloudsa
#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 @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsaAndroid Televisions setPhilips
Sharp
Sony
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsaAndroid TV set-top box(es)
#Devoxx #tvoxx@sarbogast @eloudsa
#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 @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsaSamsung Smart TV setSpecs depend on modelsTizen OS
#Devoxx #tvoxx@sarbogast @eloudsa
#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 @eloudsaDesign Principles
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
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
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
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
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Dont think keyboard first
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
neither old remote controls
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
think d-pad (directional pad)
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Voice control
De Niro in Taxi Driver
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Always connected
#Devoxx #tvoxx@sarbogast @eloudsa
#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 @eloudsaDesign principles of Android TV
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
https://developer.android.com/design/tv/index.html
https://www.google.com/design/spec-tv/android-tv/introduction.html
Home screen
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
https://developer.android.com/design/tv/index.html
https://www.google.com/design/spec-tv/android-tv/introduction.html
Home screen
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
https://developer.android.com/design/tv/index.html
https://www.google.com/design/spec-tv/android-tv/introduction.html
GamesMediaType of applications
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
GamesMediaType of applications
CUSTOM LAYOUTLEANBACK SUPPORT LIBRARY
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
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
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Browse View
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
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
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Card View
Large iconContent titleContent textSmall icon
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Detail View
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Detail View
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Consumption View
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Dedicated to consume media content with all related action buttons.
In-app search
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
In-app settings
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
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 @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsaDesign principlesConnected
#Devoxx #tvoxx@sarbogast @eloudsa
Design principlesConnectedClear
#Devoxx #tvoxx@sarbogast @eloudsa
Design principlesConnectedClearImmersive
#Devoxx #tvoxx@sarbogast @eloudsa
Home screen and top shelfClear app iconsShowcase content through top shelf
#Devoxx #tvoxx@sarbogast @eloudsa
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
#Devoxx #tvoxx@sarbogast @eloudsa
Navigation
#Devoxx #tvoxx@sarbogast @eloudsa
Focus and selection
#Devoxx #tvoxx@sarbogast @eloudsa
Loading content
#Devoxx #tvoxx@sarbogast @eloudsa
Layout
#Devoxx #tvoxx@sarbogast @eloudsa
Use grids
#Devoxx #tvoxx@sarbogast @eloudsa
Templates
#Devoxx #tvoxx@sarbogast @eloudsaIcons and images
#Devoxx #tvoxx@sarbogast @eloudsaUser interface elementsTab barsTables and collectionsSplit viewsText & searchButtonsNavigation barsAlerts
#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 @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
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
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)
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
portraitreversePortraitsensorPortraituserPortraitreverseLandscapeUnsupported screen orientation
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsaMust be compliant to:
https://developer.android.com/distribute/essentials/quality/tv.htmlTV App Quality
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
IDE: Android Studio
Deprecated
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Manifest: Only on TV
#Devoxx #tvoxx@sarbogast @eloudsa
#Devoxx #tvoxx@sarbogast @eloudsa
Manifest: make it visible