Change Font, Media Playback Elements, Related Content, and More

III: Customize the Appearance

→

You can make other changes to the various elements of your app, such as the media playback screen, font, related content, and more. Other topics (Change the App Logo, Icon, and Splash Screen and Change Homepage Layout, Sidebar, Continue Watching Row, and More) list other changes you can make.)

Change the Elements on the Media Playback Screen
Change the Font
Customize the Related Content Section
Customize the Content Reload Time
More Extensive Customizations
Next Steps

Change the Elements on the Media Playback Screen

You can control the look and feel of the elements on the playback screen.

Video title

You can change the color of the video title on the playback screen. In your app's custom.xml file (in app > assets), update the following element:

<color name="primary_text">#E6FFFFFF</color>

This element also controls the color of the video titles and subtitles on the homepage screen.

Progress bar color

The progress bar refers to the sliding marker that indicates where you're at in the timeline of the video. To change its color, in your app's custom.xml file, update the following element:

<color name="progress_bar">#99FFFFFF</color>

For example, if you changed this color to red, it would look as follows:

Color of buffered progress bar

The buffered progress bar shows how much video has been downloaded. To change its color, in your app's custom.xml file, update the following element:

<color name="playback_buffered_progress">#FF5A5A5A</color>

For example, if you changed this color to green, it would look as follows:

Background color of progress bar

The progress bar refers to the entire bar where the video loading slider appears. To change its color, in your app's custom.xml file, update the following element:

<color name="playback_background_progress_bar">#FF373737</color>

For example, if you changed this color to blue, it would look as follows:

Related Text Color

You can change the color of the "Related Content" title. This element is grouped with other "tertiary_element" colors. Updating this color will also change the color of the category titles on the home screen. To change the color, in your app's custom.xml file, update the following element:

 <color name="tertiary_text">#f2f408</color>

Change the Font

You can change your app's fonts through the branding object in Navigator.json (inside app > assets):

"branding": {
    "globalTheme": "AppTheme",
    "lightFont" : "Roboto Light",
    "boldFont" : "Roboto Bold",
    "regularFont" : "Roboto Regular"
  }

Here's how the fonts are used:

Property	Where It's Used
`lightFont`	Used in description and body text.
`boldFont`	Used in titles.
`regularFont`	Used in buttons and subtitles.

(With the globalTheme property, there aren't other values you can select.)

You can assign any valid device or custom font for any of the three font options. For example, you could apply Roboto Bold to all three fonts if you want.

You can use any of these device fonts:

Amazon Ember fonts: Amazon Ember, Amazon Ember Bold, Amazon Ember Bold Italic, Amazon Ember Italic, Amazon Ember Light, Amazon Ember Light Italic, Amazon Ember Medium, Amazon Ember Medium Italic, Amazon Ember Thin, Amazon Ember Thin Italic, AndroidClock Regular, AndroidClock-Large Regular
Roboto fonts: Roboto Black, Roboto Black Italic, Roboto Bold, Roboto Bold Italic, Roboto Condensed Bold, Roboto Condensed Bold Italic, Roboto Condensed Italic, Roboto Condensed Light, Roboto Condensed Light Italic, Roboto Condensed Regular, Roboto Italic, Roboto Light, Roboto Light Italic, Roboto Medium, Roboto Medium Italic, Roboto Regular, Roboto Thin, Roboto Thin Italic
Verdana fonts: Verdana, Verdana Bold, Verdana Bold Italic, Verdana Italic
Miscelleneous fonts: Carrois Gothic SC, Clockopia, Code2000, Coming Soon, Cutive Mono, Dancing Script, Dancing Script Bold Droid Sans Mono, Kindle Symbol, MotoyaLMaru W3 mono, MT Chinese Surrogates, NanumGothic, Source Code Pro Medium

For example, if you wanted to use Amazon Ember fonts, you could customize the branding object like this:

  "branding": {
    "globalTheme": "AppTheme",
    "lightFont" : "Amazon Ember",
    "boldFont" : "Amazon Ember Bold",
    "regularFont" : "Amazon Ember"
  }

The screens would then look like this:

And this:

These Amazon Ember fonts will be used in the titles, subtitles, descriptions, body, and buttons.

In addition to using different device fonts, you can also use custom fonts. If you use a custom font, store the font in your app's assets/fonts directory. Then provide the path to the font in the branding object, such as fonts/Proxima-Nova-Light.tff (instead of just entering Proxima Nova Light):

  "branding": {
    "globalTheme": "AppTheme",
    "lightFont" : "fonts/Proxima-Nova-Light.tff",
    "boldFont" : "fonts/Proxima-Nova-Light.tff",
    "regularFont" : "fonts/Proxima-Nova-Light.tff"
  }

Customize the Related Content Section

On the Content Details screen, a list of "Related Content" appears below the content preview.

You populate this section by matching certain tags in your feed. For more details on configuring Related Content, see Related Content (Through Tags) in Set Up the Content Recipe.

Customize the Content Reload Time

You can customize the time it takes for content to reload (content refers to the videos and other details that your app loads from the media feed). By default the reload time is 14400000 milliseconds, or 4 hours. After this time expires, the Navigator.js file (located in app > assets > resources) will reload the recipes and data loader settings.

<!-- Content Reload time in milliseconds -->

<integer name="time_to_reload_content">14400000</integer>

<!-- End Content Reload time in milliseconds -->

More Extensive Customizations

Although you can dig into the Fire App Builder code and alter the layouts in deeper ways, major revamping of the user interface is not supported through simple edits to XML files (nor is documentation available for more extensive changes). Do not expect to completely change the interface in ways beyond what is described here.

Next Steps

Now it's time to follow the IV: Add Components for More Functionality. This section will cover ways to add more functionality to your app through various components you can load. Some of these components related to authentication, ads, in-app purchasing, or analytics. The first topic in this next map is Components Overview

Last updated: Jan 16, 2018