Skip to main content

Mobile Navigation

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

On mobile, side menus, bottom tab bars, and in-line horizontal tabs are supported, in addition to a customizable top navigation bar with action buttons.

Every app must have a navigation bar that consists of a logo and action buttons such as back button, menu button and close button. You can add a Chromecast button or link to any screen, such as search, via the navigation bar. It's also possible to create multiple navigation bars and associate them with specific screens.

Configuration

Go to the Navigation section of the Studio and choose the Navigation Bar.

Modify the nav bar settings according to your needs. Please note the following:

Default navigation - Select to make Navigation Bar the default navigation to apply to the app vs any other custom designed navigation plugin.

Logo Display - The logo can be displayed on all screens, or only on the home screen. In the latter case, the name of the screen is shown instead of the logo.

On the Assets section, upload the relevant assets according to the following instructions:

Logo - Please upload a logo in the PNG format with dimensions of 128 px by 44 px, and ensure that it is exported at a resolution of 3 times the standard pixel density (@3x). Use transparent background to fill any unwanted space and make logo fit available size.

Assets - The size should be 38px x 44px and exported at a resolution of 3 times the standard pixel density (@3x).

Additional Action Buttons - To link a screen, click on the +ADD ITEM button and choose "Screen Navigation Button".

To add Chromecast, please read here

Side Menu​

A Side Menu is used to navigate to main screens within the app.

Configuration

When creating a new layout, side menu is a added by default. To style it and add items, just go to the navigation section of the studio and choose side menu.

Modify the side menu settings according to your needs. You can change:

  • the background color of the menu and each item in the menu.
  • font family, color and size.
  • color for selected and unselected state of menu items.
  • add any icon asset on the right of each item. The asset needs to be in PNG format, size: 40px x 40px and exported at a resolution of 3 times the standard pixel density (@3x).

Attach screens to the Menu​

Click on the +ADD ITEM button and choose the item you would like to add.

Your new item will appear on the left panel. Choose the new item you just added and set its name, icon and screen target.

note

The name that you set for the screen will show up in the side menu.

Bottom Tabs​

Bottom Tabs acts as a navigation menu and can display one to five menu items at the bottom of a screen. Each menu item is represented by an icon and an optional text label.

Configuration

Go to the Navigation section of the Studio and choose the Bottom Tabs.

Modify the bottom tab bar settings according to your needs. You can change:

  • Background color of the bottom tab bar, top border color and thikness, font family and size.

  • Upload 40px on 40px assets for item icons. Make sure that the assets are exported at a resolution of 3 times the standard pixel density (@3x)

  • Ensure that the toggle to display tab titles is enabled if you wish to have items portrayed with images and titles.

  • Add items to the bottom tab bar that will represent screens. You can do so by clicking on Add Item in the right panel. Each item will represent a screen in the bottom tab bar.

  • Each item must have assigned target screen. The item's name will be automatically retrieved from the screen, but you have the option to modify it and the edited name will then be displayed as the title.

  • Enter each item, change the button state to "image" and upload assets. For each item, switch the button status to "image", and then upload the corresponding assets.The section to upload assets will only appear if you chooose option image at the top of the right panel.

Tabs​

Tabs represent inner screen navigation and allows users easily navigate content grouped by any topic, such as show season, music genre, etc.

Configuration

In order to add tabs, select Add Screen and then choose Tabs.

Select the screen in Studio and configure the Tabs in the right hand panel. Note the following:

Display Mode There are three modes that can be chosen when using the tabs component.

  • Fractional - tabs are equally distributed across 100% width of the screen.

  • Fixed - all tabs have the same width which is defined by the user.

  • Dynamic - tabs have different widths based on text label width.

Data source

Assign data source on tabs screen that will include the type value for the screen inside the tab. In the example below the type value is season_generic. This value opens the screen that is set in type mapping. For more info on how type mapping works, check out this article.

  "entry": [
    {
      "extensions": {
        
      },
      "id": "season-1",
      "title": "Season 1",
      "type": {
        "value": "season_generic"

Components Container (above tabs) - you can add one component above the tabs by adding this component to the screen, selecting cell style and assigning data source to it.

To ensure that the tabs remain attached to the navigation bar while scrolling the content upwards, activate the Sticky Tab Bar option.

Tab design - Tabs and its' contents can be styled according to your needs:

  • Text label - text transformation, font family, size, color and spacing.
  • Tab Bar - background color and padding.
  • Tab cell - background color default and active, paddings, indicator bar height and color (indicator is the underline).

Container above the tabs on tablet - Within the section displayed below, you have the ability to customize certain properties for the components located above the tabs, such as padding and background color. Moreover, you can activate specific theme values for tablets if you are utilizing the same layout for both mobile and tablet devices.