title: Fragment overlaps sometimes when switching tabs
body: <p>I have a two pane layout with my buttons on the left. When a button is pressed its corresponding fragment is displayed on the right. Sometimes the fragments overlap but this is an intermittent issue. I can't replicate it all the time but it does happen</p>
  
  <pre><code>public void onClick(View v) {
      switch (v.getId()) {
      case R.id.imageButtonSettingsManageBooks:
          SettingsManageBooksFragment mbFragment = new SettingsManageBooksFragment();
          getFragmentManager().beginTransaction().replace(R.id.setting_detail_container2, mbFragment).addToBackStack(null).commit();
          mImgFragmentTitle.setImageResource(R.drawable.manage_my_books);
          this.getSupportFragmentManager().executePendingTransactions();
  
  
          break;
      case R.id.imageButtonSettingsPurchaseHistory:
          SettingsPurchaseHistoryFragment phFragment = new SettingsPurchaseHistoryFragment();
          getFragmentManager().beginTransaction().replace(R.id.setting_detail_container2, phFragment).commit();
          mImgFragmentTitle.setImageResource(R.drawable.purchase_history);
          this.getSupportFragmentManager().executePendingTransactions();
  
          break;
      case R.id.imageButtonSettingsAudio:
          SettingsAudioFragment aFragment = new SettingsAudioFragment();
          getFragmentManager().beginTransaction().replace(R.id.setting_detail_container2, aFragment).commit();
          mImgFragmentTitle.setImageResource(R.drawable.audio);
          this.getSupportFragmentManager().executePendingTransactions();
  
          break;
      case R.id.imageButtonSettingsRestore:
          SettingsRestoreFragment rFragment = new SettingsRestoreFragment();
          getFragmentManager().beginTransaction().replace(R.id.setting_detail_container2, rFragment).commit();
          mImgFragmentTitle.setImageResource(R.drawable.restore);
          this.getSupportFragmentManager().executePendingTransactions();
  
          break;
      case R.id.imageButtonSettingsCopyright:
          SettingsCopyrightFragment cFragment = new SettingsCopyrightFragment();
          getFragmentManager().beginTransaction().replace(R.id.setting_detail_container2, cFragment).commit();
          mImgFragmentTitle.setImageResource(R.drawable.copyright);
          this.getSupportFragmentManager().executePendingTransactions();
  
          break;
      case R.id.imageButtonSettingsAbout:
          SettingsAboutFragment abFragment = new SettingsAboutFragment();
          getFragmentManager().beginTransaction().replace(R.id.setting_detail_container2, abFragment).commit();
          mImgFragmentTitle.setImageResource(R.drawable.about);
          this.getSupportFragmentManager().executePendingTransactions();
  
          break;
  </code></pre>
  
  <p>It looks like because I am replacing each fragment with a new fragment that could be causing the overlap. Is there a way to clear all the fragments before committing a new one?</p>