Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Migrating to Android TV
Design tips for Android TV
CodeMash 2015
David Carver
Gplus: +David Carver
Twitter: @kingargyle
ht...
What constitutes Android TV
Internet Enabled Devices running Android 3.2 or
Higher.
2nd
Screen/Remote Control/Game Pad sup...
Google TV Boxes
Android TV
Televisions
Other Android Based Devices
Why Design for TV???
I had an Itch that Needed Scratched
● Existing TV UIs were frustrating to use with a
Remote
● Wanted to learn Android Deve...
Android apps running on a TV
sucked because Developers let
them suck!
Myth: A Tablet App will work fine on
a TV!
The truth...Maybe
An app designed for Landscape mode on a tablet
may work, but ...
Failure Points
● The app may run, but will probably provide a
frustrating user experience.
● These apps are designed for T...
Why not just Chromecast
Everything?
● You need a Phone/Tablet/PC that supports it.
● Not everybody likes having to use a
P...
Guidelines?
We don't need no stinking
guidelines!
Android TV / Fire TV / OUYA
Design Guidelines
● Design for D-PAD not for Touch interface
● Avoid the use of the Mouse or T...
Visually Appealing
● Design with Visual Appeal
– Apps are going to be in people's living rooms.
– TVs are ment to be visua...
Visually Appealing
● Prefer darker themes.
– Lighter themes tend to be to bright and harder to
read
– TV Brightness varies...
Android TV Leanback Library
Patterns and Anti Patterns
Zones
Design with Zones in mind.
Anti Pattern
D-Pad Navigation can't skip zones. The long scrolling list in the
center has to be navigated through to get t...
You can make this Work
Limit the center content to Detail information or focusable items that
don't scroll. This allows na...
Google Recommends Vertical
Zones
Create Quick Navigation Keys
● Provide ways to Navigate quickly through long
lists.
● Provide ways to get back to the top ...
Remember to Focus
Focus
Focus will be the most important and time
consuming aspect of your app. Getting
Focus and the navigation around on s...
Avoid the Card Design with
Embeddable Clickable Items.
Avoid the Embedded Clickable Item
If you do this, make sure
a person can navigate to
it! There is no touch
screen, and if ...
Prefer Android TV Leanback Cards
Horizontal Zone Pattern
Horizontal 2 Zone Pattern
Horizontal Two Zone, Horizontal
Grid Scroll View
Horizontal Grid Views
Android TV Leanback
Horizontal 3 Zone Pattern
Horizontal 3 Zone. Zone 2 and 3 are
Side Scrolling
Avoid Content that Scrolls Vertically
in Zone 2!
In general avoid vertical scrolling with
horizontal layouts.
Horizontal Zone Pattern
With Sliding Menu
Horizontal 3 Zone with Sliding Menu
Text and Icons
● Provide large readable fonts.
● Screen space is at a premium. Even at
1920x1080p.
– User is sitting about...
General UI Consideration
● TVs are always at least layout-large and
layout-landscape-notouch resources.
● Drawables are HD...
Android TV Leanback Features
● Support Library with Android Lollipop designed
for TVs.
– BrowseFragment
– SearchFragment
–...
Android TV Leanback Features
● Contribute Recommendations to the Android
TV Leanback Launcher via a Service.
● Provide in ...
AndroidManifest.xml
● RECEIVE_BOOT_COMPLETED – if your app
provides recommendations.
● RECORD_AUDIO – for in App Voice Sea...
Leanback Launcher
Necessary otherwise the app will not
show up on the Android TV Launcher
Leanback Theme
● Activities that support Leanback must extend
from the Theme.Leanback theme. This helps
optimize the activ...
Leanback Recommendations
● Intent Service that is scheduled to provide
Recommendations to the Leanback Launcher
● Launched...
Voice Search
● Extend SearchFragment
● Create a CardPresenter
● Create a Layout for Search that includes the
custom search...
Dog Food your App
● Get an Android Smart TV, Amazon Fire TV, or
OUYA device and test your app there.
– Screen resolutions ...
Remember to Focus
android:focusable="true"
android:focusableInTouchMode="true"
android:descendantFocusability="afterDescen...
KeyCode Events
● Android supports a wide variety of Media Key
Codes
– Play, Skip Forward, Pause, Stop, Skip Back
● Channel...
Context Menus
● Use Context Menus to provide context
sensitive information.
– Don't use the Action Bar especially with Gri...
What About Testing???
Come to the talk on Friday
Unit Testing Android without Going Bald!
You can use existing Testing Too...
Code Examples
How do you do it???
Android TV Leanback Resources
● https://github.com/googlesamples/androidtv-
leanback – sample application that
implements ...
Migrating to Android TV
Upcoming SlideShare
Loading in …5
×

Migrating to Android TV

2,362 views

