Android ViewPager not displaying properly after returning fragment from backStack

Question

I have a ViewPager set up which uses fragments to display different icons I can cycle through so that the user can navigate different menu options.

Each item in the ViewPager is housed in a Fragment like so:

public static Fragment newInstance(MainHandheldActivity context, int pos)
{
    Bundle b = new Bundle();
    b.putInt("pos", pos);
    return Fragment.instantiate(context, ObjectFragment.class.getName(), b);
}

@Override
public View onCreateView(LayoutInflater inflater,
                         ViewGroup container, Bundle savedInstanceState) {

    // Get menu image icons
    int icons[] = new int[3];
    icons[0] = R.mipmap.ic_text;
    icons[1] = R.mipmap.ic_voice;
    icons[2] = R.mipmap.ic_mail;

    // Get root view of the fragment layout
    LinearLayout rootView = (LinearLayout) inflater.inflate(
            R.layout.fragment_collection_object, container, false);
    Bundle args = getArguments();
    int pos = args.getInt("pos");

    // Set the current menu image and text
    ImageView menuImg = (ImageView) rootView.findViewById(R.id.fragment_image);
    menuImg.setImageResource(icons[pos]);

    TextView menuText = (TextView) rootView.findViewById(R.id.menuTxt);
    switch (pos){
        case 0:
            menuText.setText(MENU_HEADER_TEXT);
            break;
        case 1:
            menuText.setText(MENU_HEADER_VOICE);
            break;
        case 2:
            menuText.setText(MENU_HEADER_MAIL);
            // TODO Get number of messages and concatenate to string eg Inbox (3)
            break;
    }

    // Set the current menu selection
    MainActivityInterface ai = (MainActivityInterface) getActivity();
    ai.setCurrentSelection(pos);
    return rootView;
}

These fragments are used by a page adapter like so:

public class CollectionPageAdapter extends FragmentPagerAdapter implements
        ViewPager.OnPageChangeListener {

    private MainHandheldActivity context;
    private FragmentManager fm;

    public CollectionPageAdapter(MainHandheldActivity context, FragmentManager fm) {
        super(fm);
        this.fm = fm;
        this.context = context;
    }

    @Override
    public Fragment getItem(int position)
    {
        position = position % MainHandheldActivity.PAGES;
        Log.d("POS", "POSITION: " + position);
        return ObjectFragment.newInstance(context, position);
    }

    @Override
    public int getCount()
    {
        return MainHandheldActivity.PAGES * MainHandheldActivity.LOOPS;
    }
}

and this is all housed in another fragment which sets the adapter up in it's onCreateView method:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){

        // ... //

        // Scrolling menu
        pager = (ViewPager) view.findViewById(R.id.pager);
        adapter = new CollectionPageAdapter((MainHandheldActivity)getActivity(),getFragmentManager());
        pager.setAdapter(adapter);
        pager.addOnPageChangeListener(adapter);
        // Set current item to the middle page
        pager.setCurrentItem(MainHandheldActivity.FIRST_PAGE);
        currentPage = MainHandheldActivity.FIRST_PAGE;
        // Set number of pages
        pager.setOffscreenPageLimit(3);
        // Set no margin so other pages are hidden
        pager.setPageMargin(0);

        // ... //
}

This outer fragment is added to a transaction like so:

mFragmentManagerer = getSupportFragmentManager();
mFragmentTransaction = mFragmentManagerer.beginTransaction();
mMainFragment = new MainFragment();
mFragmentTransaction.add(R.id.fragmentContainer, mMainFragment, FRAG_MAIN);
mFragmentTransaction.commit();
mFragmentManagerer.executePendingTransactions();

So with my ViewPager fragments inside my outer navigation menu fragment, when I select an item from the ViewPager, I put the whole outer navigation menu on to the backStack:

public void replaceFragment(Fragment frag, String fragTag) {
    mFragmentTransaction = mFragmentManagerer.beginTransaction();
    mFragmentTransaction.replace(R.id.fragmentContainer, frag, fragTag);
    mFragmentTransaction.addToBackStack(null);
    mFragmentTransaction.commit();
}

This all works fine up until this point. However, after returning from the backStack (when I press the back button on the phone) the viewPager doesn't display the icons, yet it still allows me to cycle through the viewPager and after cycling through 2 or 3 items the icons appear again. Does anyone know why that might be happening? I'm a bit unsure exactly what is happening to the fragment's when they are placed on and retrieved from the backStack. Thanks.

Answer 1

SOLVED!

After many hours I finally solved this problem. The solution I found here, was simply to replace 'getFragmentManager()' with 'getChildFragmentManager()' when setting up the adapter:

pager = (ViewPager) view.findViewById(R.id.pager);

// Added getChildFragmentManager in here
adapter = new CollectionPageAdapter((MainHandheldActivity)getActivity(),getChildFragmentManager());

pager.setAdapter(adapter);
pager.addOnPageChangeListener(adapter);
// Set current item to the middle page
pager.setCurrentItem(MainHandheldActivity.FIRST_PAGE);
Log.d("PAGER", "pager setCurrentItem: " + MainHandheldActivity.FIRST_PAGE);
currentPage = MainHandheldActivity.FIRST_PAGE;
// Set number of pages
pager.setOffscreenPageLimit(3);
// Set no margin so other pages are hidden
pager.setPageMargin(0);