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

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

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.