Old fragment still visible after replacing with a new fragment

Question

I know there are tons of questions in this topic but none of them solved my problem. I have tab layout with a viewpager. This viewpager has 5 fragments. One of them is "My Files". When any of the item in this fragment is clicked, it is replace with another fragment. But my code is actually not replacing. The new fragment comes below the old fragment and both are visible and obviously the fragment on the top is clickable(old fragment). One solution included setting the background colour to white or something else. I can't do that as my app has a transparent background.

Below is a screenshot :

Below is my code to replace fragment:

 myFilesAdapter = new MyFilesAdapter(getContext(), new MyFilesAdapter.MyFilesItemClickListener() {
        @Override
        public void folderonclicklistener(FolderModel name, int position) {



            MyFilesSongs myFilesSongs = new MyFilesSongs();

            FragmentManager fm = getChildFragmentManager();
            fm.popBackStackImmediate(null, FragmentManager.POP_BACK_STACK_INCLUSIVE);
            FragmentTransaction fragmentTransaction = fm.beginTransaction();
            Bundle bundle = new Bundle();
            bundle.putString("parentPath",name.getFolderPath());
            myFilesSongs.setArguments(bundle);
            fragmentTransaction.replace(R.id.container,myFilesSongs);
            fragmentTransaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);

            fragmentTransaction.addToBackStack(null);
            fragmentTransaction.commit();
        }
    });

Answer 1

First of all, starting a fragment from fragment is a bad practice. Instead of this create a method in your Activity as,

public void switchToSecondFragment(){

  FragmentManager manager = getSupportFragmentManager();
  SecondFragment fragment = new SecondFragment();
  FragmentTransaction transaction = manager.beginTransaction();
  transaction.replace(R.id.container, fragment).addToBackStack("tag");
  transaction.commit();

}

And when you want to start Second Fragment, start it as

((MyActivity) getActivity()).startSecondFragment(); 

Answer 2

When we are replacing fragments dynamically, All child views of older fragment appears in background for newer fragment (if newer fragment background colour is transparent). In that case we should make all child views of older fragment to hide their visibility.

Note: When hiding visibility of child views in older fragment, if other view positions are dependent on child views, then use View.INVISIBLE instead of View.GONE for hiding. Because -

From [Documentation] you can say that

View.GONE This view is invisible, and it doesn't take any space for layout purposes.

View.INVISIBLE This view is invisible, but it still takes up space for layout purposes.

So if you use View.GONE when your views are dependent then you are actually removing that from layout which might disturb other positional views.