Quick Brick TV Apps - Setup and Configuration

Introduction

This document details how to create a Quick Brick App in Zapp for:

• Apple TV
• Android TV
• Amazon Fire
• Samsung Smart TVs
• LG Smart TVs

Supported Devices

To see which hardware and software versions are supported per device please check the following link

Prerequisites

• To create an app you need to have an account in Zapp
• Currently TV apps can be created for all large screen devices by anyone with a Zapp account. For customers creating their own apps we will be restricting this capability such that their account only permits them to build apps in line with their agreed commercials

Step 1 - Create the App

👉In Zapp select "NEW APP" then select "CREATE BLANK" 

👉Fill in the required information as in the screenshot below

- Name of app

- Default language

- Account the app will be attached to

Then select "Create App"

Step 2 - Prepare the layout

Although we haven’t yet built an app it is necessary to assign an initial layout configuration to your app at this stage. Follow these steps below to configure a layout. Please note this layout is not final - it can be modified as you wish at any stage after building the app.

👉Open the app builder tab as in the below screenshot

👉 Once the UI Builder is open, select layouts> to create a new layout as in the screenshot below

👉When the window below opens select "+ add layout" on the green action tab

👉When the window below opens enter a name for your layout and select "TV" from the drop down target device list and select (only) "Cell Style Families" from the Cell Style Framework tab then select "+ add layout" 

NOTE: TV will only be available  as an option if you are creating a new layout from scratch or duplicating an existing TV layout. TV layout type will not be an option if you try to duplicate an existing mobile layout

NOTE: Help on using Cell Style Builder to make Custom Plugin Configurations can be found at https://applicaster.zendesk.com/hc/en-us/articles/360034916012-QuickBrick-TV-Layouts-with-Cell-Styles-Builder-Cell-Builder-Plugins

The function is available in UI Builder so builder could now create a plug in to control the cell style and assign it to one of the cell types

Step 3 - Create a New version

👉Select "NEW VERSION" and then "CREATE BLANK" 

This screen will launch

 In the fields select or enter the following parameters

👉STORE Select the required device Store

👉DEVICE TARGET Select the required device

👉APP VERSION NAME Name your app

👉VERSION Enter a valid Semver# (1.2.3 format)

👉BUNDLE IDENTIFIER for example, com.appname

👉DEVICE TARGET select the required device target

👉SDK VERSION Will auto fill with the highest version # for stable version

👉USE QUICK BRICK Check this box

👉QUICK BRICK VERSION Select USE SDK DEFAULT

👉NOTES Enter any notes to describe your build e.g

👉URL SCHEMES Enter any URL schemes to be used in your app

👉ACTIVE LAYOUT Select the layout that you created in step 2

👉Select "CREATE"

This will take approx 5 minutes. When complete the wait icon will turn to a green arrow

 

Step 4 - Add Plug-ins

👉Select PLUGIN CONFIGURATIONS from the Dropdown menu

The following standard plugins are available for Quick Brick TV

Plugin	Requirement	Info
Dependency React Native Fast Image	Optimum loading performance of images on Android TV and Amazon Fire TV	Mandatory on Android TV and Amazon Fire TV Not used on iOS
Top Menu Bar TV	Compulsory	Provides the top menu structure for a TV app
Applicaster DSP	Optional	If using Applicaster CMS as a data source
General Provider	Compulsory	For manual data sources, JSONs  etc.
Quick Brick Player	Compulsory unless replaced by a 3rd party player plugin
Quick Brick TV Grid and List Power Cell	Optional	Power Cell to replace standard TV cell in Grid or List component
Quick Brick Hero Power Cell	Optional	Power Cell to replace standard Hero cell in Hero component
Quick Brick Play Next Overlay	Optional	If you want the auto play next video item feature in an app

Step 5 - Configure Styles

Refer to this article

Quick Brick TV Apps - Style Keys

Step 6 - Add Assets for Apps

Apps require assets for such items as the App Launch Icon, the background image, fallback images for cells and many others. Each device (tvOS, Samsung) has their own definitions and exact requirements clearly defined by the device provider. 

Select "Assets"

The following assets are required per platform:

Apple TV asset requirements

Asset Function	Zapp Name	AppleTV name	Apple TV spec	Notes
App Icon shown for user to launch the app	Icon_layer _1 through to Icon_layer_5	App Icon	Size 1: 400px x 240px PNG      (layer 1 no transparency, other layers with transparency)	Apple specify 2 sizes but Zapp currently only has Size 1 defined
			Size 2: 1280px x 768px PNG (back layer with no transparency, other layers with transparency)	up to 5 layers can be provided
