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 ?
There are a couple patterns you can use here; I would recommend looking at the following articles for ideas:
Designing Effective Navigation: Descendant and Lateral Navigation, specifically the discussion of tabs and lists/grids/stacks/carousels. I'd also look at horizontal paging (swipe views).
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? 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 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). Feb 29, 2012 at 5:49
1Ah 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. Feb 29, 2012 at 5:57
PagerTitleStripfrom 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. Feb 29, 2012 at 20:53
1) Add location breadcrumbs at the top of the screen to indicate where in the hierarchy you are.
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.
Android phone settings would be a good example here. 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. Feb 26, 2012 at 14:27
Also I am trying to display data at one single glance as much as possible. Feb 26, 2012 at 14:34
2I 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. 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.– dnbrvFeb 28, 2012 at 0:51