Change the App Logo, Icon, and Splash Screen

III: Customize the Appearance

→

You can customize much of the app's look and feel through the custom.xml file (located in res > values) and navigator.json file (in app > assets). This topic lists required changes you need to make to your app — changing the app logo and the app icon. Other topics (Change Homepage Layout, Sidebar, Continue Watching Row, and More and Other Optional Changes ) cover additional changes that you can easily make to your app.

Change the App Logo
Customize the App Icon
Customize the Splash Screen
Next Steps

Change the App Logo

The logo appears in the upper-left corner as well as on the splash screen. This is an element you must change as you customize your app.

To change the app logo:

Inside your app's assets > res directory, create a new directory called drawable.
Open your drawable directory via Finder or Explorer.

To access your drawable directory, you can either right-click the folder within Android Studio and choose Reveal in Finder (on a Mac). Or you can manually browse the source files by going to Application > app > src > main > res > drawable. (The Android view in Android Studio doesn't reflect the actual structure of your folders.)
Add your logo image (356px wide x 108px) into this folder.

The app logo's dimensions should be approximately 356px wide x 108px tall and have a transparent background. Larger images will be scaled down to fit the space (but smaller images won't be scaled up).

The resizing preserves the image's dimensions without performing any cropping. If your logo is tall and narrow, it may look tiny when fit into a space that is 108px tall because the aspect ratio will be preserved. (Logos that are wide look better in the Fire App Builder layout.)

Your logo appears as an overlay on top of the app background. A light logo on a dark background will have good contrast.
In your app's custom.xml file (inside your app's res > values folder), customize the file names within the following elements:
```
<drawable name="splash_logo">@drawable/fire_app_builder_white</drawable>

<drawable name="company_logo">@drawable/fire_app_builder_white2</drawable>
```
The splash_logo element determines the logo that appears on the Splash page. The company_logo element determines the logo that appears in the upper-left corner of the app.

You can use the same logo on both screens, or you can vary the two. Also, you don't need to include the file extension in the image file name. Android will automatically detect it.

Tip: Fire App Builder has various custom.xml files in the other component directories. However, your app's custom.xml file will override the values in any other custom.xml file.

Customize the App Icon

You can change the app icon. This is the image thumbnail that appears in your list of apps on Fire TV and appears when you are testing your device.

Additionally, this image appears as the image tile in the Appstore's website on amazon.com.

However, when you submit your app into the Amazon Appstore, you're required to submit an app icon that is 1280 x 720px (PNG). This is the actual icon that will be used in the Fire TV user interface.

To update this file, change the ic_launcher.png files. Switch to the Project view, and then look in your app's src > main > res folder. There are 4 app icon files, each corresponding to different screen sizes:

mipmap-hdpi (72x72px)
mipmap-mdpi (48x48px)
mipmap-xhdpi (96x96px)
mipmap-xxhdpi (144x144px)

The app icon has a transparent background. Either replace the source images or update your app's custom.xml file with updated reference to your launcher file:

<drawable name="app_logo">@mipmap/ic_launcher</drawable>

Customize the Splash Screen

By default, the sample app in Fire App Builder shows the following Splash screen:

The following sections describe each element you can customize.

Logo

The logo for your app. The logo is defined by the following element in your app's custom.xml:

<drawable name="splash_logo">@drawable/fire_app_builder_white</drawable>

See the earlier section, Change the App Logo, for details on changing the Splash screen's logo.

Note: The duration of the splash screen depends on the time required to load content from your app's media feed.

Loading text

To update the word "Loading" that appears on the Splash screen, go to TVUIComponent > res > strings.xml > strings.xml and update the following element:

<string name="feed_loading">Loading</string>

Loading spinner

You can change the color of the loading spinner that appears on the Splash screen by updating this element in your app's custom.xml file:

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

Copyright

To customize the Copyright text on the Splash screen, see the strings.xml folder inside your app's res > values > strings.xml folder.

<string name="copyright">Copyright 2016. All Rights Reserved.</string>

Background color

To change the background color of the app, update the following element in your app's custom.xml:

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

Text color

To change the color of the text on the splash screen, button text, and read-more text on the Content Details screen, update the following element in custom.xml:

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

Next Steps

Now that customized the app logo and icon, see Change Homepage Layout, Sidebar, Continue Watching Row, and More to see what other changes are possible on the home screen. These other changes are optional.

Last updated: Jan 16, 2018