In the previous article, we saw how to set and configure the Toolbar for our app.
This article will show how we can configure and promote different Toolbar/navigation bars, for different screens in the app.
This article explains how to configure the Navigation of your app on a Screen level (Navigation is the upper bar of your app, below the device Status bar).
This allows each and every screen to have it's own independent and different navigation.
*Important Note* Screens that are coming from Plugins and are not standard UI Builder screens, will Not have this option available. These screens (Such as EPG, Favourites, Downloads, Pre-Hooks, Screen plugins, etc..., will always display the navigation which is marked as default).
i- Android - From SDK 7.4.14 and above
ii- iOS - ALL SDKs
i- In order to use the Navigation-per-Screen option, you first need to have More than one navigation bar, created in your Layout:
*Note: Remember that the Navigations are added Per-Layout. This means that each and Every Layout in the UI builder, will have it's own Navigation settings.
When creating the new Navigation Bar, you have the ability to mark it as the "Default Navigation" of the app, by selecting it in the right-hand side, under the "General" section:
ii- Set the default navigation bar with the "Star" (see image below) -
The navigation bar with the star is the default one.
iii- Then, the screen where you wish to change the Navigation Bar from the default, and select the new navigation you want to use:
--> Screens where you did not select a special Navigation, will use the Default Navigation.
i- Main Navigation Bar -
Let's say I took the main "Navigation Bar" in the UI builder, and marked it as the Default Navigation.
I then added to it the "Chromecast" and "URL" items (and added to the URL an icon that looks like the letter "Y")
Once I open the App, I will see this Default Navigation:
ii- Secondary Navigation Bar -
Now, I created a secondary "Navigation Bar2" in the UI builder, and added it to a specific screen in the app.
I populated thisNavigation Bar 2" with a "Live" button (with an icon that looks like a camera), and a "URL" that opens Google Analytics, with the icon of Google Analytics.
Once I open the this specific screen that it using "Navigation Bar 2" instead of the Default Navigation Bar, I will see the following:
Configuring the Side Menu
Till now, we have learned how to Configure the Toolbar Navigation for our app, and even how to set a different Toolbar per screen.
In the following article, we will learn how to configure the Side Menu navigation in the app.
For more information on how to setup and configure the Side Menu in the app, click HERE.