Configuring the Android Legacy Toolbar Plugin

Purpose 

This document explains how to configure the Android Legacy Toolbar Plugin, which controls the NavBar UI/UX in App Builder Apps that use the legacy navigation from Applicaster 2, rather than configuring it from the App Builder directly. 

Step By Step Instructions 

• Zapp: 

1. Login to Zapp 
2. Go to menu --> General 
   
3. Uncheck the "Use UiBuilder Navigation Bar" box and click save at the bottom of the screen 
   
4. Go to menu --> Plugin Configurations 
   
5. Search for "Legacy Tool Bar" in the search box in the top left corner --> add it to your version 
   
6. Select the settings option on the plugin 
   
   
   
7. 

You Will see that the Plugin has several configurations that Determine the way the NavBar will appear in the app:

i- hide_toolbar -

When enabled, the toolbar will not be shown at all

ii- filter_out_links_for_inner_screens -

When enabled, link buttons will not be displayed on internal screens. They will still be displayed on the main screen toolbar.

iii- layout_style -

This controls the visual style of the toolbar. It can be selected as:

   a) left_aligned

   b) center_aligned

iv- hide_title -

When enabled, the tile will not be shown on the toolbar

Styling the NavBar:

In order to Style the Background Colour of the NavBar, please enter the "Styling" section for your relevant App Version.

You will see that under the "Top Bar" Section, there is a Key named "Top Bar Background" (top_bar_background), where you can set the colour for Smartphone and Tablet:

1. top_bar_background

Configuring the Side Menu / Back Button Assets in your app:

When using the Legacy Toolbar Plugin, you can control the Canvas Size of the Assets used for the Side Menu and Back Buttons.

By default, the Canvas size and thus, Asset size that can be used, has the Dimensions of 32x32.

You can adjust the Size of the asset in Styles category in Zapp.

Enter the Styles section in Zapp, and Locate the following keys under the "Top Bar" section:
1. top_bar_toggle_image_width
2. top_bar_toggle_image_height