Configure Quick Brick Mobile Bottom Tabs

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.