Replace Fragment over Fragment that contains ViewPager

Question

I have ONE activity that calls a FragmentParent. This contains a viewpager. The viewpager has 2 tabs. In each tab there is a fragment. In the first tab (TAB-A) there is a fragment that contains a Recyclerview. When I click over an item the app opens new fragment, but when I go back ALL the fragments inside the viewpager get empty.

I am using Fragments and support library v-13, I already tried with v-4 but I had the same issue.

This is my code:

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_test);

    initWithFragments(savedInstanceState);
}

public void initWithFragments(Bundle savedInstanceState) {

    if (findViewById(R.id.fragment_container) != null) {

        if (savedInstanceState != null) {
            return;
        }
        // Create a new Fragment to be placed in the activity layout
        MainFragment mainFragment = new MainFragment();
        //Fragment transaction
        FragmentTransaction ft = getFragmentManager().beginTransaction();
        ft.add(R.id.fragment_container, mainFragment);
        ft.commit();
    }
}

MainFragment

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_app, container, false);

    //Enabled menu
    setHasOptionsMenu(true);

    // Initialize Toolbar and View Pager
    toolbar = (Toolbar) rootView.findViewById(R.id.toolbar);
    ((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);

    // Create the adapter that will return a fragment for each section
    SectionsPageAdapter mSectionsPagerAdapter = new SectionsPageAdapter(getFragmentManager());

    // Set up the ViewPager with the sections adapter.
    ViewPager mViewPager = (ViewPager) rootView.findViewById(R.id.container_view_pager);
    mViewPager.setAdapter(mSectionsPagerAdapter);
    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            switch (position) {
                case 0:
                    toolbar.setTitle("Home");
                    break;
                case 1:
                    toolbar.setTitle("Downloads");
                    break;
                default:
                    break;
            }
        }

        @Override
        public void onPageSelected(int position) {
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });

    // Set up tab layout
    TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(mViewPager);

    return rootView;
}

fragment_app

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>

This is the FragmentA inside the viewpager

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorGrayLight"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">

<LinearLayout
    android:id="@+id/container_recycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="1">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/video_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

Also I have the PageAdapter

public class SectionsPageAdapter extends FragmentPagerAdapter {

private int NUM_PAGES = 2;

public SectionsPageAdapter(FragmentManager fm) {
    super(fm);
}

@Override
public Fragment getItem(int position) {
    // getItem is called to instantiate the fragment for the given page.
    // Return a PlaceholderFragment (defined as a static inner class below).
    switch (position) {
        case 0:
            return SearchFragment.newInstance();
        case 1:
            return DownloadFragment.newInstance();
        default:
            return new Fragment();
    }
}

@Override
public int getCount() {
    return NUM_PAGES;
}

@Override
public CharSequence getPageTitle(int position) {
    switch (position) {
        case 0:
            return "Search";
        case 1:
            return "Downloads";
    }
    return null;
}

}

I am using FragmentTransaction to replace Fragments...

FragmentTransaction ft = getFragmentManager().beginTransaction();
    ft.replace(R.id.fragment_container,settingFragment);
    ft.addToBackStack(null);
    ft.commit();

If you guys can help me, I will really appreciate Thanks

This is what I want to:

I'm not so sure Fragments are allowed or designed to be ViewPager containers. — Chisko, Nov 23 '16 at 20:54
Are you intending to use the screen in landscape and have both ViewPager and Details Fragment at the same time? — Chisko, Nov 24 '16 at 01:05
I think I got it, I am testing something. If it works I'll let you know. The project has to be as the picture describe — Josymar De Leon, Nov 24 '16 at 02:20

score 1 · Answer 1 · answered Nov 23 '16 at 06:03

change FragmentA layout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorGrayLight"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin">

    <LinearLayout
        android:id="@+id/container_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="1">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/video_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>
</FrameLayout>

Now when you replace fragment with this

FragmentTransaction ft = getFragmentManager().beginTransaction();
    ft.replace(R.id.fragment_container,settingFragment);
    ft.addToBackStack(null);
    ft.commit();

it will take R.id.fragment_container from FragmentA

Your solution works, but I don't want to show the new fragment inside the viewpager. I want to show it over the viewpager. — Josymar De Leon, Nov 23 '16 at 18:20

score 1 · Accepted Answer · edited May 23 '17 at 11:53

I finally resolved using getChildFragments:

I used getChildFragmentManager instead of getFragmentManager. I passed to the constructor of the PageAdapter

SectionsPageAdapter mSectionsPagerAdapter = new SectionsPageAdapter(getChildFragmentManager());

In the view holder of the RecyclerView I created an Interface to communicate Nested Fragments with the Activity(main container). Using this way I could replace Fragments in the R.id.fragment_container

I found the solution in this link: Adding child Fragment to Parent Fragment withing a ViewPager in Android

Replace Fragment over Fragment that contains ViewPager

2 Answers2