How to handle bottom navigation bar's fragments?

Question

I have four fragments attached in my bottom nav bar. Now I am trying to go from one this fragments to any other fragment by clicking on a cardview. This is working perfectly but when I am going to that fragment to any other fragment(which are attached in nav bar) and pressing back button something weird overlapping is happened. Here is my nav bar and fragment container activity:
ShowFragment.java

package com.fahim69.bazaarapp.FragmentHolder;
public class ShowFragment extends AppCompatActivity {
BottomNavigationView bottomnav;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_show_fragment);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
    WindowManager.LayoutParams.FLAG_FULLSCREEN);
    bottomnav = findViewById(R.id.nav_bar);
    replacefragment(new HomeFragment());
    bottomnav.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            Fragment fragment = null;
            switch (item.getItemId()) {
                case R.id.nav_home:
                    replacefragment(new HomeFragment());
                    break;
                case R.id.nav_category:
                    replacefragment(new CategoryFragment());
                    break;
                case R.id.nav_cart:
                    replacefragment(new CartFragment());
                    break;
                case R.id.nav_profile:
                    replacefragment(new ProfileFragment());
                    break;
            }

            return true;
        }
    });
}

private void replacefragment(Fragment fragment) {
    FragmentManager fragmentManager = getSupportFragmentManager();
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
    fragmentTransaction.replace(R.id.fragment_container, fragment);
    //fragmentTransaction.addToBackStack(null);
    fragmentTransaction.commit();
}

}
And here is my that fragment code from where I am going to different fragment which is not attached to nav bar.

package com.fahim69.bazaarapp.Fragment;

public class CategoryFragment extends Fragment {

CardView fruit, fish, meat, vegetable, cooking, dairy, frozen, snacks, bread, beverage, 
personal_care, hygiene, baby_care, homekitchen, petcare;
ImageView fruit_img, fish_img, meat_img, vegetable_img, cooking_img, dairy_img, frozen_img, 
snacks_img, bread_img, beverage_img, personal_img, hygiene_img, baby_img, home_img, pet_img;
TextView fruit_tv, fish_tv, meat_tv, vegetable_tv, cooking_tv, dairy_tv, frozen_tv, snacks_tv, 
bread_tv, beverage_tv, personal_tv, hygiene_tv, baby_tv, home_tv, pet_tv;


public CategoryFragment() {
    // Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View view = inflater.inflate(R.layout.fragment_category, container, false);
    fruit = view.findViewById(R.id.fruitname);
    fish = view.findViewById(R.id.Fish);
    meat = view.findViewById(R.id.meat);
    vegetable = view.findViewById(R.id.vegetable);
    cooking = view.findViewById(R.id.cooking);
    dairy = view.findViewById(R.id.dairy);
    frozen = view.findViewById(R.id.frozenAndCanned);
    snacks = view.findViewById(R.id.Snacks);
    bread = view.findViewById(R.id.breadandbakery);
    beverage = view.findViewById(R.id.beverages);
    personal_care = view.findViewById(R.id.Personalcare);
    hygiene = view.findViewById(R.id.Hygiene);
    baby_care = view.findViewById(R.id.BabyCare);
    homekitchen = view.findViewById(R.id.HomeandKitchen);
    petcare = view.findViewById(R.id.Petcare);


    fruit_img = view.findViewById(R.id.fruitpic);
    fish_img = view.findViewById(R.id.fish_category_img);
    meat_img = view.findViewById(R.id.meatpic);
    vegetable_img = view.findViewById(R.id.vegetablepic);
    cooking_img = view.findViewById(R.id.cookingpic);
    dairy_img = view.findViewById(R.id.dairypic);
    frozen_img = view.findViewById(R.id.frozenandcannedimg);
    snacks_img = view.findViewById(R.id.snackscatimg);
    bread_img = view.findViewById(R.id.breadandbakeryimg);
    beverage_img = view.findViewById(R.id.beveragesimg);
    personal_img = view.findViewById(R.id.personalcare_img);
    hygiene_img = view.findViewById(R.id.hygiene_img);
    baby_img = view.findViewById(R.id.babycare_img);
    home_img = view.findViewById(R.id.homeandkitchen_img);
    pet_img = view.findViewById(R.id.petcareimg);


    fruit_tv = view.findViewById(R.id.fruit_name_tv);
    fish_tv = view.findViewById(R.id.fish_category_tv);
    meat_tv = view.findViewById(R.id.meat_cat_tv);
    vegetable_tv = view.findViewById(R.id.vegetable_cat_tv);
    cooking_tv = view.findViewById(R.id.cooking_cat_tv);
    dairy_tv = view.findViewById(R.id.dairy_cat_tv);
    frozen_tv = view.findViewById(R.id.frozen_cat_tv);
    snacks_tv = view.findViewById(R.id.snacks_tv);
    bread_tv = view.findViewById(R.id.breadbackery_tv);
    beverage_tv = view.findViewById(R.id.Beverage_tv);
    personal_tv = view.findViewById(R.id.personal_care_tv);
    hygiene_tv = view.findViewById(R.id.hygiene_tv);
    baby_tv = view.findViewById(R.id.babycare_tv);
    home_tv = view.findViewById(R.id.homeandkitchen_tv);
    pet_tv = view.findViewById(R.id.petcare_tv);
    BottomNavigationView item = getActivity().findViewById(R.id.nav_bar);



    fruit.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Fragment fragment = new FruitCategory();
            FragmentManager manager = getActivity().getSupportFragmentManager();
            FragmentTransaction transaction = manager.beginTransaction();
            transaction.replace(R.id.fragment_container, fragment);
            transaction.addToBackStack(null);
            transaction.commit();

        }
    });

    return view;
}

}

I tried a lot of stuff but problem is solving. Help me out.

Answer 1

It's happening because you don't properly work with your back stack.

Your current fragment flow:

1. boot() -> No fragment attached
2. onCreate() -> Add HomeFragment (nothing in back stack).
3. onTabClick() -> Replacing current fragment with CategoryFragment (nothing in back stack)
4. openFruitDetails() -> Replace current fragment with FruitCategory and adding to back stack current fragment (now CategoryFragment in back stack)
5. onTabClick() -> Replacing current fragment with ProfileFragment ( CategoryFragment still in back stack)
6. onBackClick() -> Pop back CategoryFragment from back stack.

What you can do with it?

1. Bad one -> Don't add to back stack any of your fragments.
2. Good one -> Add navigation library jetpack navigation , cicerone , modo etc.
3. Hard one -> Create your own fragment manager wrapper implementation for resolving such behavior.