Android: fragments overlapping issue

Question 1

Just set a background color to your <fragment /> in XML file.

Solves the issue.

Question 2

Well Setting up fragment background color is not a solution because fragment will be still in the activity stack which may consume memory.

Solution would be remove all views from your framelayout before adding any new fragment.

private void changeFragment(Fragment fr){
    FrameLayout fl = (FrameLayout) findViewById(R.id.mainframe);
    fl.removeAllViews();
    FragmentTransaction transaction1 = getSupportFragmentManager().beginTransaction();
    transaction1.add(R.id.mainframe, fr);
    transaction1.commit();
}

Question 3

I may be very late to answer this question.

Note:

This answer may not be related to the above question, But hope it will help for some.

Sometimes, Fragment overlap issue occurs when we try to use the different type of fragments( i.e using support fragment's in few fragments and normal fragments in someother fragment )

Recently i faced the same problem in Navigation drawer. By mistake, i used "import android.support.v4.app.Fragment;" in one fragment, And used "import android.app.Fragment;" in few other fragment.

Hope this will help for somebody..

Question 4

fragment manager maintains the stack of all the previous fragments that are replaced sometimes the back stack fragments overlaps with the fragment we replaced, for me

  fragmentManager.popBackStack();

works, we can do this in a loop too to pop all the fragments in the stack hope it helps, Thanks. Happy Coding :)

Question 5

This is how I fixed it ..

Setting the background would remove the overlapping effect from the screen only if the layout is matched to fill screen

New fragments replaced on button clicks were not getting replaced on tab_selected or tab change action

following code fixed it for me

    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    // This is required since button click replaces fragment whose link is lost hence overlapping isuee was occuring
    ft.replace(android.R.id.content, mFragment); 
    // On Tab Change remove old fragment views
    ft.remove(mFragment);
}

Question 6

Another problem can be related to using android.R.id.content as a container. I've just created FrameLayout and use id from there.

Question 7

I also faced fragment overlapping issue.Here is how I solved it -

1) We need to add the first fragment with addToBackStack, so that it is retained in the stack -

FirstFragment firstFragment = new FirstFragment();
getFragmentManager().beginTransaction().add(R.id.fragment_container, firstFragment).addToBackStack("first frag").commit();

2) While adding the second fragment, replace the first fragment rather then adding it.Since the first fragment was already added in the stack, so it will be present when you press back from second fragment -

SecondFragment secondFragment= new SecondFragment();
getFragmentManager().beginTransaction().replace(R.id.fragment_container, secondFragment).addToBackStack("second frag").commit();

3) Here is how back press can be handled, below code should be present in the parent Activity -

 public void onBackPressed(){
    if(getFragmentManager().getBackStackEntryCount() <= 1){
       super.onBackPressed();
    } else {
       getFragmentManager().popBackStack();
    }
 }

Question 8

Did you check your XML and see if the main layout is Frame Layout? If not then, use the Frame Layout instead. This will resolve overlapping issue. That's the only way to fix. I tried the "accepted" answer while searching for a solution for this problem and it didn't work.

Question 9

private void changeFragment(Fragment fr){
FrameLayout fl = (FrameLayout) findViewById(R.id.mainframe);
fl.removeAllViews();
FragmentTransaction transaction1 =getSupportFragmentManager().beginTransaction();
transaction1.add(R.id.mainframe, fr);
transaction1.commit();}

Question 10

when you have a overlap fragment, maybe your background of your fragment is transparent, you need put a android:background="@color/white"' inside your fragment propeties

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"

and white you need put inside of the colors.xml #FFFFFF in the rest folder.

Question 11

I have sometimes the same problem, but my problem is not related to different fragment managers (getSupportFragmentManager(), getFragmentManager()). I think there is still another problem. In my case, when I open the navigation drawer, I always delete old fragments on every menu option, for example:

Fragment calendarFragment = context.getSupportFragmentManager().findFragmentByTag(FragmentTag.CALENDAR.name());
if (calendarFragment != null)
{
    context.getSupportFragmentManager().beginTransaction().remove(calendarFragment).commit();
}

