Android Navigation Bottom Fragments overlapping

Question

I am using a navigation bottom with 4 items in my app, so I have 4 fragments. the first fragment(home page) contains a recyclerView and other fragments don't contain any recyclerView.

The problem is here;
when I navigate to other fragments I can see the recycler view in the background. and when I navigatie back to the first fragment there is another recycler view under the original one!

I have used this: fm.beginTransaction().hide(active).show(fragment2).commit();
but the hide() method doesn't work.

---

Here is the related parts of my code:

I have globally defined these

final Fragment fragment1 = new HomeFragment();
final Fragment fragment2 = new AddFragment();
final Fragment fragment3 = new CalendarFragment();
final Fragment fragment4 = new ProfileFragment();
final FragmentManager fm = getSupportFragmentManager();
Fragment active = fragment1;

then

In the onCreate:

fm.beginTransaction().add(R.id.nav_host_fragment, fragment4, "4").hide(fragment4).commit();
fm.beginTransaction().add(R.id.nav_host_fragment, fragment3, "3").hide(fragment3).commit();
fm.beginTransaction().add(R.id.nav_host_fragment, fragment2, "2").hide(fragment2).commit();
fm.beginTransaction().add(R.id.nav_host_fragment, fragment1, "1").commit();

and at last

the navigation item listener:

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    if (active == fragment1)
                        return false;
                    fm.beginTransaction().hide(active).show(fragment1).commit();
                    active = fragment1;
                    return true;
                case R.id.navigation_add:
                    if (active == fragment2)
                        return false;
                    fm.beginTransaction().hide(active).show(fragment2).commit();
                    active = fragment2;
                    return true;
                case R.id.navigation_calendar:
                    if (active == fragment3)
                        return false;
                    fm.beginTransaction().hide(active).show(fragment3).commit();
                    active = fragment3;
                    return true;
                case R.id.navigation_profile:
                    if (active == fragment4)
                        return false;
                    fm.beginTransaction().hide(active).show(fragment4).commit();
                    active = fragment4;
                    return true;
            }
            return false;
        }
    };

Answer 1

I have used navGraph in my fragment in the XML file previously and I've forgotten to delete the navGraph, so it was showing the first fragment in the navGraph in the background.