In order to be one of a small number of apps initially offered on the Amazon Fire TV, I added a 10-foot user interface (TV UI term for a user interface usable from a distance) and remote control / game pad support. Here are some screenshots. There’s more technical detail below the photo gallery.

Title Screen

The title screen shows a focused item and responds to d-pad events.

Main Play Screen

The play screen now features answer buttons laid out in the same configuration as the d=pad on the remote or the game controller. Even the mini games that reward kids for perfect scores provide a d-pad- or joystick-controlled cursor.

Settings Screen

All settings screens use a two-panel layout with selectable items along the left edge. The currently selected item is always highlighted in purple.

Customize Screen

One the the trickier tasks was getting the range selectors to work with a d-pad. I move the two indicators to above and below the range indicator so vertical buttons selects a range selector “thumb handle” (now in purple) and horizontal clicks move that end of the range higher (right) and lower (left).

History Report

The history report scroll view is scrolled by the d-pad. Note that the whole scrollable list is highlighted in purple and the currently selected item in the list shows a yellow frame to help with navigation.

Reports Screen

Here’s a d-pad navigable missed question report. The orange background gradient is consistent across all report screens.

Requirements to make the app work on Fire TV:

  • Modify user interface code to work with controllers (no touch controls)
  • Create a light on dark color scheme that’s easy to read on a television (dark on white doesn’t work well on TVs)
  • Resize the user interface to increase text and icon size, minimize blocks of text
  • Develop an interaction scheme (especially for settings) that’s close enough to the Amazon TV’s.
  • Keep a single codebase for future enhancements and bug fixes.

What I did:

  • Adapted the main multiple touch screen so that answers are in a diamond patten that corresponds to D-Pad button position to make answering intuitive
  • Created a multi-pane user interface for settings screens with text titles down the left, highlighted the current one for context.
  • Used Android XML theming to control colors, sizes and styles on the various settings screens for user interface consistency and a single codebase for touch and TV versions
  • Used Android fragments to minimize code changes between single- and multi-pane user interfaces.
  • Used color consistently to highlight “focused” items
  • Subtly changed the background color gradient to provide context in different parts of the user interface.
  • The bonus mini-games offered to kids after completing a problem set without errors required a different solution. They were mostly about tapping objects (balloons, flying saucers, fireworks, smiley faces). Rather than create entirely new games, I provided a large circular “cursor” that’s d-pad or joystick controllable. The games are really easy with the large circle to offer some instant success, but the cursor gets smaller over time to increase the challenges. Once I was working at Amazon, this was a strategy for adapting touch games to Fire TV. I’m co-inventor of U.S. Patent 9910512.
  • Because my “Help” and “About” screens are HTML-based, I created two different stylesheets to control text and backgroud colors and also to include or omit text that’s only relevant to one platform.