Roku - Screen Picker

Introduction

The Screen Picker is a plugin that will enable the addition of a side menu within a screen. The styling of the Screen Picker menu items is quite flexible to perform as

• Focusable Buttons
• Focusable Text
• Mixture

If you are used to using the screen picker in Quick Brick Apple TV, Android TV, Samsung and LG apps the major differences for Roku is

• 5 items maximum
• The Roku screen picker is also a single level - you can't have nested screen pickers

Installation

Ensure the Picker Screen (Roku) plugin is added to your app before building.

 Configuration

In UI Builder (Zapp Studio) add a screen of type Picker Screen (Roku) 

Layout styles

Button X and Y:The position of the screen picker group from the top and left of the screen in pixels. BE sure to observe TV overscan safe-area principles https://developer.apple.com/design/human-interface-guidelines/tvos/visual-design/layout/

Button Spacing: The gap between the side menu group when background color is enabled as a button highlight

Button Width and Height: Width and Height of the buttons when background color is enabled as a button highlight

Menu Direction: A vertical stack or horizontal row

Content X and Y: The position of text inside the button area

Button-Screen links

Manual configuration: Assign up-to 5 already created screens to a slot in the screen picker list and give it a title. Up to 2 lines of text are supported.

Feed configuration:When using a feed to co fogure the screen picker, the feed drives the number of buttons,  button titles and screen data. You configure the screen you wish the buttons to target, and the picker will do the rest for you.

Title Label Group

This style group enables a free-form title to be placed above the screen picker items.

It can be styled and positioned with the listed attributes below.

Show: Enable or disable the title

Text: Enter the text to be displayed

Position X Y: In pixels Relative to the alignment settings

Width, Height: In conjunction with the background colour to define a background size

Max lines: number of text lines to use

Horizontal / vertical align: Fix the title position relative to the screen picker buttons

Font settings: Font, size, color

Menu Button Group

This style group configures the screen picker. Choose to have buttons or just focusable text (see images at top of article)

• This group configures the background and text for non-focused state
  • Align
  • Font
  • Font Size
  • Font Color
  • Background color or image (for images see this article Roku - SDK Assets and Assets Bundle Upload Plugin
• This group configures the background and text for in-focus state
  
  • Highlighted Font
  • Highlighted Font Size
  • Highlighted Font Color
  • Highlighted Background color or image
• This group configures the background and text for the selected state
  • Footprint Font
  • Footprint Font Size
  • Footprint Font Color
  • Footprint Background color or image

Focus Bar and Background

Enabling the focus bar allows an underline cursor of configurable colour and weight to be shown under each screen picker item as the user navigates with the remote control.

Enabling the background inserts a full screen background color or image to the entire screen. For image upload see Roku - SDK Assets and Assets Bundle Upload Plugin