Fragment to Fragment transaction overlap

Question

So after I attempt to replace my current fragment with a new one from my RecyclerView Adapter class what I get is one fragment appearing on top of the other. I'm not sure if I have to destroy the current fragment and all the data in the recycler view in order to show the new fragment.

RecyclerViewAdapter Class

public class TouristLocationCategoryAdapter extends RecyclerView.Adapter<TouristLocationCategoryAdapter.TouristLocationCategoryViewHolder> {

        private Context context;
        private List<LocationCategory> categoryList;
        private Fragment fragment;

        public TouristLocationCategoryAdapter(Context context, List<LocationCategory> categoryList, Fragment fragment){
            this.context = context;
            this.categoryList = categoryList;
            this.fragment = fragment;
        }

        @NonNull
        @Override
        public TouristLocationCategoryViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.tourist_location_category_layout, null);

            return new TouristLocationCategoryViewHolder(view);
        }

        @Override
        public void onBindViewHolder(@NonNull final TouristLocationCategoryViewHolder holder, int position) {
            LocationCategory category = categoryList.get(position);

            holder.categoryImage.setImageDrawable(context.getResources().getDrawable(category.getCategoryImage()));
            holder.categoryName.setText(category.getCategoryName());

            holder.categoryImage.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    FragmentTransaction ft = fragment.getChildFragmentManager().beginTransaction();
                    Fragment newFragment = categoryList.get(holder.getAdapterPosition()).getCategoryFragment();

                    ft.replace(R.id.tourist_explore_frame_layout, newFragment);
                    ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
                    ft.commit();
                }
            });
        }

        @Override
        public int getItemCount() {
            return categoryList.size();
        }

        public class TouristLocationCategoryViewHolder extends RecyclerView.ViewHolder{

            ImageView categoryImage;
            TextView categoryName;

            public TouristLocationCategoryViewHolder(View itemView) {
                super(itemView);

                categoryImage = itemView.findViewById(R.id.tourist_location_category_image);
                categoryName = itemView.findViewById(R.id.tourist_location_category_name);
            }

        }
    }

Fragment Class

public class TouristExplore extends Fragment{

    RecyclerView recyclerView;
    GridLayoutManager gridLayoutManager;
    TouristLocationCategoryAdapter touristLocationCategoryAdapter;
    List<LocationCategory> categoryList;

    Museum museumFragment;
    Shopping shoppingFragment;

    public TouristExplore() {}

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_tourist_explore, container, false);
        recyclerView = (RecyclerView) rootView.findViewById(R.id.tourist_explore_recycler_view);
        categoryList = new ArrayList<>();

        museumFragment = new Museum();
        shoppingFragment = new Shopping();

        categoryList.add(new LocationCategory("Museum",R.drawable.test_image_one, museumFragment));
        categoryList.add(new LocationCategory("Shopping", R.drawable.test_image, shoppingFragment));

        gridLayoutManager = new GridLayoutManager(getActivity(),2);

        touristLocationCategoryAdapter = new TouristLocationCategoryAdapter(getActivity(), categoryList,TouristExplore.this);

        recyclerView.setAdapter(touristLocationCategoryAdapter);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(gridLayoutManager);

        return rootView;
    }
}

XML for Fragment

    <?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"
    android:orientation="vertical"
    android:id="@+id/tourist_explore_frame_layout">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/tourist_explore_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

    </android.support.v7.widget.RecyclerView>
</FrameLayout>

LocationCategory Class

public class LocationCategory {

    private String categoryName;
    private int categoryImage;
    private Fragment categoryFragment;

    public LocationCategory(String categoryName, int categoryImage, Fragment categoryFragment) {
        this.categoryName = categoryName;
        this.categoryImage = categoryImage;
        this.categoryFragment = categoryFragment;

    }

    public Fragment getCategoryFragment() {
        return categoryFragment;
    }

    public void setCategoryFragment(Fragment categoryFragment) {
        this.categoryFragment = categoryFragment;
    }

    public String getCategoryName() {
        return categoryName;
    }

    public void setCategoryName(String categoryName) {
        this.categoryName = categoryName;
    }

    public int getCategoryImage() {
        return categoryImage;
    }

    public void setCategoryImage(int categoryImage) {
        this.categoryImage = categoryImage;
    }
}

What I'm aiming to do is remove the imageView and TextView that I have set up in the adapter when one of them is clicked and the start the appropriate fragment. Any ideas what might be the problem and why the contents of the fragment I'm trying to move to are just being displayed on top of what I have in the adapter?

Answer 1

As far as I understand you wanna forget the state of one fragment when replacing to the new one. use fragmentTransaction.addToBackStack(null);