Replace ListFragment with Fragment inside ViewPager with Tabs

Question

I try to setup following navigation in my app:

Actual condition: ViewPager + Tabs to swipe between lists:

• ListFragment A
• ListFragment B

Desired condition: ViewPager + Tabs:

• ListFragment A onListItemSelected replace ListFragment A with DetailFragment A
• ListFragment B onListItemSelected replace ListFragment B with DetailFragment B

The goal is to display the detail fragments inside the tab navigation. I can't replace the fragmentList by a detailFragment (the fragmentList has no custom layout and therefore no ID AND i don't know how to do it). Also, starting a new activity hides the tab bar.

Can someone please help me?

Answer 1

I would make a wrapper fragment which knows what to show - list or details. This would be completely decoupled from ViewPager - pager would only know it holds wrapper fragments, and these would manage their content themselves.

Implementation would be along these lines:

public class WrapperFragment extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        MyListFragment list = new MyListFragment();
        list.setListAdapter(adapter);
        list.setOnItemClickListener(new OnItemClickListener() {
            @Override public void onItemClick(AdapterView<?> l, View v, int position, long id) {
              // Create details fragment based on clicked item's position
              Fragment details = new Fragment();
              getChildFragmentManager()
                  .beginTransaction()
                  .replace(R.id.container, details)
                  .addToBackStack(null)
                  .commit();
            }
        });

        getChildFragmentManager()
            .beginTransaction()
            .add(R.id.container, list)
            .commit();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // There has to be a view with id `container` inside `wrapper.xml`
        return inflater.inflate(R.layout.wrapper, container, false);
    }

    public class MyListFragment extends ListFragment {

        private OnItemClickListener listener;

        public void setOnItemClickListener(OnItemClickListener l) {
            this.listener = l;
        }

        @Override
        public void onListItemClick(ListView l, View v, int position, long id) {
            if(listener != null) {
              listener.onItemClick(l, v, position, id);
            }
        }
    }
}

---

wrapper.xml. Idea is that WrapperFragment has to provide a layout which contains a view with id container - because we're using view with this id to put child fragment - MyListFragment or DetailsFragment.

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

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

---

Another way. This should work, but you'll have to try that out (layout has id itself, rather than having a child with id container):

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>