title: Fragments BackStack. Fragments overlap even after pop.
body: <p>The problem is to manage properly back stack so the previous fragment is poped out (or deleted). The problem is in their overlapping..</p>
  
  <p>The structure of program as follows: </p>
  
  <ul>
  <li>sliding menu with 3 fragments for each section: <code>CatalogFragment</code>, <code>NewsFragment</code>, <code>BlogFragment</code>;</li>
  <li>each fragment is a listView with items (parsed from JSON);</li>
  <li>on <code>CatalogFragment</code>'s item click I need to replace this <code>CatalogFragment</code> with <code>LessonsFragment</code>, which is list also.</li>
  </ul>
  
  <p><em>p.s. Items is in russian but I think you can understand</em> </p>
  
  <p><img src="https://i.stack.imgur.com/1biNq.png" alt="enter image description here"></p>
  
  <p>This is how these fragments are added (dynamically):</p>
  
  <pre><code>    @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;
      }
  }
  </code></pre>
  
  <p>That's how I replace fragment with new one in <code>onCatalogFragmentInteraction</code> method from interface:</p>
  
  <pre><code>    /** 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();
  }
  </code></pre>
  
  <p>...and that works fine:</p>
  
  <p><img src="https://i.stack.imgur.com/uDdaU.png" alt="enter image description here"></p>
  
  <p>But when I move back to fragment from slididng menu fragments overlap.</p>
  
  <p><img src="https://i.stack.imgur.com/S8mNU.png" alt="enter image description here"></p>
  
  <p>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 <code>add/replace</code> somehow better in that case. </p>
  
  <p>I have tried already deleting by name from stack. Maybe needed to delete them by ID?</p>
  
  <p>P.S. Tell if some more code needed. 
  Thanks in advance. </p>