Android UX - When to use Bottom navigation and when to use Tabs

Question

I look at Material Navigation pattern on material.google.com It shows that android officially has Bottom navigation for Android UI

Before March 2016 Android seriously put the page switch on top tabs or Drawer but today the guideline allow UI Designer to choose what we want.

What is criteria for UX designer to choose between Tabs and Bottom navigation? It makes sense for Material Design on iOS but Photo App also use Bottom tab on Android

So, If my app includes 3-4 main views, what should I use? Tabs or Bottom navigation?

Thanks

Answer 1

Keep navigation grouped together.

Keep the navigation elements together to establish consistency across the application. So if you have navigation elements besides the tabs at the top, make the tabs sub-headers. If the tabs are the only navigational elements, then choose what makes the most sense given the context of your application, just make sure to be consistent throughout the application as to where they are located.

As far as "choosing what makes the most sense given the context of your application", look closely at the Tabs and Bottom Navigation Bar sections of the Material documentation you linked.

Tabs:

Tabs allow users to quickly move between a small number of equally important views.

Appropriate for these hierarchies:

• Parents with embedded child views
• A group of sibling views

Recommended for:

• Frequent switching between views
• Apps with few top-level views
• Promoting awareness of alternate views

Bottom Navigation Bar:

A bottom navigation bar allows users to quickly move between a small number of top-level views.

Appropriate for these hierarchies:

• Parents with embedded child views
• A group of parent views

Recommended for:

• Frequent switching between views
• Apps with few top-level views
• Promoting awareness of alternate views
• Mobile devices, as bottom navigation is located in a more ergonomic location

So the context in this situation is: what content is being presented when selecteing the different tabs? So if the different pages to be displayed are similar, in that they present similar content, however with a different view, then sub-header tabs work because each tab has equal importance in relation to the other tabs. If the different pages contain very different content, say a tab for settings and another tab for favorites, you would use a bottom navigation bar, as the two are parent elements. So the context is the relationship the content of each tab has with one another.

Answer 2

Use tabs:

If there are fewer than three destinations, consider using tabs instead.

Use Navigation drawer:

If your top-level navigation has more than six destinations, provide access to destinations not covered in bottom navigation through alternative locations, such as a navigation drawer.

Don't combine Bottom bar and tabs:

Be cautious when combining bottom navigation with tabs, as the combination may cause confusion when navigating an app.

Use Bottom bar only on mobile:

Bottom navigation is primarily for use on mobile. To achieve a similar effect for desktop, use side navigation.

So:

0 - 2 : use Tabs

3 - 5 : use Bottom bar or Tabs

5+ : use Navigation drawer or/and Tabs

Now the doubt is in the 3 - 5 for mobile. I believe there is no correct answer here, and it might be true as we can see Google Material apps using both Tabs and Bottom bar indistinctly (apparently).

A difference I noticed and this might make sense depending on the case is:

Tabs make it easy to explore and switch between different views.

vs.

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

(Emphasis mine).

---

References:

Material Design - Bottom Bar

Material Design - Tabs

Answer 3

The argument "ergonomic location" falls flat on it's back since proper tabs will also allow horizontal swipe as navigation. So I cannot see any good use for bottom tabs. Also they clash with the existing navigation buttons on Android. It's a complete fail in my book...