Sometimes fragments overlap when switching tabs

Question

I have two panels with my buttons on the left. When a button is pressed, the corresponding fragment is displayed on the right. Sometimes fragments overlap, but this is an intermittent problem. I can’t copy it all the time, but it happens

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; 

It seems because I am replacing each fragment with a new fragment that may cause overlapping. Is there a way to clear all fragments before committing a new one?

Answer 1

As mentioned above, StackOverflow is an intermittent issue. I found a way to fix this by writing my own code to remove all existing fragments before committing to a new one. Below is my code:

  fragmentManager = getFragmentManager(); ft = fragmentManager.beginTransaction(); mbFragment = new SettingsManageBooksFragment(); ft.replace(R.id.setting_detail_container2, mbFragment).commit(); mImgFragmentTitle.setImageResource(R.drawable.manage_my_books); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.imageButtonSettingsManageBooks: if (mPurchaseHistory == true) { ft.remove(phFragment); Log.d(TAG, "REMOVING PURCHASE HISTORY FRAG"); } else if (mAudio == true) { ft.remove(aFragment); Log.d(TAG, "REMOVING AUDIO FRAG"); } else if (mRestore == true) { ft.remove(rFragment); Log.d(TAG, "REMOVING RESTORE FRAG"); } else if (mCopyright == true) { ft.remove(cFragment); Log.d(TAG, "REMOVING COPYRIGHT FRAG"); } else if (mAbout == true) { ft.remove(abFragment); Log.d(TAG, "REMOVING ABOUT FRAG"); } ft = fragmentManager.beginTransaction(); mbFragment = new SettingsManageBooksFragment(); ft.replace(R.id.setting_detail_container2, mbFragment).commit(); mImgFragmentTitle.setImageResource(R.drawable.manage_my_books); mManageBooks = true; mPurchaseHistory = false; mAudio = false; mRestore = false; mCopyright = false; mAbout = false; break;