Bottom Tab Bar

Owned by Matt Birtch
Last updated: Oct 13, 2021 by Marina Karpenko (Deactivated)
3 min read

Design Complete

https://mattermost.atlassian.net/browse/MM-32757

Figma Design

Figma Prototype

Figma Component File

Background

As part of the new Mobile App design for v2, a new bottom tab bar is introduced. This new primary navigation element intends to accomplish the following goals:

  • Leverage a navigation pattern that users are very familiar with

  • Provide more obvious, faster access to other key functions of the app

Bottom Tab Bar UI

iOS

Android

Use 24pt icons as glyphs in a tab bar (navigation bar).

Bottom Tab Bar in Context

iOS

 

 

 

 

Android

 

 

Themeable status bar in android is not a hard requirement, but a nice-to-have

 

 

Tab States

Default

With Mention Badge

With Unread Badge

Active

Behavior of Loading Tab Bar Screens

  • Home will always be mounted

  • Search will be offloaded when not active and no results

  • Recent Mentions will be always be offloaded. When active, display data stored locally, lazy load new data if new data exists

  • Profile screen will always be offloaded when inactive.

Conditions for Mention Badges

The Home Tab is the only Tab that displays Mention Badges. The number displayed in the badge is an aggregate number of all mentions that display on the home screen. This includes:

  1. Mentions displayed for channels in the active team

  2. Mentions displayed on any inactive team avatar

  3. Any mentions displayed on inactive servers.

NOTE: We will only display mention or unread badges on the Home Tab when it is not the current active tab

Hiding the Bottom Tab Bar in Channels

Once a user is within a channel, the bottom tab bar slides off the bottom to save room for the channel content and the Message Input component.

For Tablets, however, the bottom tab remains at all times since channels are in view at the same time as the sidebar.

Tablet Layout

Landscape

 

 

 

Portrait