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
Comments
0 comments
Please sign in to leave a comment.