How to implement a nested master detail flow on Android?

Question

I have a list, within a list, within a list, and so on. There's about 5 tiers.

It's easy enough to create 5 activities for each list on phones, but what if I want to support tablets as well? So I'd need to work with master detail flow.

However, I can't seem to find any tutorials or information in relations to a nested master detail flow.

Anyway, here is an illustration of what I'm describing:

In the tablet layout, I want the screen to shift 2 tiers at a time. User can advanced to the next tier by selecting a list item from the right tier. To go back to the previous tier, user can tap the back button.

Any idea how I can achieve this?

Answer 1

After a full day scouring the internet, I finally found a solution. To get a "Nested Master Details Flow" effect simply use a ViewPager with FragmentPageAdapter. The Master Detail Flow will look like this:

To change to a two panel mode when the user switches to landscape, in your extended FragmentPagerAdapter class, override the following method:

@Override
public float getPageWidth(int position) {
    DisplayMetrics metrics = getResources().getDisplayMetrics();
    // if the width is greater than 900dp halve the width of the page
    if ((metrics.widthPixels / metrics.density) > 900) {
        return (0.5f);
    }
    return super.getPageWidth(position);
}

To provide an "up button" for the view pager:

viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    // This method will be invoked when a new page becomes selected.
    @Override
    public void onPageSelected(int position) {
        if (position == 0) {
            getSupportActionBar().setDisplayHomeAsUpEnabled(false);
        } else {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }

    }
});

You can tell the "up button" to go back a page like this (where viewpager is a member variable of your activity, holding the a reference to your ViewPager):

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int position = viewpager.getCurrentItem();
    if (position > 0) viewpager.setCurrentItem(position-1);
    return true;
}

REFERENCES:

ViewPager with FragmentPagerAdapter

Display back button on action bar

Multiple-View ViewPager Options

How to implement a ViewPager with different Fragments / Layouts and example github project