This talk was presented at the Big Android BBQ 2013, and discusses tips and patterns for making a good Android TV application. Serenity was designed for use on Android TV devices and 10 foot viewing experience. Topics cover the patterns most often used and many of the anti-patterns that apps designed for tablets and touch run into when deployed to a device connected to a Television.

1. Serenity for Android
Design Tips for making your App work well on
Android TV devices
Big Android BBQ 2013
David Carver
Gplus: David Carver or Serenity for Android
Twitter: @kingargyle
https://github.com/NineWorlds/serenity-android

2. What is Serenity
● Plex Media Server Client for Androd TV
Devices, Game consoles, and tablets.
● Optimized for Remote and D-Pad navigation
● Open Source project available on github
https://github.com/NineWorlds/serenity-app
● Available in the Google Play store.
● MIT Licensed

4. Android TV what does it include?
● Google TV devices
– Sony NS7/8, Vizio Co-Star, Asus Cube
● Android TV sticks and HDMI devices
● Tablets connected to the TV
● Gaming consoles like the OUYA
● Anything that supports the android.tv system
feature!

5. Why Design for TV???

6. I had an Itch that Needed Scratched
● Plex App was constantly crashing
● The UI was 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.
● Wanted a more Media Center layout for Plex.
● Apps designed for TV don't need to SUCK!!

7. Android TV apps suck because
Developers let them suck!

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

9. Plex on Google TV before Redesign

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

11. Guidelines?
We don't need no stinking
guidelines!

12. Google TV 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)

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

14. 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.
● Holo themes and color schemes work well.

15. Zones
Design with Zones in mind.

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

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

18. Google Recommends Vertical
Zones

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

20. Remember to Focus

21. 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.
That great tablet embeddable card layout may
not work as well with a Remote or D-Pad.

22. Avoid the Card Design with
Embeddable Clickable Items.

23. Avoid the Embedded Clickable Item

24. Avoid Horizontal Scroll with Side
Menu (There is an exception)

25. Avoid Search at top of Page, Place
it in Left Nav Bar or Sliding Menu

26. Horizontal Zone Pattern

27. Horizontal 2 Zone Pattern

28. Horizontal Two Zone, Horizontal
Grid Scroll View

29. Horizontal 3 Zone Pattern

30. Horizontal 3 Zone. Zone 2 and 3 are
Side Scrolling

31. Avoid Content that Scrolls Vertically
in Zone 2!
In general avoid vertical scrolling

32. Horizontal Zone Pattern
With Sliding Menu

33. Horizontal 3 Zone with Sliding Menu

34. Veritcal Zone Pattern
The Good and the Ugly

36. Good Use of 3 Zone Vertical Layout

37. Use Vertical Scroll Grid View with
Side Menu / Left Nav Bar
Fewer clicks to get to the Side Content

38. Avoid Vertical and Horizontal Scrolling
When in Content Zone don't scroll both
directions.

39. Top Items Hard to get too. Due to
Vertical scrolling center content.

40. Left Nav Bar hard to get to due to
Horizontal Scrolling content

41. New Plex has same issue.
Horizontal and Vertical Scroll
content

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

43. Tips for Developing and Testing

44. You must unlearn....what you
have learned.

45. AndroidManifest.xml
● <uses-feature
android:name="android.hardware.touchscreen
" android:required="false" />
● Allows for the Play Store to allow the app to be
installed on a Android TV device.
● <uses-sdk android:minSdkVersion="13"/>
● For Honeycomb Google TV devices.

46. General UI Consideration
● TV's are always at least layout-large and layout-
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 app. Easier for
user to learn. If changing the pattern make it a user
choice to do so (i.e. multiple layouts)

47. 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)

48. Emulator
Use a Nexus 7 screen resolution. Also use
the Google TV Add On.
Use Intel Images (Much faster)
Enable D-Pad with Google TV Add On.

49. Dog Food your App
● Get an Android Smart TV 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

50. Avoid Proprietary Extensions
● Avoid using undocumented APIs. You'll back
yourself into a corner.
● You can survive in Honeycomb.
– NDK support comign with Jelly Bean update for
Android TVs
– Compatibility library works well when needed
– Plenty of Open source widgets and libraries that
can be used. Adds negligible size.

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

52. Context Menus
● Use Context Menus to provide context sensitive
information.
– Don't use the Action Bar especially with Grid or
Scrollable content
– 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.

53. Performance
● Use Animations sparingly
– TV Devices are typically slower than Phones/Tablets
– Can appear to slow down the app.
● Becareful of views that always fire an OnSelect
event. Design views that can ignore on select
during fling operations.
● Network is always on, less concern about wifi
usage and consumption.
● Do implement caches, devices still have limited
storage

54. Open Source Widgets that
Work well for the TV

55. TwoWayGridView
Provides a horizontal scrolling grid.
Child views don't get focus. Minor bug.
https://github.com/jess-anders/two-
way-gridview

56. Menu-Drawer
Sliding Menu with easy configuration
Respects focus. Not all do.
https://github.com/SimonVT/android-
menudrawer

57. Thanks To
● Spiderfly Studios – for Logo and some graphic
design work
– http://www.spiderflystudios.com
● Google TV Friends for initial promotion of the
app and helping get the word out.
● Stackoverflow community for the many helpful
tips