Fragment is not being replaced but put on top of the previous one

Question

Activity:

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

Fragment1 fragment = new Fragment1();
Fragment2 fragment2 = new Fragment2();

transaction.replace(R.id.Fragment1, fragment);
transaction.addToBackStack(null);
transaction.commit();

FragmentTransaction transaction2 = getSupportFragmentManager().beginTransaction();
transaction2.replace(R.id.Fragment1, fragment2);
transaction2.addToBackStack(null);
transaction2.commit();

Code in the view:

<fragment
    android:id="@+id/Fragment1"
    android:name="com.landa.fragment.Fragment1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/include1" />

The problem is, the content doesn't really get replaced - it gets put on top (so it overlaps).

When I click back, the first fragment gets shown properly (without the second), but initially both are visible (I want only the last one to be visible).

What am I missing here?

In my case the problem was due to the fact that I was not using the appropriate id of the container view, i.e. I was not passing the correct `containerViewId` (in the [`replace`](https://developer.android.com/reference/android/app/FragmentTransaction#replace(int,%20android.app.Fragment,%20java.lang.String)) method). — nbro, Dec 18 '18 at 14:25

Sapan Diwakar · Accepted Answer · 2016-01-25T15:51:09.940

150

You are doing two things wrong here:

You cannot replace a fragment that is statically placed in an xml layout file. You should create a container (e.g. a FrameLayout) in the layout and then add the fragment programatically using FragmentTransaction.
FragmentTransaction.replace expects the id of the container that contains the fragment and not the id of the fragment as the first parameter. So you should pass the first argument as the id of the container that you added the first fragment to.

You can refer to this link for more details.

edited Jan 25 '16 at 15:51

answered Feb 11 '13 at 10:50

Sapan Diwakar

10,480
6
33
43

17

Using `FrameLayout` as a container is better than using `LinearLayout`. – Marcel Bro Feb 11 '14 at 13:03
3

Using an empty FrameLayout in Activity solved my problem too – Subtle Fox Feb 08 '16 at 12:48
2

It works doing this. But then when I start my application and immediately press the back button, I end up in a state where the fragment is empty, instead of exiting the app? – MasterScrat Feb 08 '17 at 14:16
@MasterScrat Omit the `addTobackStack(..)` when doing your transaction for the first time. This will avoid placing the empty FrameLayout container onto the back stack. You will still be able to navigate back to the fragment your adding. – Alex Meuer Aug 02 '17 at 10:24
Here is a great video that demonstrates your explanation. https://www.youtube.com/watch?v=EbcdMxAIr54 – SQL and Java Learner Oct 17 '18 at 18:48

score 33 · Answer 2 · edited Dec 18 '18 at 01:34

I had a similar problem but my issue was that I was using two different Fragment managers: One from getSupportFragmentManager() and one from getFragmentManager(). If I added one fragment with the SupportFragmentManager and then tried replacing the fragment with the FragmentManager, the fragment would just get added on top. I needed to change the code so that the same FragmentManager would be used and that took care of the issue.

score 17 · Answer 3 · answered Feb 11 '13 at 10:50

The android developer site suggests the use of a FrameLayout to load fragments dynamically at run-time. You have hard-coded the fragment in your xml file. So it cannot be removed at run-time as mentioned in this link:

http://developer.android.com/training/basics/fragments/creating.html

this link shows how to add fragments through your program:

http://developer.android.com/training/basics/fragments/fragment-ui.html

Emad · Answer 4 · 2018-06-27T16:16:07.093

I had the same problem and saw all the answers, but none of them contained my mistake! Before trying to replace the current fragment, I was showing the default fragment in the xml of the container activity like this:

<FrameLayout
    android:id="@+id/fragment_frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="....ShopFragment"
        android:id="@+id/fragment"
        tools:layout="@layout/fragment_shop" />
</FrameLayout>

after that, although i was passing the FrameLayout to the fragmentTransaction.replace() but i had the exact problem. it was showing the second fragment on top of the previous one.

The problem fixed by removing the fragment from the xml and showing it programmatically in the onCreate() method of the container activity for the default preview on the start of the program like this:

    fragmentTransaction = getFragmentManager().beginTransaction();
    fragmentTransaction.replace(R.id.fragment_frame_layout,new ShopFragment());
    fragmentTransaction.addToBackStack(null);
    fragmentTransaction.commit();

and the container activity xml:

<FrameLayout
    android:id="@+id/fragment_frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

score 5 · Answer 5 · answered Feb 11 '13 at 10:47

5

You can clear backStack before replacing fragments:

    FragmentManager fm = getActivity().getSupportFragmentManager();

    for (int i = 0; i < fm.getBackStackEntryCount(); i++) {
        fm.popBackStack();
    }

    // replace your fragments

answered Feb 11 '13 at 10:47

Michał Z.

4,119
1
22
32

the problem is that he has declared the fragment in his xml layout file. Hence it cannot be removed/replaced at run-time. – Poonam Anthony Feb 11 '13 at 10:53
this worked for me, trying to replace a fragment without clearing the backstack seemed to leave the most recent backstack entry over the top of any other fragment. – speedynomads Jan 23 '14 at 21:48

score 3 · Answer 6 · edited Nov 19 '19 at 11:46

3

<FrameLayout
    android:id="@+id/fragment_frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:windowBackground">
//Add fragment here
</FrameLayout>

Add android:background="?android:windowBackground"> to the container in which your fragment resides. In in my case I added a FrameLayout, that should help.

edited Nov 19 '19 at 11:46

Aimery

1,559
1
19
24

answered Nov 19 '19 at 10:59

ralph tashinga nyoni

31
2

score 1 · Answer 7 · answered Sep 16 '15 at 17:33

I agree with Sapan Diwakar's answer. But I have found a workaround on how to do this.

First, in your activity(e.g. activity_main), where you have all the layouts, Add a FrameLayout. It's height and width should be match parent. Also, give it an id.

Now, in your fragment which is going to replace the current layout, call onPause() and onResume(). Initialise all the all the inner containers in View. And set their visibility to GONE in onResume() and VISIBLE in onPause().

NOTE: Not the FrameLayout which you are replacing with this fragment.

Suppose you have ViewPager, TabLayout, ImageView and a custom <fragment> in activity_main.xml. Add, a FrameLayout as mentioned above.

In abcFragment.java, in onClick() function, add addToBackstack(null) in transaction.

Example code:

in xyzFragment, which is going to replace abcFragment(and everything shown in activity_main.xml), do this

@Override
    public void onResume() {
        super.onResume();

    // On resume, make everything in activity_main invisible except this fragment.
    slidingTabs = getActivity().findViewById(R.id.sliding_tabs);
    viewPager = getActivity().findViewById(R.id.pager);
    miniPlayerFragment = getActivity().findViewById(R.id.mini_pager);

    slidingTabs.setVisibility(View.GONE);
    viewPager.setVisibility(View.GONE);
    miniPlayerFragment.setVisibility(View.GONE);
}

@Override
public void onPause() {
    super.onPause();

    // Make everything visible again
    slidingTabs = getActivity().findViewById(R.id.sliding_tabs);
    viewPager = getActivity().findViewById(R.id.pager);
    miniPlayerFragment = getActivity().findViewById(R.id.mini_pager);

    slidingTabs.setVisibility(View.VISIBLE);
    viewPager.setVisibility(View.VISIBLE);
    miniPlayerFragment.setVisibility(View.VISIBLE);
}

Happy coding!

score 1 · Answer 8 · answered Feb 22 '16 at 06:50

Use a container instead of using fragment

<FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello World!" />

Now in MainActivity

if(condition)
    getFragmentManager().beginTransaction().replace(R.id.container,new FirstFragment()).commit();                    
else
    getFragmentManager().beginTransaction().replace(R.id.container, new SecondFragment()).commit();

Please note that your fragment class should import 'android.app.Fragment' Make sure, that you use "support.v4" or the "original" implementations and do not mix them. I was getting this problem because I had mixed them.

score 0 · Answer 9 · edited Mar 04 '20 at 07:29

Thank you to Sapan Diwakar and others. This answer helped me. I simply created a RelativeLayout without a fragment inside it, used the RelativeLayout as a parent or group view, specified that group view in the transaction to replace, and it worked.

Code:

getSupportFragmentManager().beginTransaction()
                            .replace(R.id.content_group_view, itemDetailFragment).commit();

XML:

 <RelativeLayout
         android:id="@+id/content_group_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent">

 </RelativeLayout>

score 0 · Answer 10 · answered May 06 '16 at 15:29

0

You can use setTransition method from FragmentTransaction to fix overlapping issue.

transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);

answered May 06 '16 at 15:29

Lavakush

1,910
2
11
14

score 0 · Answer 11 · answered Feb 16 '17 at 08:49

In Oncreate ()

  BaseFragmentloginpage fragment = new BaseFragmentloginpage();
            android.support.v4.app.FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
            fragmentTransaction.replace(R.id.frame, fragment);
            fragmentTransaction.isAddToBackStackAllowed();
            fragmentTransaction.commit();

now this will be always your default fragment ...if you add fragment in xml layout it will always overlap , so set initial content with fragment at run time

score 0 · Answer 12 · answered Apr 06 '17 at 07:05

i had same problem after using this problem solved

Take frame layout where u are replacing ur fragment

<FrameLayout
                android:id="@+id/fragment_place"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

and code for replacement

public void selectFrag(View view) {
Fragment fr;

  if(view == findViewById(R.id.button2))
{
     fr = new FragmentTwo();

 }else {
     fr = new FragmentOne();
 }
 FragmentManager fm = getFragmentManager();
 FragmentTransaction fragmentTransaction = fm.beginTransaction();
 fragmentTransaction.replace(R.id.fragment_place, fr);
 fragmentTransaction.commit();

if you want whole example i will send you just comment me......

score 0 · Answer 13 · answered Jun 04 '18 at 15:05

0

I also had the same issue, but it was because I had not changed the background color of the fragment that I was trying add to my framelayout.

Try doing this, with layout_height and layout_width set to match_parent

answered Jun 04 '18 at 15:05

Swastik Udupa

316
3
17

score 0 · Answer 14 · answered Jul 04 '19 at 22:55

I once had this problem and found out that it was because I had accidentally deleted the android:background attribute that is missing on your xml code. I believe it works like when you're painting a wall, android:background is the color that the wall will be and the other views are placed on top of that base color. When you don't paint the wall prior to positioning your views they will be on top of what was already in that wall, in your case, your other fragment. Don't know if that will help you though, good luck.

score 0 · Answer 15 · answered Oct 18 '19 at 12:08

I have tried above all the case and try to fix the issue but still not got solution. I don't know why its not working for me. I agree with above answers because so many agree with it.

I am just extending the answer and below is the way which is working for me.

I have added this property android:clickable="true" in top parent layout on fragment.xml file.

I hope someone will get help.

score 0 · Answer 16 · edited Aug 05 '20 at 12:17

0

Check your frame layout ID and replace it as below

fragmentTransactionChange = MainActivity.this.getSupportFragmentManager().beginTransaction();
fragmentTransactionChange.replace(R.id.progileframe, changeFragment);
fragmentTransactionChange.addToBackStack(null);
fragmentTransactionChange.commit();

edited Aug 05 '20 at 12:17

Prathap Reddy

1,688
2
6
18

answered Aug 05 '20 at 09:13

Sandeep Pareek

1,636
19
21

Fragment is not being replaced but put on top of the previous one

16 Answers16

Linked

Related