Introduction
Only one navigation type can be added to an app, either the Side Menu or Bottom Tabs. Many apps are designed around the bottom tabs but the main consideration is how many screens will be in your app. Bottom Tabs has a max limit of 5 tabs (screen links) so if more a required then a Side Menu should be used.
Bottom Tabs
Bottom navigation bars display two to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.
The BTB can show from 2 min to 5 max tabs and can be configured as follows.
-
Tab Attributes
- Select to show all tabs as text plus icon or just icon across all the tabs
- iOS and Android text label font, size and letter spacing
- Default font color for when a tab is not selected
- Active font color for when a tab is selected
- Max tab width - set the width between 80 and 120px for the tabs. This can prevent tabs getting widely spaced on tablets
-
-
Bar Attributes
-
Background Color
- Top border thickness and color to show separation between the tab and screen areas
-
Note: These items have not yet been enabled with Bottom Tabs and so their configuration fields in UI Builder are not active.
-
Drop Shadow (iOS): Color, offset, opacity, radius
-
Elevation (Android)
Plugin
Ensure this plugin is added to your app before build
UI Builder
Select the navigation tab
Select ADD ITEM and select Bottom Tabs (QB)
Select Bottom Tabs in the MAIN NAVIGATIONS panel
Configuration
List of configurations & default values for Bottom Tab Bar.
Description |
Name |
Value |
---|---|---|
Bar |
Text Label Toggle (On/Off) |
On |
|
Background Color |
rgba(13, 17, 29, 1) |
|
Android Elevation NOT YET ACTIVE |
0 |
|
iOS Shadow Color NOT YET ACTIVE |
rgb(0, 0, 0) |
|
iOS Shadow Opacity NOT YET ACTIVE |
0% |
|
iOS Shadow Radius NOT YET ACTIVE |
0 |
|
iOS Shadow Offset Width NOT YET ACTIVE |
0 |
|
iOS Shadow Offset Height NOT YET ACTIVE |
0 |
|
Background blur NOT YET ACTIVE |
0 |
|
Top border thickness |
0 |
|
Top border color |
Transparent |
Tab Labels |
Android Font Family |
Roboto |
|
iOS Font Family |
SF Pro Text |
|
Android Font size |
10 |
|
iOS Font Size |
10 |
|
Android Letter Spacing |
0 |
|
iOS Letter Spacing |
0 |
|
Active Font Color |
rgba(4, 153, 207, 1) |
|
Default Font Color |
rgba(137, 142, 159, 1) |
|
Ripple Color (Android) |
rgba(4, 153, 207, 0.15) |
|
Max tab width |
set from 80 to 120px |
Add tabs
When in the Navigation>Bottom Tabs screen of Zapp Studio select Add Item and select Screen Navigation Button. Add from 2 up to 5 buttons
Additional per-button configuration items are:
- Tab title
- Icons for non-selected and selected state
- Note ignore icon field for 'focused' state
- The target screen for the tab
- Whether the screen is to be launched as a default full screen or as a modal
- Note: ignore button state selector - the display of title or title+icon is enabled globally in the Bottom Tab Bar fields (see above)
Default tab styles
Number of tabs
The bottom tab bar can take between two and five items. They are equally distributed across the width of the tab bar.
TB Modes
The bottom tab bar can use icons with or without text labels.
Anatomy of tabs
The form of the tab bar varies slightly between iOS & Android. The height of the bar on iOS is 49pt whereas on Android it is 56dp. The icons should be supplied at 32x32pt for both platforms and at a resolution of @3x (resulting in a 96x96px icon size).
Tap States
iOS tab changes are instant whereas on Android the ripple effect is used to give feedback to the user. Different icons can be used for the ‘Active’ state of the tab.
Types of background
Solid colors can be used for the background of the bar but there are also other options that can be used:
-
Opacity: dropping the opacity of the background color can be used to ‘see through’ the bar
-
Background blur: this can be used to create the 'frosted glass' or 'translucent' look commonly found on iOS apps.
Comments
0 comments
Please sign in to leave a comment.