Fragment transaction with viewpager returns blank view

Question

I am using tablayout with view pager to display fragments. My current setup is that I get a listview of 'Categories' and the user clicks on a category then returns a new fragment containing a list of available discounts within that category.

My setup creates the new DiscountList fragment but does not update the view when the original fragment does its transaction. Could someone help me figure out the correct solution? I am not sure if my viewpager is incorrect or I am missing a step. I can provide more information, if needed. Thanks!

CategoryListFragment.java:

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

    mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            FragmentTransaction transaction = getActivity().getSupportFragmentManager().beginTransaction();
            transaction.replace(container.getId(), DiscountListFragment.newInstance(position))
                    .addToBackStack(null)
                    .commit();
        }
    });

    return view;
}

DiscountListFragment.java

public static DiscountListFragment newInstance(int categoryId) {
    DiscountListFragment discountListFragment = new DiscountListFragment();

    Bundle args = new Bundle();
    args.putInt("categoryId", categoryId);
    discountListFragment.setArguments(args);

    return discountListFragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
        categoryId = getArguments().getInt("categoryId");
    }
    reactiveLocationProvider = new ReactiveLocationProvider(getActivity());
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    return inflater.inflate(R.layout.fragment_search_discount_list, container, false);
}

@Override
public void onAttach(Context context) {
    super.onAttach(context);
}

@Override
public void onDetach() {
    super.onDetach();
    mListener = null;
}

ViewPager.java

/**
 * Retrieves the selected tab and returns it. If new tab needs to be added
 * simply increment case and return a new fragment
 * @param position the position of tab selected
 * @return the selected tab
 */

@Override
public Fragment getItem(int position) {

    switch (position) {
        case 0:
            return new HomeFragment();
        case 1:
            return new CategoryListFragment();
        case 2:
            return new MapViewFragment();
        case 3:
            return new MessagesFragment();
        default:
            return null;
    }
}

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

Answer 1

The best way to replace a fragment within a ViewPager is to create a root fragment that is loaded into the pager. The root fragment loads fragment1 by default, which can later be replaced by fragment2. Someone made a good example of this and put it up on Github: https://github.com/danilao/fragments-viewpager-example

I would take a slightly different approach than the example, and have the root fragment be responsible for switching the fragments, rather than the child fragment itself. But that is an architectural decision, and is up to you.