Developer Console

Take an App Tour

After you have successfully built the app, spend some time exploring the various screens. The following sections show what each screen in the sample app in Fire App Builder.

Screens in the App

Splash screen
Splash screen. This screen appears when you first launch the app and displays only until the app finishes loading (usually less than a second).

You can customize this screen and any other screen that shows the "Fire App Builder" text. For example, in place of "Fire App Builder" you can substitute your own company name or design.

After the app loads, you see the Home screen.

Home screen
Home screen with the ContentBrowseActivity. This view arranges the videos in various categories or groups. When you view a channel, the first video in that channel group appears as the featured background image, with its title and description in the upper-left. This is the default layout.

With the Home screen, you have a couple of display options, depending on the activity you select. By default, the Home screen has the ContentBrowseActivity activity configured. However, you can also load a more compact view by associating this screen with the FullContentBrowseActivity activity instead:

Home with FullContentBrowseActivity
Home with FullContentBrowseActivity. With this activity, all the videos appear in a more compressed grid, with the categories listed on the left. None of the videos are superimposed as large featured images in the background.

When you select a video, the video is highlighted with the background image appearing in the upper-right:

Selected video.
Home screen with video selected. The selected video appears with the large image in the background.

When you click the video again, the Content Details screen appears with play buttons:

Content Details
Content Details. This screen shows the details for a specific video, including both the title and description.

If the video description extends beyond the display width available, a modal appears to allow users to see the additional description content.

More details
Content Details screen. If the description doesn't fit within the alotted space on the Content Details screen, users can expand it to read more.

When you play media, the Renderer screen appears.

Renderer
Renderer. This screen appears when you play media.

When the controls display on the video, Related Content appears below the controls below a dim overlay. If you click the down arrow on your remote, the related content shifts into prominent view without the dim overlay.

Related Content
Related Content selected and displayed

If you've already played the media, a different set of controls appears below the video when you view the content details.

Resuming playback.
Resuming playback on the Details. If you stopped watching a video part-way through, instead of a WATCH NOW button, you see RESUME PLAYBACK and WATCH FROM BEGINNING buttons.

To search for a video, select the search button on the home screen. When you do, the Search screen appears and allows you to type a keyword. The search will match the keyword against the title and description elements.

Search
Search. This screen allows users to search for media. Note that you can hold down the microphone button and say the words you want to search for. Your speech gets converted into text and populated here.

The search results screen lists the results as media cards in a grid:

Search
Search. The search results appear as thumbnails below the search bar. Here the word diving matches a number of different videos.

Activities Performed with Each Screen

Activities are the various functions the app can do. Each activity invokes a different screen. Fire App Builder has six available activities:

  • ContentBrowseActivity
  • ContentDetailsActivity
  • ContentSearchActivity
  • FullContentBrowseActivity
  • SplashActivity
  • VerticalContentGridActivity

(Both ContentBrowseActivity and FullContentBrowseActivity can be used for the Home screen.)

Each activity in Fire App Builder uses a different screen. The screen used by each activity is configured through the Navigator.json file (located in app > assets). The graph object (shown below) from Navigator.json contains key-value pairs that associate the activity with the screen and other properties:

"graph": {
    "com.amazon.android.tv.tenfoot.ui.activities.SplashActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_SPLASH_SCREEN"
    },
    "com.amazon.android.tv.tenfoot.ui.activities.FullContentBrowseActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_HOME_SCREEN"
    },
    "com.amazon.android.tv.tenfoot.ui.activities.ContentDetailsActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_DETAILS_SCREEN"
    },
    "com.amazon.android.tv.tenfoot.ui.activities.ContentSearchActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_SEARCH_SCREEN"
    },
    "com.amazon.android.uamp.ui.PlaybackActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_RENDERER_SCREEN"
    }
  }

For example, the SplashActivity displays the Splash screen. The ContentBrowseActivity displays the Home screen, and so on.

You can associate any activity with any screen, but the only activity that makes sense to switch up is the ContentBrowseActivity. You can replace this activity with FullContentBrowseActivity to provide the more compact Home screen layout described earlier.

The other properties for each activity in this code are as follows:

Activity property Description
verifyScreenAccess Require the user to authenticate to view the screen. Set this to true if you want to require users to log in prior to viewing content. Mostly you would verify screen access for the Content Renderer screen only, so that users can get a sense of the media first and feel more enticement to log in.
verifyNetworkConnection Require a network connection to show the screen. (If the page contains only settings and no online media, you could set this to false. But for most screens, leave this at true. )
onAction The action to perform (such as display a certain screen) when the activity runs.

