2

I'm helping porting an iPhone design to Android. My background is Android developer, so I'm trying to create the best possible experience for Android users, but I'm not a designer.

The first problem I'm working on is navigation. As you can see, there are 4 sections, each with 3 subsections

multi section tabbed

I have two main concerns with this design

  1. Bottom tabs in Android are discouraged by the guidelines (Pure Android - Don't use bottom tab bars). Users are not accostumed to it, plus it will make development harder, and we are short in time.

  2. On small devices, there'll be little space left for content. This design is aiming at iPhone 5S.

The direct translation following Android Guidelines would consist in moving the sections to a Navigation Drawer, but then the use of Navigation Drawer + Tabs is discouraged and, apparently, not supported by Action Bar. See Roman Nurik's comment (https://plus.google.com/u/1/+DavidTaSmoochibi/posts/8dWEkFcbTFX). Google Play does use Navigation Drawer + tabs, but they use tabs for categories.

Am I missing other options?

What's the usual approach to multi-hierarchy navigation? I'm sure it's a common problem, but I've found little information about it.

Thanks!

Related questions

  1. How to structure Android app navigation with many levels?. This is one is specially relevant but it's 2 years old. Things have changed a lot.
  2. Porting an Iphone app to Android - what are the ActionBar considerations?
Improve this question

2 Answers 2

Reset to default
1

For the main sections you could use a spinner navigation in the Action Bar.

So the active/visible section would display as a spinner rather than a static title. The sub sections would make sense to remain as tabs as you have mocked up.

This pattern is seen in many apps including a few Google ones.

Spinners http://developer.android.com/guide/topics/ui/controls/spinner.html

e.g.

enter image description here enter image description here

Improve this answer
2
  • thanks, that's a good option, tho I feel it's less appealing.
    – Maragues
    Commented Jul 30, 2014 at 12:02
  • I had a similar problem as yourself in the past and this was the best solution I could find. It's more appealing than having two rows of tabs :)
    – Dave Haigh
    Commented Jul 30, 2014 at 12:05
0

I would suggest an Expandable List View in addition to tabs:

Expandable List view example
(source: bogotobogo.com)

So, you'd use the tabs to let the user select the section, and represent the subsections with group headers in an ExpandableListView.

Now, if your data does not lend itself to this kind of segmentation, I'd suggest a section landing page, or default to one and let the user change it in the overflow menu or navigation drawer, and make the subsections the top-of-screen tabs (in fact, google would probably suggest the latter, according to their "Decide for me, but let me have the final say" rule in their design guidelines: http://developer.android.com/design/get-started/principles.html).

Improve this answer
1
  • Thanks sonictt1. Anyway, I don't see the Expandable listview working for me.
    – Maragues
    Commented Jul 31, 2014 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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