3

I'm trying to follow Material Design as best as possible, and I think on one page of the guidelines it says not to use nested tabs. But I'm finding it pretty difficult to find an alternative.

In my scenario the home tab has a feed for both "Upcoming" and "Popular" items, which seems best laid out in tabs to me. The top 3 tabs on the other hand have varying degrees of importance -- the first is the most important, the second is sort of, and the third one is the least important (just overflow with Settings, "About" etc).

Then I also have a pull up map--only visible for the two nested tabs--on the bottom that displays the items shown from these tabs in a map (its location also sort of against material design since it interferes with navigation button accessibility).

There doesn't seem to be enough space for the content, and the issue is sort of in two parts:

  1. The nested tabs

  2. The bottom map

Possible solutions

I thought of putting the tabs in a navigation drawer, which would be okay, but that wouldn't increase the space for content since I'd have to put a hamburger button on top of the tabs anyways.

I thought of making the map a tab, but that wouldn't be good since this is a ViewPager and the swipe would interfere with the map.

Not sure what else I could try doing...

enter image description here

2

The UI is right now consistent and improper. Considering user's mind, he will have to run on the screen to perform various actions.

The best option to be applied here is your first point. i.e. Hamburger icon on left side. So that the user can have access to all the options in one go.

e.g. You will put everything under hamburger icon but for Home button the UI will be a tabbed one.

  • But this still wouldn't solve the issue of space for the content. I'm looking for a solution that would also maximize space allocated to the ListView's items. – u3l May 28 '15 at 12:12
2

Not suitable for every app, but here's a suggestion:

enter image description here enter image description here

0

You can try adding spinner instead of sub tabs like in following image. Here you can give even more options.

enter image description here

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.