The AndroidManifest.xml file initiates the SplashActivity activity when the app starts:

<activity
    android:name="com.amazon.android.tv.tenfoot.ui.activities.SplashActivity"
    android:screenOrientation="landscape">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
        <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
    </intent-filter>
</activity>

This SplashActivity activity loads the Splash screen.

Beyond these activities and screens, you can also write your own activity and associate it with your own screen. (Details on how to make this advanced customization are beyond the scope of this documentation.)

Explore Fire App Builder's Contents

Before you start creating your app, take a few minutes to familiarize yourself with the various libraries, modules, and components available in Fire App Builder.

The available components in Fire App Builder

The following table briefly describes each component.

Folders Description
AMZNMediaPlayerComponent Used to play streaming media.
AdsInterface An interface for ads.
AmazonInAppPurchaseComponent Component that implements the Purchase Interface for Amazon In-app purchasing.
AnalyticsInterface An interface for analytics.
AuthInterface An interface for authorization.
ContentBrowser Controller (from the Model-view-controller architectural pattern) that allows users to browse content within the app. It fetches the feed and controls flows, recipes, and configurations.
ContentModel Model (from the Model-view-controller architectural pattern) that defines the method for storing data that the browser will use to render.
DataLoader Reusable module to load data from the network. Commonly used for loading the feed.
DynamicParser Configurable module to parse the feed and populate the model.
FacebookAuthComponent Component that implements the Auth Interface for Facebook authorization.
FlurryAnalyticsComponent Component that implements the Analytics interface for Flurry analytics.
ModuleInterface The core code that makes different components modular in the Fire App Builder framework.
PassThroughAdsComponent Dummy implementation for the ads interface, used by Fire App Builder. If you don’t have an ad implementation in your app, you can use this as base code to start your own ads module.
PurchaseInterface An interface for setting up payments.
TVUIComponent Contains the TV UI code, which is based on the Leanback Support Library. Also contains the classes for the activities.
UAMP Universal Android Media Player. Amazon media player builds on top of UAMP to extend it with additional features.
Utils Contains reusable Java classes, including security classes used to encrypt and decrypt keys used with some components (such as Facebook Authorization, Adobe Pass, and Flurry Analytics components).
Application A sample app that uses the various libraries and components in the Fire App Builder framework. This is the app that you customize (see Customize the Fire App Builder Sample Project).

Subfolder Contents

Within each folder in Fire App Builder, you usually see the same pattern of subfolders. The following table describes each subfolder:

Subfolder Contents
build This subfolder, required by Android, is auto-generated when the project builds. Do not edit files in the build folder.
libs If this subfolder is included, it contains external libraries required by a component or other external service. Do not edit files in this folder. Often times the libraries required by a component are referenced as dependencies in the build.gradle file and retrieved when the project builds.
src Contains the actual code for the component or function. The res subfolder contains resources for the component, which you will frequently work with if using the component. When you edit files, you will primarily edit files that appear within the res subfolder.
test Unit test files. The content in test folders mirrors the content in the main folder but is meant for writing unit tests. Unit tests don’t require any Android dependencies — you can run them on your own machine without a Fire TV device. You usually don’t need to do anything in this folder.
androidTest Tests that require an Android dependency. These tests require a Fire TV device to run the code. You usually don’t need to do anything in this folder.

Configurable JSON Files Overview

The basic app in Fire App Builder requires almost no Java coding. Instead, you configure the app through various JSON files that contain simple key-value pairs that allow you to specify the app options you want. The following are the JSON files you can configure.

JSON or XML files to configure Location
Navigator.json app > assets
BasicFileBasedUrlGeneratorConfig.json app > assets > configurations
BasicHttpBasedDownloaderConfig.json app > assets > configurations
DataLoadManagerConfig.json app > assets > configurations
LightCastCategoriesRecipe.json app > assets > recipes
LightCastContentsRecipe.json app > assets > recipes
LightCastDataLoaderRecipe1.json app > assets > recipes
LightCastDataLoaderRecipe2.json app > assets > recipes
custom.xml app > res > values

(Don't worry about configuring the JSON or XML files now. The files are listed here simply to introduce you to upcoming the configuration tasks. The point is that you can configure your app by merely adjusting JSON or XML files instead of doing Java programming.)

Next Steps

Now that you have a good understanding of the basic functionality, libraries, and components in Fire App Builder, try out some of the Alexa voice commands to get a feel for the voice interactivity with your media.


Last updated: Jan 16, 2018