Published on

An introduction to what you have to think about when desinging or migrating an existing app to run on new Android TV devices. The presentation looks at the general guidelines, patterns, and anti-patterns, as well as provides an introduction to the Android TV Leanback library.

Published in: Technology
  • Be the first to comment

Migrating to Android TV

  1. 1. Migrating to Android TV Design tips for Android TV CodeMash 2015 David Carver Gplus: +David Carver Twitter: @kingargyle https://github.com/NineWorlds/serenity-android
  2. 2. What constitutes Android TV Internet Enabled Devices running Android 3.2 or Higher. 2nd Screen/Remote Control/Game Pad support Ment to be used primarily with a TV.
  3. 3. Google TV Boxes
  4. 4. Android TV
  5. 5. Televisions
  6. 6. Other Android Based Devices
  7. 7. Why Design for TV???
  8. 8. I had an Itch that Needed Scratched ● Existing TV UIs were frustrating to use with a Remote ● Wanted to learn Android Development and seemed like a good thing to do at the time. ● Tired of TV Apps getting second class treatment. ● Apps designed for TV don't need to SUCK!!
  9. 9. Android apps running on a TV sucked because Developers let them suck!
  10. 10. Myth: A Tablet App will work fine on a TV! The truth...Maybe An app designed for Landscape mode on a tablet may work, but the user experience will probably suffer.
  11. 11. Failure Points ● The app may run, but will probably provide a frustrating user experience. ● These apps are designed for Touch and typically do not take into account other ways to interact with the app. ● Using a Mouse is frustrating on the TV. If the user has to use the mouse pointer, it is a design failure. ● Need to design with the TV environment or Accessibility in mind.
  12. 12. Why not just Chromecast Everything? ● You need a Phone/Tablet/PC that supports it. ● Not everybody likes having to use a Phone/Tablet as a second screen device. ● Not everybody has a supported Chromecast device. ● Some prefer using a Remote. It's familiar. ● Limited to very basic playback or interaction. Not designed for more complicated applications and interactions.
  13. 13. Guidelines? We don't need no stinking guidelines!
  14. 14. Android TV / Fire TV / OUYA Design Guidelines ● Design for D-PAD not for Touch interface ● Avoid the use of the Mouse or Touchpad. ● Emphasize obvious items that can be selected or interacted with. ● Back Button should exit or take back to previous screen. ● Give visual indicators when more information is provided off screen (i.e. scrolling required) ● Compensate for Overscan on TVs
  15. 15. Visually Appealing ● Design with Visual Appeal – Apps are going to be in people's living rooms. – TVs are ment to be visual displays – You want the wow factor to help bring people back. – However it needs to be simple and functional. ● Limit the number of clicks that a person has to get to anything on the screen. – The fewer the clicks the better.
  16. 16. Visually Appealing ● Prefer darker themes. – Lighter themes tend to be to bright and harder to read – TV Brightness varies greatly, and depends on room environments. ● Leanback or Holo themes and color schemes work well.
  17. 17. Android TV Leanback Library
  18. 18. Patterns and Anti Patterns
  19. 19. Zones Design with Zones in mind.
  20. 20. Anti Pattern D-Pad Navigation can't skip zones. The long scrolling list in the center has to be navigated through to get to the bottom zone.
  21. 21. You can make this Work Limit the center content to Detail information or focusable items that don't scroll. This allows navigation through the zone quickly.
  22. 22. Google Recommends Vertical Zones
  23. 23. Create Quick Navigation Keys ● Provide ways to Navigate quickly through long lists. ● Provide ways to get back to the top of a list quickly. ● To get to the bottom quickly. ● Break Long Lists into separate screens. ● Provide Filtering/Search to narrow scope of items. ● Devices may have Bluethooth enabled keyboards or remotes with keybads connected.
  24. 24. Remember to Focus
  25. 25. Focus Focus will be the most important and time consuming aspect of your app. Getting Focus and the navigation around on screen focusable items is just as important if not more important than the look of the app. Android TV Leanback support library provides this for free in many cases.
  26. 26. Avoid the Card Design with Embeddable Clickable Items.
  27. 27. Avoid the Embedded Clickable Item If you do this, make sure a person can navigate to it! There is no touch screen, and if they have to resort to a mouse pointer you have failed in your design and user experience.
  28. 28. Prefer Android TV Leanback Cards
  29. 29. Horizontal Zone Pattern
  30. 30. Horizontal 2 Zone Pattern
  31. 31. Horizontal Two Zone, Horizontal Grid Scroll View
  32. 32. Horizontal Grid Views Android TV Leanback
  33. 33. Horizontal 3 Zone Pattern
  34. 34. Horizontal 3 Zone. Zone 2 and 3 are Side Scrolling
  35. 35. Avoid Content that Scrolls Vertically in Zone 2! In general avoid vertical scrolling with horizontal layouts.
  36. 36. Horizontal Zone Pattern With Sliding Menu
  37. 37. Horizontal 3 Zone with Sliding Menu
  38. 38. Text and Icons ● Provide large readable fonts. ● Screen space is at a premium. Even at 1920x1080p. – User is sitting about 10ft away so need to make text and fonts legible from that distance. – Set up your Google TV development device from that distance.
  39. 39. General UI Consideration ● TVs are always at least layout-large and layout-landscape-notouch resources. ● Drawables are HDPI resolution or higher. ● TV's are always Landscape. ● Darker themes are easier to view than lighter. ● TV Apps should be Full Screen Apps. The app will be used on the largest most popular device in the house. Give it that special treatment. ● Keep your design consistent. Stick with either Vertical or Horizontal pattern throughout the
  40. 40. Android TV Leanback Features ● Support Library with Android Lollipop designed for TVs. – BrowseFragment – SearchFragment – DetailsFragment – PlaybackOverlayFragment ● Provides support back to API 17 Jelly Bean devices. ● Layouts are optimized for TVs by providing a 10% margin on all sides. TVs have overscan.
  41. 41. Android TV Leanback Features ● Contribute Recommendations to the Android TV Leanback Launcher via a Service. ● Provide in App Voice Search ● Contribute Global Search Results via a Content Provider ● Model – View – Presenter – ObjectAdapter – Presenter – RecycleView – Fragments responsible for Click Events
  42. 42. AndroidManifest.xml ● RECEIVE_BOOT_COMPLETED – if your app provides recommendations. ● RECORD_AUDIO – for in App Voice Search ● TOUCHSCREEN – false – signifies that this app is designed to run devices that don't require a touch screen.
  43. 43. Leanback Launcher Necessary otherwise the app will not show up on the Android TV Launcher
  44. 44. Leanback Theme ● Activities that support Leanback must extend from the Theme.Leanback theme. This helps optimize the activity and layouts for the TV.
  45. 45. Leanback Recommendations ● Intent Service that is scheduled to provide Recommendations to the Leanback Launcher ● Launched after Boot is completed. ● Uses Notification Manager ● Content Providers for background images for cards
  46. 46. Voice Search ● Extend SearchFragment ● Create a CardPresenter ● Create a Layout for Search that includes the custom search fragment. ● Override onSearchRequested – the built in Search provider is disabled in Android TV devices.
  47. 47. Dog Food your App ● Get an Android Smart TV, Amazon Fire TV, or OUYA device and test your app there. – Screen resolutions will vary due to Overscan ● Use your own App. If you get frustrated, others will. ● Test both for Touch and for various controller inputs. Remote, Game Controller, Voice – Not all Remotes are created equal – Not all Game Controllers are mapped the same.
  48. 48. Remember to Focus android:focusable="true" android:focusableInTouchMode="true" android:descendantFocusability="afterDescendants" android:nextFocusDown="@+id/mainGalleryMenu" android:nextFocusUp="@+id/menu_button" android:nextFocusRight="@+id/mainGalleryMenu" android:nextFocusLeft="@+id/mainGalleryMenu"> ● View.requestFocus() ● View.requestFocusFromTouch() ● View.requestFocus(int direction) ● Remember to specifically set focus when hiding and showing off screen views (i.e Sliding Menu Drawers)
  49. 49. KeyCode Events ● Android supports a wide variety of Media Key Codes – Play, Skip Forward, Pause, Stop, Skip Back ● Channel Up and Channel Down make good Page Up and Page Down alternatives for quick navigation. ● Remember many Android TVs do have keyboards in the remote. Provide keyboard short cuts for your app.
  50. 50. Context Menus ● Use Context Menus to provide context sensitive information. – Don't use the Action Bar especially with Grid or Scrollable contentl. Prefer LeftNav pattern. – Beware of the dreaded onItemLongClick bug with Remotes and Game Controllers. It'll fire both Click and Long Click events. ● Give option to map Menu key to context menu ● Provide alternatives to bring up context menu ● Don't embed your context menus into clickable drop down menus in cards or list items!!! – Users need to reach for mouse or touch pad. Automatic failure at this point.
  51. 51. What About Testing??? Come to the talk on Friday Unit Testing Android without Going Bald! You can use existing Testing Tools to Test your Android TV applications.
  52. 52. Code Examples How do you do it???
  53. 53. Android TV Leanback Resources ● https://github.com/googlesamples/androidtv- leanback – sample application that implements most Android TV Leanback functionality. ● https://developer.android.com/training/tv/start/i ndex.html – Examples and guidelines for implementing Recommendations and In App Search. ● https://www.youtube.com/watch? v=72K1VhjoL98 – DevBytes Using Android TV Leanback

×