Fragment Layout List <--> Details

Question

I want to implement a layout that has the following design:

Landscape: List of items on the left, details on the right

Portrait: List of items, only details after click

To get this working I followed those tutorials: Tutorial 1 Tutorial 2

It worked as expected.

But instead of starting a new activity when in portrait and clicking a Listitem, I want the fragment to be replaced by the detail, so that I can animate the transition.

So i played around and got problems with the views. After that I read the following article, and modified my layout to use placeholders an add the fragments programmatically: Article

The action that is triggered when the listitem is clicked just replaces the list fragment in his container with the detail fragment.

But now if I revert to landscape, the list part of the layout is showing the detail instead of the list, because i replaced the content.

Is there any way to solve this problem?

At the moment I managed to get this working by using the two fragment placeholders in both layouts, landscape and portrait, with wrap content, and hiding and showing the fragments, but I don't know if this is the right approach? Perhaps a ViewFlipper would be better?

Also the animation here does not work properly, cause I hide and show in the same transaction.

Also if I am in Landscape mode and click a listitem and data is showing, and I return to portrait, I want the data view to be shown, not the list, but ONLY if data is already shown.

Atm I managed this with an flag passed to the intent data and again show/hide the correct view.

Any alternative ideas?

Thank you very much, have been trying for hours now!

EDIT The main problem I have is, that the slide in/out animation I set is not played correctly, as i hide and show the fragments in one transaction. It just hides the one fragment and slides in the other, so the first fragment is not slided out :/

To see what I mean, here is how I implemented it in a fragment test app:

main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">

    <FrameLayout
        android:id="@+id/details_Fragment_Placeholder"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" >
    </FrameLayout>

    <FrameLayout
        android:id="@+id/main_Fragment_Placeholder"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </FrameLayout>

</LinearLayout>

The ListFragment onListItemClick:

@Override
    public void onListItemClick(ListView l, View v, int position, long id) {
FragmentManager fragmentManager = getFragmentManager();
        Screen2Fragment fragment2 = (Screen2Fragment) fragmentManager
                .findFragmentByTag(Screen2Fragment.TAG);

        if (fragment != null) {

            if ((getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT)) {

                        .beginTransaction();

                transaction.setCustomAnimations(R.anim.slide_in_right,
                        R.anim.slide_out_left, android.R.anim.slide_in_left,
                        android.R.anim.slide_out_right);

                Screen1ListFragment fragment1 = (Screen1ListFragment) fragmentManager
                        .findFragmentByTag(Screen1ListFragment.TAG);
                transaction.hide(fragment1);
                transaction.show(fragment2);

                transaction.addToBackStack("ReturnToScreen1");

                transaction.commit();

            }
        }
    }

Answer 1

When you place the list fragment initially you need to put it into the back stack, then override the back button in the detail fragment to pop the list view off the back stack when pressed.