Fragment overlaps sometimes when switching tabs

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?

I'm getting the same issue, (always using replace as well), but I'm using the support library. Edit: It seems like you are too, but you're calling getFragmentManager instead of getSupportFragmentManager... could that be your issue? As with me, it's a very intermittent issue that we can't reproduce. — StackOverflowed, Sep 12 '13 at 01:22
It wouldn't let me edit my previous comment but Edit 2: If it matters, the one device that we've seen it happen on is the Samsung Galaxy S4. — StackOverflowed, Sep 12 '13 at 01:51
I think we have the other solution better than `remove solution` by using this way. In `all your xml files`, should define the background color for it, it will solve the problem : Add this `android:background="@android:color/black"` in to the View tag you defined. — Huy Tower, Mar 25 '14 at 07:49
This question is marked as duplicate, but "original" question solution is just laughable - to sweep 100500+ previous fragments under the carpet and make opaque background. — Boris Treukhov, Jan 20 '16 at 17:30

score 2 · Accepted Answer · answered Sep 12 '13 at 09:20

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;

Fragment overlaps sometimes when switching tabs

1 Answers1

Linked