Skip to main content

TV Navigation

Applicaster supports a range of navigation elements allowing to connect to screens or actions.

On TVs the Top Menu bar is supported, along with horizontal and vertical tabs.

tvOS, Android TV, Samsung TV and LG TV.​

Tv Top Menu​

The Top Menu must be used in an app and can contain the following components:

  • A single logo.
  • Screen Navigation Buttons.
  • A single optional action button e.g. for a settings page.

Please keep in mind:

  • Only 1 TV Top Menu can be used in an app.
  • Only 8 items max can be added to the top menu.
  • Very large font sizes and long strings will result in the menu being truncated. Keep menu titles short and font sizes reasonable.

Style the Top Menu​

Top menu styles can be adjusted in different ways: Background image, Color or Gradient.

Color or Background image

If you intend to use an image or a color as a background for the topbar, ensure that you set both the screen top margin and component anchor point to a value of 200, which is the default height of the topbar. This will ensure that the image appears below the topbar. However, if your desired image has a different height, you should adjust the screen and component settings accordingly to maintain proper alignment.

Gradient Color

If you are working with gradient color, you can utilize the same steps as previously mentioned. However, there is an additional option to mask components with large images behind the topbar. To achieve this effect, set both the screen top margin and component anchor point to 0. Doing so will allow you to achieve the desired result.

To avoid displaying gradient colors on components with large images while showing it on other components on the screen, you can activate the option to hide the gradient specifically for those components. For a smooth gradient transition, it is recommended to set the middle gradient position to 60% or higher. There's an option to also add a bottom gradient color.

Style The Menu item​

Screen items for navigation buttons only support text at present.

  • Set Data Target to the screen for that Navigation Button and edit the title. (By default the menu will set the title to be the name of the screen selected though this can be over-ridden).
  • Set Screen Presentation to default.
  • Set Button State to Title.

Tv Menu Action Button

  • Either title or icons that also indicate focused and selected states can be chosen
  • In case with icons, select Image for the Button State.
  • Icons should be 40px by 40px in PNG format. Make sure that the assets are exported at a resolution of 3 times the standard pixel density (@3x)
  • Set the target screen to launch when selecting this menu item.

Screen picker​

The Screen Picker acts as a vertical side menu or horizontal tabs that can be added to a screen to present e.g. subcategories of that screen. More than one screen picker can be used in an app and attached to their own specific main menu screen. Depending on whether you are using a vertical or horizontal screen picker the styling configuration will vary.

To have a screen picker, first add a new General Content screen. On this screen select New Component and add the Screen Picker component.

note

Once one screen picker is added to a screen no other component type may be added to this screen.

Attach a feed to the screen picker. A Screen Picker may be driven from a Data Source Feed or a Manual Feed to create the list of screens in the picker.

Content in a screen picker may optionally be connected to a further target screen that will launch a new screen presentation when a content item in the first screen picker is selected. This can be used to build nested screen picker structures for further sub-categories.

The screen picker can be styled with respect to:

  • Position on the screen relative to the top and left of the screen (x and y co-ordinates):

  • The gap (gutter) between screen picker items:

  • The width of the seen picker:

  • The font type font weight font size letter spacing line height, per TV platform.
  • The maximum number of lines of text (wrapping) to present in all entries.
  • The focus state method to use i.e text color cell background color text background color text underline or text border and background rounding.
  • 4 focus states exist to differentiate between by styling the screen picker; selected, unselected, in focus and unselected, in focus and selected.

Horizontal Screen Picker​​

When choosing a horizontal screen picker the configuration options are broader. Below you can see the examples on additional configurations:

  • Background styling

Horizontal screen picker can be styled with background color, background image, border. When using a background image, for optimal results it’s recommended to use an image with 76 pixels height and the width of the image should match the width of the screenpicker.

  • Dynamic and fixed width menu type​

Dynamic: This means that the menu can grow dynamically as more/less items are added.

Fixed: a specific width can be assigned to the menu.

  • Dynamic or Fixed item type​ - The width of the item can be either dynamic or fixed:

Dynamic: the item width is based on the size of the title and/or image (plus any paddings etc). This means that most items will be different widths within the menu.

Fixed: a specific width can be assigned to the item so that each item will be the same width regardless of its contents width.

  • Alignment​

Left, center, or right alignment is possible when items do not exceed the screen width. Please note that the alignment is for the screen picker container:

  • Various component styling​ - Assets can be added to each item in the horizontal screen picker items.

note

Make sure that the assets option is enabled and relevant data key values are added in the feed:

Roku​

Coming soon