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 |
1920px x 1080px |
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
- Create new screens as per any other Applicaster App
- Select SCREENS in UIB
- Select Add Screen
- Select General Content type
Adding Content to Screens
- Create feeds as per any other Applicaster App
- 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
Comments
0 comments
Please sign in to leave a comment.