In this article we will proceed to the next phase, which is setting the Navigation of the app, both from the Toolbar (Formerly known as "NavBar"), and from the Side Menu.
(The Toolbar /Navigation Bar, is the upper bar of your app, below the device Status bar).
*Note: For more information on Navigations Per-Screen Navigation, click HERE.
*Note: For more information on configuring the Side Menu, click HERE.
Configuring the Navigation of the App
Configuring and setting the navigation of the app, is achieved via the "Applicaster Toolbar" Plugin:
The Applicaster Toolbar plugin is used for both Android and iOS platforms on all device sizes (iPhone 5 and above, iPads, Android smartphone and tablet fragmented device sizes), allowing customisability, including RTL mirroring.
The Applicaster Toolbar plugin is a built-in plugin, and you will see it for every new app you will create (it replaces the former "Navigation Bar" plugin, which had a similar functionality)
New apps / Existing apps
- All old UI Builder apps, will still use be default the Legacy Navigation Bar, which is configured in Applicaster2 CMS.
- All New UI Builder apps, will use by default the new "Applicaster Toolbar" plugin, which its configuration is described below.
- In case of moving an existing app which is using the legacy navigation bar to the new toolbar plugin, please do the following:
- Duplicate the versions (iOS and Android) of your app in which you would like to use.
- Go to the General Settings of your new version and check “Use UI Builder Navigation Bar”. That would enable the configuration of the new navigation bar plugin, and ignore for this version any configuration done in Applicaster2 CMS.
Step by Step Customization
- Navigation's Tab - Go to the Navigation's tab:
- If you need to add a navigation, click on "Add Navigation" (on the bottom), and then select "Applicaster Toolbar" from the popup screen:
- If you want to configure an existing screen, select it from the Left Pane menu:
- Left Pane - On the left pane, you could add up to 3 items to the navigation bar, which will be positioned on the right hand of the navigation bar, for a LTR app.
- Canvas - The canvas on the center shows the default navigation bar chosen, with a center alignment. The preview is an illustration and not an accurate view of the design. Please mind the preview is not interactive with each change done on the right Inspector.
- Right Pane - The Inspector - On the right inspector you can customize the general parameters of the navigation bar, as well as each item that are added, once the item is selected.
Below is an explanation for each label:
Default Navigation -
Once toggled-on, this means that should a specific Navigation bar not be chosen for a screen, the screen will make use of this default navigation.
Bar State - The navigation bar has 3 states: On Top, Overlay, Hidden.
i- On Top state: Is when the screen starts where the navigation bar ends. The navigation bar in this state can receive either an image or a color, but not an opacity, since there’s nothing underneath it to be shown.
ii- The Overlay state: Is when the screen starts in the edge of the screen, in a layer underneath the navigation bar. This state allows color or image and opacity of course, to create the effect of see through.
iii- The Hidden state: Is a state where there is no navigation bar.
Background Type - You could choose to have an image or a color background for the bar.
- Color - As mentioned previously, an opacity cannot be applied on the bar on the On Top state.
- Image - The image is designed to be used for vertical gradient, add a 3px x 132px image, which will be stretched throughout the bar. Note this is a 3x asset for bigger devices (assets that are 3 times bigger than a base size that is used for a certain smaller device). These assets will be resized for smaller devices.
Logo Display -
There are 3 states of how the logo and the titles appear on the navbar:
- Logo in All Screens - The logo will appear in all of your screens
- Titles in all screens - The name of the screen will appear on the navbar of each screen.
- Show Logo on Home Screen - You could allow having the logo on the home screen only, by switching the toggle that appears in this option.
- None - Nor logo nor titles will appear on the navbar.
Should you select the Logo Display to the state of "Titles in all screens", additional relevant configuration options shall open below:
iOS Font - Choose the fonts that will appear once there’s a title on the navbar. The fonts available are system fonts and fonts that were uploaded in the General Settings of the app.
Android Font - Same as above, but for Android.
Title Color - The color of the title on the navbar, applied for both platforms on all devices.
Smartphone Font Size - Smartphone and iPhone.
Tablet Font size - Tablet and iPad.
Alignment - The two available styles are Center and Left alignment. Each one of them allows 3 links on the right hand, although we recommend not to have more than 2 in the Center style bar.
Hamburger Icon -
Note that you will see both styles also without a “Hamburger icon”, depending whether you have chosen a menu plugin that requires the hamburger button on the Toolbar. This button is not manually configurable, but auto appearing.
i- Logo - The logo size you can upload can vary in width with a maximum of 132px height. This is a 3x asset. An asset that is bigger in height, will be cropped from top and bottom.
ii- Back Button - Is seen when entering an inner screen. Size of button: w114 px x h132 px
iii- Close Button - Is seen when entering a new screen. This screen is covering the triggering screen and navbar. Size of button: w114 px x h132 px
iv- Menu Button - Is seen when a menu plugin indicated (in its manifest) that it needs a menu button. Size of button: w114 px x h132 px
Instructions and limitations for menu configuration
The menu / the back button located on the left side of the menu
A menu that the logo is located near the `nav-button` on the left.
A menu that the logo is aligned to the center.
A list of optional buttons located on the right of the screen.
- Menu limits where calculated according to the the smallest mobile device Applicaster supports - iPhone SE (320x44dp).
- Resolution was set to match the heights resolution devices Applicaster supports (3x).
Each item is a button on the Toolbar. You add them from the left pane.
- The Required Height of the assets, must be h132 px
- It is recommended that the `Back Icon` width will have the same width as the `Menu Icon`. ie: 132x132 px
TESTING YOUR ASSETS:
You can test your assets, by uploading them to the following online-tested:
This tested will provide a fairly accurate projection of how the asset will look in different devices with different screen resolutions.
Of course, this does not come to replace a test with an Actual build on an actual device!
ITEMS LINKED TO THE TOOLBAR:
There are currently 7 items that can be linked from the Toolbar, see below. In the future we will add additional items, they might be structured differently:
- The web link will open up in the Applicaster web view.
- The URL scheme screen, will open up the way the screen is defined to be displayed in the URL scheme itself. Note that if the screen is pushed, the current navigation bar will be apparent, and the button for that URL scheme screen will be active, hence a non desired loop behavior will occur. Avoid triggering a screen with a url scheme that is displayed in a push manner.
- Screen - The Screen item will offer a choice to target a screen from the existing ones. When choosing a connected screen, another dropdown is prompt to choose the feed which will populate the connected screen.
- URL - The URL item enables triggering a web link or a screen that is triggered via a URL Scheme:
- Chromecast - Choose this item when you’d like to Stream your favorite content to your HDTV. Here you can customize the color of the asset, that is a default asset and irreplaceable one. Note that the Chromecast App ID must be set up in the General Settings of the app versions (both on Android and on iOS). If you won’t have that set up, the chromecast icon will not appear. Don’t forget that any change to the App ID in the general settings will require a new build.
- Live Drawer - The Live Drawer button will open up the Live Drawer White Label screen, which lists the live and future programs per channel. It can show up to 7 channels. The configuration of the channels and programs is still done in Applicaster2 CMS, instructions can be found in a few articles: Live Channel configuration, Add multiple channels.
There is currently one Toolbar navigation plugin, which is included in the first build of your app.
Should you add a new Navigation Bar (and thus, a NavBar Plugin) to your app, remember it is required to build the version for any new plugin you add.
To avoid building the version each time you swap between plugins, add the desired ones to your version by swapping them in the builder, or by adding them in the plugin section in zapp, and create a build, when they are all included. Then you could change and preview plugins without a build.
RTL (Right-to-Left) -
The Navigation via the App Builder currently Does NOT fully support RTL.
When an app is defined as a RTL (in general setting), the 2-level menu will be partly mirrored in its configuration.
- Text - RTL alignment
- Note that the Side Menu Drawer will still be opened on the left hand of the app.
Navigation per Screen -
In this article, we have learned how to set and configure the Navigation bar for our app.
The next article will show how we can configure and promote different navigation bars, for different screens in the app.
For more information on Navigations Per-Screen Navigation, click HERE.
For more information on configuring the Side Menu, click HERE.