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
- Activities Performed with Each Screen
- Explore Fire App Builder's Contents
- Subfolder Contents
- Configurable JSON Files Overview
- Next Steps
Screens in the App
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.
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:
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:
When you click the video again, the Content Details screen appears with play buttons:
If the video description extends beyond the display width available, a modal appears to allow users to see the additional description content.
When you play media, the Renderer screen appears.
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.
If you've already played the media, a different set of controls appears below the video when you view the content details.
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.
The search results screen lists the results as media cards in a grid:
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:
ContentBrowseActivityContentDetailsActivityContentSearchActivityFullContentBrowseActivitySplashActivityVerticalContentGridActivity
(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 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