7

I am trying to find out the best way of representing hierarchical data in android. There are no tree view controls and expandable list views dont work since i can have many levels of hierarchy. I thought I could use the Pulse app view to show data but again that is customised for one level. How best both visually and implementation wise then can I represent hierarchy in android for n levels ?

Improve this question

2 Answers 2

Reset to default
6

There are a couple patterns you can use here; I would recommend looking at the following articles for ideas:

Improve this answer
11
  • Tx. I am using a view pager with tabs + scrollable lists to cut down on hierarchy and display as much data as possible in a single screen. But the prob I have is my top level pager tab grouping might change from one rendition of the app to another. So I feel this will create a confusion to the user. For instance I might have animal, bird, reptile in one rendition and aves, sapiens and plants in another. Is this confusion a real concern? Or are there apps that you know off like this. Also wht pattern is the CNN app(Also what pattern is the CNN app( goo.gl/heoof ) using for the menu?
    – Vrashabh Irde
    Commented Feb 28, 2012 at 6:26
  • Not sure what you mean by 'rendition' of the app, can you elaborate? The CNN app is effectively using scrollable tabs: developer.android.com/design/building-blocks/tabs.html
    – Roman Nurik
    Commented Feb 29, 2012 at 5:43
  • Rendition here implies different versions of the app if you will - I have one apk which will allow me to download content based on what I need. If I need to study about animals/birds, I ll download that content and the tabs become animal,bird,reptile. But if i want to download content about plants I ll download that and my tabs become aves/sapiens/plants(context sensitive menu if you will). I hope you get what I am trying to say. This is only an example(or a lack of it).
    – Vrashabh Irde
    Commented Feb 29, 2012 at 5:49
  • 1
    Ah I see. If you must have a potentially very deep or very dynamic information hierarchy, you may need to stick to drilldown navigation, or somehow annotate/curate your hierarchy when the app fetches the data indicating what kind of UI element to use.
    – Roman Nurik
    Commented Feb 29, 2012 at 5:57
  • 1
    @Vrashabh PagerTitleStrip from the support package will do this, but it doesn't have arrows (arrows are no longer needed per our visual design spec for scrollable tabs). You can also copy the code and mess with it if it doesn't exactly suit your needs.
    – Roman Nurik
    Commented Feb 29, 2012 at 20:53
11

Drilldown navigation:
enter image description here

See also:

Update:

1) Add location breadcrumbs at the top of the screen to indicate where in the hierarchy you are.

enter image description here

2) Don't let the new level cover the previous level. Let some pixels of each level be reachable. In this example you can just let the menu icons and the profile pictures (from the first two levels) be visible.

enter image description here

Improve this answer
6
  • Android phone settings would be a good example here.
    – Roger Attrill
    Commented Feb 24, 2012 at 9:08
  • @Jorn Thanks! This was what I initially built and rejected because a. I can have 6 levels of hierarchy Drill downs can become really painful b. I want to visually represent data in a way it stands out c. And I am building a tablet app so there is more room to work with. Can you think of better ways to do this.
    – Vrashabh Irde
    Commented Feb 26, 2012 at 14:27
  • Also I am trying to display data at one single glance as much as possible.
    – Vrashabh Irde
    Commented Feb 26, 2012 at 14:34
  • 2
    I still believe that this approach would work fine. As @Roger mentions, "Android setting" is a good example. You can also try for yourself with a Dropbox app (dropbox.com/android). In Dropbox you can browse several levels represented by folders. I have two additional suggestions to make the drilldown navigation better. 1) Add location breadcrumbs to indicate where in the hierarchy you are. 2) Don't let the new level cover the previous level entirely, but let the leftmost part of each level be reachable (eg: MyPad). I'll update my answer to clarify with some examples.
    – Jørn E. Angeltveit
    Commented Feb 28, 2012 at 0:37
  • 1
    @JørnE.Angeltveit: Yes, Miller columns are the solution. However, pure Adnroid rejects end-of-line carets (last item on the page), which is a rather strange decision but, nonetheless, it's the appropriate design pattern.
    – dnbrv
    Commented Feb 28, 2012 at 0:51

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.