Overlapping of fragments when transiting on clicking on an item in RecyclerView of one fragment to another new fragment - android-fragments

Question

I am new to android development. The problem is the RecyclerView populated using a firebase database is not replaced by a new fragment, rather the new fragment is on top, but clicking on another item of the recycler view still works, which I checked using a toast in the new fragment. I know that the next fragment is there because I have TextView at the bottom, which is visible on clicking on the recycler view Item.
Here is my code
adapter = new FirebaseRecyclerAdapter<Categories, CategoryViewHolder>(options) {
#Override
protected void onBindViewHolder(#NonNull final CategoryViewHolder holder, int position, #NonNull Categories model)
{
Picasso.get().load(model.getImage()).placeholder(R.drawable.camera).into(holder.categoryImage, new Callback() {
#Override
public void onSuccess()
{
}
#Override
public void onError(Exception e) {
Toast.makeText(getContext(), e.getMessage(), Toast.LENGTH_SHORT).show();
}
});
holder.categoryName.setText(model.getName());
holder.categoryImage.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(getContext(), holder.categoryName.getText().toString(), Toast.LENGTH_SHORT).show();
// Intent intent = new Intent(getActivity(), ProductListActivity.class);
// startActivity(intent);
AppCompatActivity activity = (AppCompatActivity) view.getContext();
SearchFragment fragment = SearchFragment.newInstance(holder.categoryName.getText().toString());
FragmentManager fragmentManager = activity.getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.nav_host_fragment, fragment, SearchFragment.class.getSimpleName());
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commit();
}
});
The fragment I am using is also used for the navigation drawer using navController.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/app_bar_main">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
</RelativeLayout>
Edit: I have another recyclerView inside SearchFragment, which didn't show after I clicked an image in the RecyclerView(One which calls SearchFragment). But it showed after I minimized and opened the app again. I don't understand why that is happening.

Answer 1

I just found an easy way to move from one fragment to another without using FragmentManager. I hope this helps others, it worked for me. Initialize the NavController in the first fragment inside onCreateView
navController = Navigation.findNavController(getActivity(), R.id.nav_host_fragment);
And adding the following for transition
Bundle bundle = new Bundle();
bundle.putString("Category", holder.categoryName.getText().toString());
navController.navigate(R.id.nav_category_product_list, bundle);
to get the argument in the moving fragment type this
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true); //To get menu items at the top
if (getArguments() != null) {
Category = getArguments().getString("Category");
}
}
Also, add this transition in Navigation graph XML
.
.
.
<fragment
android:id="#+id/nav_category"
android:name="com.grocery.admin.ui.category.CategoryFragment"
android:label="#string/menu_category"
tools:layout="#layout/fragment_category" >
<action
android:id="#+id/action_nav_category_to_nav_category_product_list"
app:destination="#id/nav_category_product_list" />
</fragment>
<fragment
android:id="#+id/nav_category_product_list"
android:name="com.grocery.admin.ui.category.CategoryProductFragment"
android:label="Product List"
tools:layout="#layout/fragment_category_product">
</fragment>
.
.
.