Part 2: Anatomy of a Leanback-Enabled Android App for Amazon Fire TV

In the first part of this series we learned how easy is to create a new Android App for Amazon Fire TV and how to run it for the first time using the Android Studio Wizard for Leanback-Enabled apps in a matter of a few minutes.

We’ll now deep dive into what the main components of this app are and how they interact with each other.

Main Dependencies in a Leanback-Enabled Project

After we have created a new TV project using the Android Studio Wizard, we can notice that the wizard has automatically included some libraries in our project dependencies.

Your build.gradle file will look like this:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:leanback-v17:23.4.0'
    compile 'com.android.support:recyclerview-v7:23.4.0'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.github.bumptech.glide:glide:3.4.+'
}

Let’s understand why each one of these libraries is important in a Leanback-enabled project:

• Leanback: The v17 Leanback Support Library is a standard Android support library focused on providing APIs and widgets to simplify the development of TV Apps. Most of the components used in a Leanback-enabled project are contained in this library.

• RecyclerView: This library provides the RecyclerView class. This class is used to display large datasets efficiently recycling views, improving performance and saving memory. A lot of the components of the Leanback Library rely on RecyclerView. The RecyclerView implements a very common programming pattern in Android which is the Viewholder pattern. This is important to master when developing for TV (more info on ViewHolder here).

• AppCompat: The main purpose of the AppCompat library provides APIs, widgets and tools across multiple versions of Android. It’s useful to provide your Android application on multiple devices, in particular if you ship your app in a single .apk binary file both for handheld devices and for TV.

• Glide: An efficient open source media management and image loading framework for Android. It allows to efficiently decode, download and apply images from the cloud. It’s used by some components of the Leanback-enabled app to efficiently fetch thumbnails and images to display previews of the content in the TV app.

All these components are the main building blocks to create a solid and consistent TV experience for users, and in the process of developing an App for Fire TV we will fully explore their capabilities and functions.

The Media Streaming App Interaction Model

Let’s see what the classic interaction model is when users want to play content using a Media Streaming App.

The user journey is composed by three main steps:

1. Browse for Content: The user goes through the main catalogue of media, searching for interesting content to play.
2. Read Description & Details: When an item has caught the user’s interest, they will focus on reading the descriptions and details of the content in order to make a decision.
3. Play: When the user has decided that’s the right content they will start playing the content.

The Main Components of a Leanback-Enabled Android App

A Leanback-enabled Android App follows this interaction model, and in fact the three main components of a Leanback-enabled app are exactly covering the three main steps of the Media Streaming App interaction model:

1. BrowseFragment: Allows to browse for content in the main app catalogue.
2. DetailsFragment: Grants access to extended details for specific content selected in the BrowseFragment and to perform actions like “Play Content”.
3. PlaybackOverlayFragment: This Fragment allows to overlay media controls on a full-screen media player.

This 1:1 mapping with the Media Streaming App interaction model provides developers a consistent project structure, which highly simplifies the app design and development process.

Using a well-defined app structure like the one provided by the Leanback approach also allows an easier onboarding process since there is a high chance that users will have already been interacting with Media Streaming Apps built following the same pattern.

Part 3 of this Series: BrowseFragment A.K.A. Building the Main Activity of Your TV App

In the next episode of this series we’ll deep-dive into the first of the main components of a Leanback-enabled app, the BrowseFragment. We will learn how to build the main interface of our TV app and how to make the streaming content available for browsing.

For more information about developing for the 10-foot experience, check out our Design and User Experience Guidelines.

Mario Viviani (@mariuxtheone)

Don't miss the rest of the Developing for the Living Room: How to Build an Android App for Fire TV blog series!

Part 1

Part 3