Build and Download TV Apps

Introduction

Supported TV Devices and Operating Systems

Quick Brick supports app creation for the following TV platforms and their respective operating system versions.

PlatformSupported DevicesSupported OSNot Supported Devices
Apple TVGen 4 HD (2015), Gen 5 4K (2017)tvOS10 onwards but users should always update to the latest tvOS as pushed by AppleGen 1,2,3 Apple TV
Android TVAny certified Android TV device with official Google Play Store access. Any Google TV (2020 onwards) device. Operator devices built on official licensed Android AOSP require checking with Applicaster as they do not use the Google Play store for app distribution.Android O onwardsUncertified Android devices
Amazon Fire TVGen 2 Fire TV Stick HD (2015), Gen 3 Fire TV Stick 4K (2018), Fire TV Cube (2018), Fire TVs (2019)Fire OS7 onwards, (Fire OS5 for HD Stick only)Gen 1
Samsung TV2017 models onwardsTizen 3 onwardsTizen 2 Orsay legacy OS
LG TV2018 models onwardsWebOS4 onwardsWebOS2, WebOS3 and Netcast legacy OS

TV App Considerations

The Zapp tools used and the process of building and releasing apps for TV platforms is the same as for mobile apps however, there are some platform specific considerations to take into account.

  • A TV layout will be different to mobile.
  • A single layout can be used across all supported TV devices.
  • Datasources can be common to both mobile and TV apps but images used in a TV layout will have different resolutions to mobile. Image keys for TV layouts should be included in data sources.
  • TV app navigation is built around a remote control and driven by the 5-point Nav method of Up, Down, Left, Right, OK (Enter), Back (Return) and Exit and the swipe specific functions of the Apple TV remote.
  • TV apps tend to have a fairly flat layout structure, avoiding deep nesting of screens that need to be navigated back out of.
  • TV apps only contain live, linear or VOD content. Content types such as Articles and Web Links used in mobile apps cannot be used.
  • TV apps can only have a single cell in focus at any time. It is not possible to have focusable action buttons within a cell. However, it is possible to create the appearance of buttons in an app using the TV power cell text fields.

Supported Features On TV Apps

The following table shows the supported features in TV apps and also what is not supported compared to mobile apps - important to know when constructing cross-platform mobile and TV apps.

FeatureSupported?Information
General Content ScreenYes
Top TV Menu NavigationYes
Screen Picker NavigationYes
Applicaster PlayerYes
3rd Party PlayersYesWith custom plugins
YouTube PlayerNoNot allowed on TV apps
Live Linear Video and AudioYes
On Demand Video and AudioYes
ArticlesNoNot Applicable to TV apps
Web LinksNoNot Applicable to TV apps
In Line PlayerNo
System fontsYes
Custom fontsYes
Theme pluginYes
Grid ComponentYes
Horizontal List Component (rail)Yes
List ComponentNoRoadmap
Group ComponentYes
Group Info ComponentYes
Carousel ComponentNoRoadmap
Hero ComponentNoDefine any cell size and image aspect ratio in any component using Cell 1 TV power cell
Cell 1 TV (Text displayed beneath the image)Yes
Cel 2 TV (Text displayed to the left or right of the image)NoRoadmap
Cell 3 TV (Text displayed overlaying the image. )NoRoadmap (Use Cell 1 TV instead with negative margin values on text fields to overlay the image)
Right to left appsNoRoadmap
Badge per content type and static badges in power cellsYesTV apps do not support content of type = article or link
TabsNoUse Screen Picker
Web ComponentNoNot applicable to TVs
Web screenNoNot applicable to TVs
Continue watchingNoRoadmap
FavouritesNoRoadmap
ShareNoRoadmap
SearchNoRoadmap

Pre-build App creation

To create a new TV app select New Version

and create from blank

Then configure your new app

Store Select the destination store. If created within a Release then this will be pre-filled in according to the release platform.

Platform Select the platform. If created within a Release then this will be pre-filled in according to the release platform.

Name Give you app a name.

Version Give you app a sem-ver number.

Bundle Identifier for example com.appname.

Device Target Set the required device end target.

SDK version Set the platform )operating system) SDK. The latest stable version should be used.

Use Quick Brick Select this option.

Notes Add any notes required to help identify nd support this build history.

Release When created within the release framework this field will be pre-populated.

Quick Brick Version This selects the React Native SDK version. Use SDK Default should be selected.

URL schemes Enter any URL schemes to be used in your app.

Active Layout Assign your layout if this has been created or leave as default until your layout is created.

Select CREATE. The app will take approx 5mins to prepare and will be available in Zapp when the app build buttons changes from orange to green

Prerequisites To Building

Before you build your app for debug / release make sure you completed the list of steps below.

tip

Use the docs search to search for relevant information or unknown terminology

  • Upload custom fonts - If your app is using custom fonts.
  • Upload relevant assets
  • Create a layout and activate it for the version you would like to build
  • Install and configure your installed plugins (Follow the specific plugin docs to see what configurations need to be done before build and what configurations can be changed at runtime)
note
  • If you want to build a store (release) version you'll need to make sure you add the relevant store info. see the Build section below for more info

Build

Select debug build or debug and release build. Follow any guidance on plugin version warnings.

Build Dialog Apple TV

See help text for more info and link to Apple's help center.

Build Dialog Android TV

See help text for more info and link to their help center.

Build Dialog Amazon Fire TV

See help text for more info and link to their help center.

Build Dialog Samsung TV

See help text for more info and link to their help center.

Build Dialog LG TV

See help text for more info and link to their help center.

Download app and side-load to your TV device

When the build is complete select the download button for your app and save the file to your PC.

Side Load to Apple TV

Use the Apple Configurator 2 app (Mac only) to side load your app. https://support.apple.com/en-gb/apple-configurator

Side Load to Android TV and Amazon Fire TV

You will need to install Android Studio and use the command line editor to transfer apps to these devices.

Then

  • adb install dragapkfilefrompchere

File transfer can take around 60secs and there is no progress visible until the transfer completes

If you get the error message $ADB_VENDOR_KEYS is not set;

  • try adb kill-server
  • then adb start-server
  • and try again

If that does not work then follow the procedure below:

  • On your PC go to this directory in Finder: ~/.android/adbkey/
  • Delete the 2 files adbkey and adbkey.pub
  • In terminal type adb kill-server then adb start-server
  • Then type adb connect IPddressofTVdevice
  • Look for the message on the Android TV device to accept the connection
  • Accept the connection and then in terminal type adb install dragapkfilehere

Side Load to LG TV

Download the WebOS development SDK to your PC and the Developer App to your TV. Follow these instructions https://webostv.developer.lge.com/develop/app-test

Side Load to Samsung TV

Method 1: Sign up to the Samsung Seller Office https://seller.samsungapps.com/tv/portal/main and then contact your local Samsung representative to get access to the USB memory-stick side load tool as an add-on within the seller portal

Method 2: Install the Tizen TV developer SDK. Follow these instructions https://developer.samsung.com/smarttv/develop/getting-started/setting-up-sdk/installing-tv-sdk.html and then install apps via the command line.

View Samsung and LG Apps In Your Browser

tip

For Samsung and LG TV apps only you can preview in your PC browser.

Select Open Web App via the Build Download button.

  • Move your mouse cursor out of the way of the screen or it will interfere with the content
  • Navigate the app using the arrow keys and enter
  • There is no back button in the browser (this is usually a hardware mapped button on the remote control so has no browser equivalent)