Change Homepage Layout, Sidebar, Continue Watching Row, and More

III: Customize the Appearance

→

You can customize the homepage layout to include a visible sidebar for navigating categories. You can also modify the Continue Watching and Watchlist rows. Other topics (Change the App Logo, Icon, and Splash Screen and Change Font, Media Playback Elements, Related Content, and More) list other changes you can make.)

Customize the Homepage Layout
Change the Homepage's Visual Elements
Change the Sidebar in the "Full Browse" Homepage Layout
Remove the Watchlist Row and Button
Modify the Continue Watching Row on the App's Home Screen
Customize the Search Button
Update the Terms of Use
Next Steps

Customize the Homepage Layout

The default home screen layout uses the ContentBrowseActivity. This layout is referred to as the "Homepage Browse layout."

You can change the homepage layout to a more compressed view by using the FullContentBrowseActivity instead. This alternative homepage layout is referred to as the "Full Browse" homepage layout.

Home with FullContentBrowseActivity — **Home with `FullContentBrowseActivity`**. With this activity, all the videos appear in a more compressed grid, with the channels listed on the left in a sidebar. None of the videos are superimposed as large featured images in the background. The app appears in the upper-right corner.

The left sidebar can collapse in when the user is browsing through the video titles. This gives more space and focus to your video content.

To change the homepage to the Full Browse layout:

Open the Navigator.json file (located in app > assets).

In the graph object, locate the CONTENT_HOME_SCREEN:

"com.amazon.android.tv.tenfoot.ui.activities.ContentBrowseActivity": {
      "verifyScreenAccess": false,
      "verifyNetworkConnection": true,
      "onAction": "CONTENT_HOME_SCREEN"
    }

Change com.amazon.android.tv.tenfoot.ui.activities.ContentBrowseActivity to com.amazon.android.tv.tenfoot.ui.activities.FullContentBrowseActivity.

Change the Homepage's Visual Elements

The following diagram shows the visual properties you can customize on the homepage's Browse layout (the default):

Logo

See the section, Change the App Logo for details.

Video title and description

You can change the color of the video title and description. In your app's custom.xml file, update the following element:

<color name="primary_text">#f4084f</color>
<!-- red Used for the text on the card views and playback progress bar text. -->

