Customizing the UI for Fire TV (and Android TV)

Pamela Vong -

Why would you want to build apps for Fire TV? Well, Roku may be the current leader in the market for streaming TV boxes, but Amazon Fire TV's share of the market isn't too far behind at 2nd place based on data collected from comScore as of December 2016. And like other Amazon Fire OS devices, Fire TV is built on top of Android, so we can leverage most of the existing Android libraries and tools to build our TV apps, making them useable on both Fire TV and Android TV devices!

If you've used a lot of Fire TV apps before, you may have noticed many of them have a very similar look-and-feel. This is because many (if not all) of them have built their apps on top of the Android Leanback support library, so they usually end up looking similar to this out-of-the-box design:

When starting to learn how to build apps for Android TV (and Fire TV), the official Android developer training documentation is usually where you'll end up.  This will get you familiar with the various concepts, views, and classes to use in your own app, and what you'll end up with is that vanilla Android TV app UI. But what if you wanted rocky road or mint chocolate chip instead of vanilla? *

Well, since Android is opensource, we can dig into every part of its source code to see how it's implemented, including the Leanback support library! This allows us to extend most of the vanilla implementation and customize it with our own ingredients! ?

Let's use the Card View as an example:

Google's card view lesson shows you how to create a CardPresenter that initializes an ImageCardView with custom colors for the background depending on its selection state. That's cool ?.. Let's do more than that though…

The Layout

If we look at the source code for the ImageCardView class, we'll see that it's building its view from the lb_image_card_view layout and initializes a known set of properties for the card's presenter to hydrate later, e.g., the image, title, and content. Using this as a starting point, we can create our own Card View with a unique design.

First, create a new layout xml file for this new card view:

This card view is going to have a main card image and title (like before), but we're adding an additional gradient overlay and logo image as well. The styles (not shown here) will position the title within the bounds of the main card image and place the logo image above it.

The View

Now that we have the layout, let's create a new Card View class that inflates it following the same approach as the original ImageCardView but using our custom layout and control views:

Our view class will be a lot simpler than the original ImageCardView since we're not using their layout, styles, or attributes which conditionally creates certain properties and child views. We know for certain that our layout will need a main image, logo, and title, so we've declared those in the class, created their respective getter/setter methods, and initialized them in buildCardView method with their appropriate layout controls using the findViewById method.

The Presenter

Now, let's use this new Card View in our Card Presenter instead of the vanilla ImageCardView by overriding the onCreateViewHolder and onBindViewHolder:

And there you have it - We customized our vanilla card view and made it our own flavor! ?

The end product should look something like this Browse Genre page that we built for the Animal Planet GO app on Fire TV:

* Although I pick on vanilla, I am also a fan of plain vanilla ice cream and mean no disrespect to other vanilla lovers.