Fragments BackStack. Fragments overlap even after pop.

Question

The problem is to manage properly back stack so the previous fragment is poped out (or deleted). The problem is in their overlapping..

The structure of program as follows:

• sliding menu with 3 fragments for each section: CatalogFragment, NewsFragment, BlogFragment;
• each fragment is a listView with items (parsed from JSON);
• on CatalogFragment's item click I need to replace this CatalogFragment with LessonsFragment, which is list also.

p.s. Items is in russian but I think you can understand

This is how these fragments are added (dynamically):

    @Override
public void onNavigationDrawerItemSelected(int position) {
    FragmentManager fragmentManager = getSupportFragmentManager();
//        fragmentManager.popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE); //this also doesn't work

    switch (position+1) {
        case 1:
            //getSupportFragmentManager().popBackStack(); // this doesnt work
            fragmentManager.beginTransaction().replace(R.id.container,
                    CatalogFragment.newInstance(position + 1)).addToBackStack("catalog").commit();

            break;
        case 2:
            fragmentManager.beginTransaction().replace(R.id.container,
                    NewsFragment.newInstance(position + 1)).addToBackStack("news").commit();

            break;
        case 3:
            fragmentManager.beginTransaction().replace(R.id.container,
                    BlogFragment.newInstance(position + 1)).addToBackStack("blog").commit();
            break;
    }
}

That's how I replace fragment with new one in onCatalogFragmentInteraction method from interface:

    /** Methods for interaction with list items*/
@Override
public void onCatalogFragmentInteraction(String id){
    //pop previous
    getSupportFragmentManager().popBackStack("catalog", FragmentManager.POP_BACK_STACK_INCLUSIVE);
    //add new
    FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
    fragmentTransaction.replace(R.id.container, LessonsFragment.newInstance());
    fragmentTransaction.addToBackStack("lessons");
    fragmentTransaction.commit();
}

...and that works fine:

But when I move back to fragment from slididng menu fragments overlap.

I belive the problem lies in proper BackStack management but I can't figure out what I did wrong. Another suggestion is that I need to use add/replace somehow better in that case.

I have tried already deleting by name from stack. Maybe needed to delete them by ID?

P.S. Tell if some more code needed. Thanks in advance.

Answer 1

I think your all fragments have transparent background or you did not set anything(so default is transparent). So the when you add/replace a fragment above another fragment the below fragment is visible to you. So try to set the background color for every fragment layout.