It's not possible to get into a sub menu without the navigation drawer, so the fragments are basically always removed. In some cases, after I remove and add a fragment again inside an Activity it suddenly overlaps with another (previous) fragment?! But why does the fragment manager suddenly finds previous fragments? That can either mean that the fragment manager is buggy and it does not remove old fragments, or that something other is broken.
My thought is, that it's somehow the fault of Android Studio or any other adb development tool which is used by it. Why I think that is, because Android Studio sometimes seem to loose the instance of the running app. Probably this problem is somehow related to the same issue: Android Studio not deploying changes to app. I didn't figure out yet when this happens. What I know is that it can't be a programming issue, because it's not reproducible after I relaunched the app by Android Studio. I guess there are somehow any background processes hanging which causes multiple instances of Activities, Fragments, fragment managers and so on. Furthermore it's not just this bug. I saw a lot of strange behaviours in past which are similar to this one. (For example the behaviours suddenly disappeared when the app was not started by IDE).

Question 12

It all has to do with the engineering behind the replace and the addToBackStack methods.

The replace method will actually do two things. Hide the existing fragment (let's say A) and add a new one (let's say B) in the container.

Adding that transaction to the back stack will do the opposite. Remove B and add A.

So, the solution to your problem is
1. use addToBackStack method.
2. make sure that the reverse replacement of fragments is the correct order

The second suggestion is really important, because it is pretty often that at some point the current fragment is not removed and another one is added, which causes the two fragments showing at the same time.

Question 13

Making the background color white solved it for me too. I think this is a bug or and implementation issue in the Android fragmentment manager. I was implementing my replace and popBackStack() correctly.

Question 14

When I had a problem like this it appeared that I was adding one fragment with childFragmentManager and another with parent's fragmentManager, so check that you use same type of fragment manager.

Question 15

I don't think implementing a white background is a safe solution although it may be convenient. Basically the problem occurs because fragment manager is confused about which fragment to pop.

backstack looks like this and thinks your on frag 4 1->2, 2->3, 3->4 but your actually on frag 6 for some reason so popbackstack goes

remove(4) add(3) <- now you have 3(new) and 6(left behind) blended together

To better control my navigation I keep track of my current/previous fragments and replace them like this. This allows my app to control fragment navigation.

if ( !(currentFragment instanceof Settings)) {
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.fragment_container, settings);
        fragmentTransaction.addToBackStack(null);
        previousFrag = currentFragment;
        currentFragment = settings;
        fragmentTransaction.commit();
    }

Secondly, I believe the fragmentmanager.replace() method is a better alternative. Not sure if that is available to OP at the time.

Third, to handle the androids native back press you need to be able to scroll back indefinitely. Many people recommend not adding the first fragment to back stack by not using this line.

fragmentTransaction.addToBackStack(null);

However if that's the case you must check if its the first time the app has loaded. If its not and you exclude this line then your app will have these issues whenever you navigate through this fragment. I prefer to leave it in place and do the following instead.

Not sure if this is considered a good solution but it works very well.

1- get backstack count 2- remove all existing frags 3- keep track of you fragment objects 4- if its the last frag in the stack the user wishes to exit and since we added the main activity to the back stack we need to double pop

@Override
public void onBackPressed() {

int num = getFragmentManager().getBackStackEntryCount();


        fl.removeAllViews();
        super.onBackPressed();

        if  (currentFragment != previousFrag) {
            currentFragment = previousFrag;
        }else{
            currentFragment = null;
        }

        if (num == 1){
           super.onBackPressed();
        }

Question 16

I found simple and clean solution. For me problem was in execution fragment transaction in every call of onCreate() of my Activity. Now I perform transaction only if savedInstanceState == null

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        if (savedInstanceState == null) {
        // replace fragment 
        }
    }

Question 17

Instead of using fragment as the container for the fragments, use FragmentContainerView. That solved the issue for me