Top Shelf Image when app is placed in top row of Apple TV and is in focus	Top_shelf and top_shelf_wide	Top Shelf Image	2320px × 720px (2320pt × 720pt @1x size) 4640px × 1440px (2320pt × 720pt @2x size)	2 sizes required
Splash	Launch	Launch Image	1920px × 1080px (1920pt × 1080pt @1x size) 3840px × 2160px (1920pt × 1080pt @2x size)	2 sizes required No text permitted
App Background image	app_background_image	App Background Image	1920px x 1080px PNG non transparent
Placeholder image when no DSP provided asset images	placeholder and placeholder_3.2 (for hero wide image)	Placeholder	400px x 225px 1500px x 468px
App screenshot	n/a	screenshot_appname01.png screenshot_appname02.png screenshot_appname03.png screenshot_appname04.png	1920px x 1080px 24b PNG (RGB)	App information screen when app is in focus in TV store  4 images must be provided for the app store

Example of Apple TV assets required:

Samsung TV asset requirements

Asset Function	Zapp Name	Samsung TV name	Samsung TV spec	Notes
App icon small		Tizen 4 App icon	512px x 512px png or jpeg, single player	This icon is only used when apps are side loaded onto the TV. Production apps use the logo image files as submitted to the app store
App icon large	App icon 2016 devices - foreground and App icon 2016 devices - background Logo_appname_fg.png and logo_appname_bg.png		Foreground Logo image: 1920px x 1080px 32b PNG RGBA (with transparency) Background Logo background: 1920px x 1080px 24b PNG RGB (no transparency)	This icon is only used when apps are side loaded onto the TV. Production apps use the logo image files as submitted to the app store
App background image	App_background_image_1080p App_background_image_720p		1920px x 1080px and 1280px x 720px no transparency	The App background image is used by the application and needs to be present
Splash when app launches	Splash		1920px x 1080px	The Splash is used by the application and needs to be present

 

Android TV asset requirements

Asset Function	Zapp Name	Android TV spec	Notes
App Icon shown for user to launch the app	tv_app_banner	Large: 1280px x 720px JPEG or 24b PNG (no transparency) Small: 320px x 180px JPEGF or 24b PNG (no transparency)	This is found under the asset tab ANDROID TV in Zapp
Splash	tv_splash_image	1920px x 1080px, JPEG or PNG (no transparency)	This is found under the asset tab ANDROID TV in Zapp
App Background image	tv_app_background	1920px x1080px PNG non transparent	This is found under the asset tab ANDROID TV in Zap
Placeholder image when no DSP provided asset images	placeholder Placeholder3.2 (for 3:2 aspect ratio hero)	400px x 225px 1500px x 468px	This is found under the asset tab QUICK BRICK in Zapp
App badge	tv_app_badge	80x80 opaque	This is found under the asset tab ANDROID TV in Zapp Will be displayed with a circular mask over it on the device

 

Amazon Fire TV asset requirements

Asset Function	Zapp Name	Fire TV Spec	Notes
App Icon shown for user to launch the app	tv_app_banner	1280px x 720px PNG no transparency
Splash	tv_splash_image	1920px x 1080px, JPEG or 24b PNG no transparency
App Background image	tv_app_background	1920px x1080px PNG no transparency
Placeholder image when no DSP provided asset images	placeholder Placeholder3.2 (for 3:2 aspect ratio hero)	400px x 225px 1500px x 468px

 

LG TV asset requirements

Asset Function	Zapp Name	LG TV spec	Notes
Launcher large icon	largIcon	130x130 png	App launcher icon. Only used for local app install and testing. The store uploaded icon is used for live apps
App launcher Icon	icon	80x80 png	Used in system notifications Only used for local app install and testing. The store uploaded icon is used for live apps
App background image	bgImage	1920px x 1080px no transparency	Only used for local app install and testing. The store uploaded image is used for live apps.
Splash when app launches	SplashBackground	1920px x 1080px no transparency	Only used for local app install and testing. The store uploaded image is used for live apps
Placeholder image	placeholder	400px x 225px	When no image in the DSP

Step 7 - Build the App

👉Click the green build arrow to start the App build process.

This will take approx 15mins

Step 8 - Download and install the app

The app will be available for download when the build process is finished. The download icon will appear.

👉Click the download button and store the file on your PC

Installation process on the different platforms:

The install process for each device are detailed here:

• Apple TV Installation Guide
• Samsung TV Installation Guide
• Android TV Installation Guide
• Amazon Fire TV Installation Guide
• LG TV Installation Guide

Step 9 - Configure screens in UI Builder

When an app is created it will automatically have a HOME SCREEN within the build. Other screens can be added as necessary and navigation components added.

Below are typical screens showing the key elements that can be constructed within a screen

Adding Screens

1. Create new screens as per any other Applicaster App
1. Select SCREENS in UIB 
2. Select Add Screen
3. Select General Content type

Adding Content to Screens

1. Create feeds as per any other Applicaster App
2. Add a content style (Hero, Grid, Rail, List) to the Home Screen and connect to a feed

Building a TV menu

See this article: Building a Quick Brick TV Menu

Using the Screen Picker

See this article:  Quick Brick TV Apps - Using Screen Picker / Side Menu