Quick Brick TV Apps - Building a TV Menu

Permanently deleted user
  • Updated
Follow

Building a TV menu

The TV Top Menu consists of 3 types of elements


mceclip42.png

  • Left image is used for the App logo
    • Total image size must be 300px x60px png. This can include any transparent background for when the actual logo is smaller than this total size
  • Screen Menus is used to add screen names for the MENU navigation to link to specific content screens
  • Right action button is used to add icons or text, for instance to connect to a settings screen
  • The following are the maximum items available in the menu
    • 7 items total max
    • 1 x left image max
    • 1 x right image max
    • This leaves 5 to 7 screen menu items max depending on whether left and right images are used
  • Other rules to follow:
    • Do not assign the same menu item to more than one location e.g. have SETTINGS as both a Screen Menu item and via a Right Action item
    • Max characters in each Screen Menu title = 15. Any longer will be truncated with ...
    • Max font size for each Screen Menu item before it exceeds the available space will depend on how many Screen Menus are used and how many characters per item

👉To create the MENU

 

  1. In UI Builder got to Navigation then select + Add Navigationmceclip43.png
  2. Select the Top Menu Bar TV option only

mceclip44.png

  1. Once added, select ‘Top Menu Bar TV’ in the UI Builder panelmceclip45.png
  2. Click add an item to the Menu

 

Select Add Item

mceclip47.png

And choose from the available menu items

mceclip48.png

 

  • Left image 
    • When selected, In the UI Builder right panel, upload an image to use for the logo

mceclip49.png

 

  • Screen
    • Title the MENU items for each screen in the UI Builder right panel
    • Link to the appropriate screen with TARGET
    • Add a SCREEN component for each of the screens you want to link to from the menu
    • When a SCREEN is selected it is further edited in UI Builder

mceclip50.png

    • Edit the colours and fonts for the SCREEN titles in the menu
      • In focus, out of focus and underline attributes can be assigned

mceclip51.png

Item Controls
Title Color Controls the color of the title and summary text that appears at the top of a connected screen
Title Font Size Controls the size of the title text that appears at the top of a connected screen
Summary Font Size Controls the size of the summary text that appears in a connected screen
Menu Item Color Controls the color of any text in the Top Menu TV Bar
Menu Item Underline Color Focused Controls the color of the underline that appears under any Menu text when navigating the menu
Menu Item Font Size Controls the font size of text in the Top TV Menu Bar when that text is NOT in focus
Menu Item Font Size Selected Controls the font size of text in the Top TV Menu Bar when that text IS in focus

 

  • Right action button
    • Not in focus
    • In Focus
    • Selected
    • Select either to upload an image to use for the action button, e.g. a setting icon, or give it a title
    • If using an image note the 3 states requiring separate images
    • Link to the appropriate screen, e.g. a settings screen

mceclip52.png

Related articles

Comments

0 comments

Please sign in to leave a comment.