Roku - Top Menu

Introduction

A Top Menu can be added to an app and each menu item linked to screens.

Plugin

Ensure these plugins are in your app before the app is built

Add the Top Menu

Go to the Navigations Tab in UI Builder

Select Add Navigation in the Left UI Builder Panel and add the Top Menu Bar TV (Roku)

Configure Top Menu

The top menu can be configured in the Right UI Builder Panel.

Layout settings

Visible: Toggles the entire menu of or on - all screen items and left and right images

Menu Items Visible: Toggle the screen items in the top menu on or off. Left and right images will remain.

Items X: The position of the first menu item from the left of the screen in pixels

Items Y: The vertical position of the menu from the top of the screen in pixels

Menu Spacing: the spacing between menu items in pixels

Menu Gradient

A gradient asset can be placed behind the top menu to make it stand out.

Gradient Image: Use the default asset or upload your own from assets bundle. Roku - SDK Assets and Assets Bundle Upload Plugin

Gradient Width and Height: Control where the gradient starts to apply on the screen in pixels.

Behaviour settings

Show Normal Items:

Is Focusable: Menu will be focusable when pressing up on the remote control

Is Options * Button Active: If enabled allows direct navigation to the options menu if * is pressed on the remote control

Text Group Settings

Select Font type, size and color options for

- Menu text not in focus

- Highlighted (in focus) menu text

- Selected (Footprint) menu text

Also the menu underline colour can be set here

App Settings

There are some app-wide settings controlled in the top menu

Spinner Loading Color: The spinner color on screen loading

App background color: Set an app wide background color

Application Background Image: This asset is loaded intop your app via the asset-bundle uploader.Roku - SDK Assets and Assets Bundle Upload Plugin

Add Items to the top menu

3 types of item can be added to the top menu

• A left image
• A screen navigation button
• A right action button (e.g. setting page)

Ensure these plugins are added to your app

Add items to the Top Menu

Go to the Navigations Tab in UI Builder

Select the Top Menu in the left UI Builder Panel

Select Add Item in the Left UI Builder Panel and add your desired menu item

Screen Navigation Button Settings

Name your Menu item

Set the target screen for it to connect to (the required screen must first have been created in UI Builder)

Select whether the Navigation item displays the name or an icon. If an icon, upload the necessary assets 40px x 40px

Left Image Settings

Used for App brand logo

The icon is loaded from the asset bundle plugin Roku - SDK Assets and Assets Bundle Upload Plugin

Right Action Button Settings

Target: Set the screen that will launch when this button is accessed. This screen must have been created in UI Builder already.

Icons: The icons for the 3 states (out of focus, in focus and selected) can be loaded directly here or the toggle can be used to select the asset-bundle Roku - SDK Assets and Assets Bundle Upload Plugin

Title: If enable the title of the right image will be displayed in the menu

Show Icon: If enabled, the icon will show

Item X and Y: The horizontal and vertical position of the action button on the screen in pixels

Set the Image size that has been uploaded as an icon (all 3 images must use the same size).