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