This element also controls the color of the video title and description on the preview screen (which appears when you click a video but haven't started media playback). It also controls the color of the text on the buttons, such as "Watch Now" and "Resume Playback."

For details on how to change the font itself for these elements, see Change the Font.

Category title color

You can change the color of the category titles. Changing this color also changes the text color in left navigation in Full Browse layout. In your app's custom.xml file, update the following element:

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

This element also controls the color of the "Related Content" text, which appears below videos on the preview screen and the media playback screen.

Card video title color

You can change the color of the video title on cards. Changing this color also changes the text color on the progress bar during video playback. In your app's custom.xml file, update the following element:

<color name="secondary_text">#FFFFFFFF</color>

Background color

You can change the background color of the app. This property affects all screens. In your app's custom.xml file, change the following element:

<color name="background">#22282E</color>

Gradient width

You can control the size of the gradient between the background and the preview image. In your app's custom.xml file, adjust the dp value for the following element:

<dimen name="content_image_gradient_size">100dp</dimen>

Preview image size

You can control the size of the preview image in the upper-right corner. In your app's custom.xml file, adjust the dp value for the following elements:

<dimen name="content_image_height">350dp</dimen>
<dimen name="content_image_width">540dp</dimen>

Search button icon and search background

See the following section, Customize the Search Button for information on how to customize the search. Customizations to the search button change the button's appearance on the home screen and the search screen.

The full browse layout shows a left sidebar navigation. You can customize the color of the sidebar and the category titles that appear there.

Sidebar color

You can change the color of the left navigation bar. In your app's custom.xml file, update the following element:

<color name="browse_headers_bar">#ff69b4</color>

Category titles and subtitles in sidebar

You can change the category titles that appear in the sidebar. Both the selected and non-selected category titles receive this color. The selected category titles are bold, and the non-selected category titles are softer and muted.

In your app's custom.xml file, updated the following element:

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

Note that for the default homepage layout ("Browse"), this element controls the category title above the videos rows. For the Full Browse layout, it changes the color of the category titles in the left navigation bar.

Remove the Watchlist Row and Button

By default, the Content Details screen includes an "Add to Watchlist" button.

Videos that you add to your watchlist appear on the "Watchlist" row on the app's Home screen. There's no limit to the number of content items you can add to the Watchlist.

Change the Name of the Watchlist Row

To change the displayed name of the Watchlist row, open your app's custom.xml file (located in app > assets > res > values) and add the following:

<string name="watchlist_row">Watchlist</string>

Move the Watchlist Row to the Top

Currently, you cannot move the position of the Watchlist row.

Remove the Watchlist Row

To remove both the Watchlist row from the Home screen and the "Add to Watchlist" button from the Content Details screen, open your Navigator.json file (inside app > assets) and add enableWatchlistRow: false to the config object, like this:

  "config": {
    "showRelatedContent": true,
    "useCategoryAsDefaultRelatedContent": true,
    "searchAlgo": "basic",
    "enableCEA608": false,
    "enableRecentRow": true,
    "enableWatchlistRow": false,
    "maxNumberOfRecentItems": 5
  }

Modify the Continue Watching Row on the App's Home Screen

The "Continue Watching" row on the app's home screen shows content that you were recently watching.

If content is played for more than 10 seconds, it gets added to this row.

Change the Threshold Time of the Continue Watching Row

If you want to change this 10-second threshold time (the time until a video is considered recently watched), adjust the following value in your app's custom.xml file (located in app > assets > res > values):

<integer name="recent_grace_period">10000</integer>

The value must be in milliseconds. The 10000 default is 10 seconds.

Adjust the Number of Recent Items in the Continue Watching Row

By default, the "Continue Watching" row shows up to 5 items. You can adjust this limit up to a max of 20. To adjust the number of recent items shown, open your Navigator.json file (inside app > assets) and change the maxNumberOfRecentItems value:

"config": {
  "showRelatedContent": true,
  "useCategoryAsDefaultRelatedContent": true,
  "searchAlgo": "basic",
  "enableCEA608": false,
  "enableRecentRow": true,
  "maxNumberOfRecentItems": 10
}

Change the Name of the Continue Watching Row

To change the displayed name of the Watchlist row, open your app's custom.xml file (located in app > assets > res > values) and add the following:

<string name="recent_row">Continue Watching</string>

Move the Continue Watching Row to the Top

Currently, you cannot move the position of the Continue Watching row.

Remove the Continue Watching Row

To remove the Continue Watching row from the home screen, set enableRecentRow to false in the same config object, like this:

  "config": {
    "showRelatedContent": true,
    "useCategoryAsDefaultRelatedContent": true,
    "searchAlgo": "basic",
    "enableCEA608": false,
    "enableRecentRow": false,
    "maxNumberOfRecentItems": 5
  }

Customize the Search Button

You can customize the search button icon, background color, and form field color. The search button color and background also appear on the home screen.

Search button icon

To change the search button icon:

If you haven't already created a drawable folder in your app, create a new folder called drawable inside your app's assets > res directory.
Open your drawable folder via Finder or Explorer.
Add your image for the search icon and background into this folder.

You can copy the original ic_search.png image as an example. You can find this image in TVUIComponent > res > drawable. Or if you want to browse the file directory structure, go to TVUICopmonent > res > drawable > drawable-xhdpi. The search icon is a 34px x 34px transparent PNG image. The icon is white in order to contrast with a dark background.
In your app's custom.xml file, update the following file name to correspond to your new search icon:
```
<drawable name="search_icon">@drawable/ic_search</drawable>
```

Search button background color

To change the background color of the search button, adjust the following element in your app's custom.xml file:

<color name="accent">#EE962D</color>

Search Form Background Color

The search form background appears on the search screen when you start typing your search query. This color is controlled through an image file (rather than a hex code) to achieve a gradient. To change the color of the search form background:

If you haven't already created a drawable folder in your app, create a new folder called drawable inside your app's assets > res directory.
Open your drawable folder via Finder or Explorer.
Add your image for the search form background into this folder.

You can copy the original bg_gradient_search image as an example. You can find this image in TVUIComponent > res > drawable. Or if you want to browse the file directory structure, go to TVUIComponent > res > drawable > drawable-xhdpi. The file name is bg_gradient_search.9.png. It's a 3px wide by 1082px tall image. It repeats horizontally to fill the search background form space.
In your app's custom.xml file, update the following file name to correspond to your new search background image:
```
<drawable name="search_background">@drawable/bg_gradient_search</drawable>
```

Update the Terms of Use

The Terms of Use section appears in the footer of the app and links to the terms_of_use.html file (located in app > assets).

You can adjust the target for this link in your custom.xml file:

<string name="terms_of_use_file">terms_of_use.html</string>

The Terms of Use file is a sample file that you should edit before distributing your app. For instance, you might choose to include terms of use, an end user license agreement, privacy notices, and/or other legal notices in this file.

The Terms of Use file also includes notices for open source components that are built in to the sample app by default. These notices are provided as a convenience only. Amazon makes no representations as to their accuracy or completeness and will not be responsible for any inaccuracies or incompleteness.

Next Steps

If desired, go to Change Font, Media Playback Elements, Related Content, and More. This topic lists other possible modifications you can make to the appearance of your app. You can also go directly to the next map, IV: Add Components for More Functionality.

Last updated: Jan 16, 2018