Fragment overlaps sometimes when switching tabs [duplicate]

Question

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

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 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?

Answer 1

As mentioned by StackOverflowed above this is an intermittent issue. I found a way of fixing this by writing my own code to remove any existing fragments before committing 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;