Android: How can I navigate from one “detail” to another “detail”, while having the “Up” button go back to the “Master” list?

Question

I have a master-detail pattern in my app, but I want the detail to be able to switch views. I want to save as much space as possible so the "content" is nice and spacious. How can I navigate from one "detail" to another "detail", while having the "Up" button go back to the "Master" list? (See the arrow between "Detail 1" and "Detail 2" on my picture.)

I've spent a lot of time thinking about this and researching various methods of doing this, and even asked a stack overflow question (How to do something like Drop Down Navigation in Android (since it looks like it has become deprecated?)) and I am still waiting for a helpful answer. Even if I got that question answered, I'm not sure it would really work with Master Detail flow like this.

If Master-Detail doesn't work, what would be the best way to accomplish this UI layout I have in mind? Has anyone done something like this before? Thanks!

---

Edit: Ideally, I would also like the user to be able to set a "Default" view (Detail 1 or Detail 2) that will be the first screen to come up after clicking an item on the Master list.

---

Edit 2: I had an idea to use a ViewPager to transition between Detail 1 and Detail 2. I'm not sure if it will work though. Or, I could make Detail 2 an additional activity off of Detail 1, but I don't want to make space for a button in my "content" area. I can't really use a drawer because the drawer icon goes in the same place as the "Up" arrow. I'm at a loss because I think the drawer is best for this situation, but I can't use it because I am already using the "Up" arrow.

---

Edit 3: I tried to think of an app that did what I'm trying to do, and I think "Kindle" does this well. It has to switch between every page of a book, but first you have to choose a book. While you're in a book on Kindle, the Action Bar & Navigation Drawer changes to white and the Navigation Drawer's first item is "Library." Clicking on "Library" takes you to a completely different activity with a black action bar and black navigation drawer with different menu items. So, I think this is probably the route I should take. I should probably no longer have an "Up" button, and just use the first item of the drawer to act as an "Up" button. I am still interested in learning and considering all of my options, though.

Answer 1

Here's an alternative to using Fragments and ViewPager (as they could usually end in more boilerplate codes).

Lay all of your detail's view in one layout.xml and toggle their visibility via View.setVisibility() upon a click of a button. You can label this button as "Continue", "Next", or whatever. The main idea is to make the user aware that they're on the same context despite the change of screen.

Here's an illustration on how you should arrange your detail's layout.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/layout_page_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible">

        <!-- Put your detail 1 content here -->

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_page_2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone">

        <!-- Put your detail 2 content here -->

    </LinearLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Continue"
        android:id="@+id/bt_continue"/>

</RelativeLayout>

As I said, the idea is to toggle the visibility of layout_page_1 and layout_page_2 upon bt_continue got clicked:

@Override
public void onClick(View v) {
    if(v.getId() == R.id.bt_continue) {
        layoutPage1.setVisibility(View.INVISIBLE);
        layoutPage2.setVisibility(View.GONE);
    }
}

With this logic, you could also implement a "Previous" button to navigate back to the first page of your detail.

If you want your user to able to set a default view then that's easy too. Just save an int in your SharedPreferences which will represent the page that will be "opened" - that is the view that will be set to View.VISIBLE - the first time your user opens the detail view.

Answer 2

I would solve that like this:

• Master (fragment inside MainActivity)
• Detail 1 (fragment inside FirstDetailActivity)
• Detail 2 (fragment inside SecondDetailActivity)

Manifest file (for example):

<application>

    <!-- The main/home activity (it has no parent activity) -->
    <activity
        android:name="...MainActivity" ...>
        ...
    </activity>


   <!-- First detail activity -->
   <activity
       android:name="...FirstDetailActivity"
       android:parentActivityName="...MainActivity" >
       <!-- Parent activity meta-data to support 4.0 and lower -->
       <meta-data
           android:name="android.support.PARENT_ACTIVITY"
           android:value="...MainActivity" />
   </activity>

   <!-- Second detail activity -->
   <activity
        android:name="...SecondDetailActivity"
        android:parentActivityName="...MainActivity" >
        <!-- Parent activity meta-data to support 4.0 and lower -->
        <meta-data
           android:name="android.support.PARENT_ACTIVITY"
           android:value="...MainActivity" />
   </activity>

</application>

So basically:

1. Click on list (Master) opens FirstDetailActivity
2. Click on FirstDetailActivity (Tab, Spinner, Button etc.) opens SecondDetailActivity
3. Up button in either of FirstDetailActivity or SecondDetailActivity provides navigation to MainActivity

Reference: http://developer.android.com/training/implementing-navigation/ancestral.html

Answer 3

Implement your detail pages as Fragments and use a ViewPager to hold them both. This way, the user can, by swiping left or right, switch between the both of them. If you look at the Gmail app for instance, there you also can swipe through your mail-details once you've opened one from the mail list.