2

Prototyping a new dialer app based on Material's framework and style guide. Side navigation is not an option. Instead, I would like to use bottom navigation for 4 main pages/features.

  1. Recent Calls
  2. Dialer
  3. Contacts (Just a button for the sub-pages)

    3.1 All Contacts

    3.2 Favorites

    3.3 International Contacts

  4. Settings

"Contacts" page is actually 3 pages/tabs of 3 types of contact. So my problem is how to display the 3 contact types in the navigation system that suppose to base on Material?

This is the "International" tab example.

International page example

2

You could split them into Categories with the use of Chips just like Google Play Store does.

Take a look at the screenshot below.

categories

How this helps is, that it removes any element of horizontal swiping. Since your question consists of Tabs, it is possible the user is confused to swipe between tabs which are swipe-able and bottom navigation which is not.

Another illusion it creates is space. With chips, you might be taking the same space the tabs would take, but due to the amount of whitespace and distance from the Toolbar, it looks much better than Tabs + Bottom Navigation.

This solution can also have you go a little creative with feature images for speed dials, etc.

P.S. Settings shouldn't be in Bottom Navigation. Use the Overflow menu.

  • 1
    This is a nice solution, but the problem is the user doesn't have only categories, so some kind of additional control is needed (maybe a FAB?). Anyways, +1 :) – Devin Jun 14 '16 at 17:03
  • It depends on how Adi Ben Zion is implementing it. To be honest, the Bottom Navigation is not something I fully appreciate only for the simple reason that it occupies about the same screen estate as a toolbar and could create complications if Tabs and other elements are used – Swapnil Borkar Jun 14 '16 at 17:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.