Swapping Fragments in a Single Activity?

On the tablet we have two fragments (two different views of the same data) that sit next to each other. On mobile devices we'd like to switch between these two fragments at the push of a button. The mobile layout looks something like this:

<RelativeLayout>
  <fragment id="container" name="fragA"/>
  <ImageButton onClick="swapFragments" />
</RelativeLayout>

In the activity's swapFragments(View) method, I'm attempting to use the FragmentManager to replace fragA with fragB:

FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.container, new FragB());
fragmentTransaction.commit();

...but I can always see fragA through the transparent parts of fragB, leading me to believe that it's just putting fragB on top of fragA, not replacing it.

I'm starting down the path of using hide(Fragment) and similar methods in the transaction, but that doesn't look like the right way to do it.

Any tips on how to swap these fragments the right way?

Edit: I saw the answer to this question. This confuses me, though, as I need to be able to specify a different layout for tablet and phone. If I have to programmatically add fragments, how do I avoid code specific to each layout in the activity (i.e.

 if(TABLET) {
   addFragmentA();
   addFragmentB();
 } else {
   add开发者_如何学编程FragmentA();
 }

Don't mix Fragments created in XML and in Code - bad things will happen. Keep a container view in the layout, then add / replace fragments into it (don't have the first fragment inside it).

Looks OK to me, I'm doing something similar albeit I'm adding my initial fragment from the activity using add rather than having it loaded by referencing it in the layout. There might be a bug there. FYI I'm using the compatibility library.

Might be worth trying:

1) Add the transaction to the back stack to see if that makes a difference, it seems like you may want that functionality anyway.

2) Give your fragment in the layout an id or tag, then use that to perform a remove and add fragB instead.

3) Try loading your fragA from code instead and see if that makes a difference.

well, first of all you can try using the newInstance() factory method for instantiating the fragment B and not just new FragB(). However, I think this is not the problem.

Can you just try not to use in you XML layout the fragment tag? Just do something like this:

<RelativeLayout>
  <Linear/FrameLayout id="container" name="fragA"/>
  <ImageButton onClick="swapFragments" />
</RelativeLayout>

So use like a Frame or LinearLayout as container for you fragment and inflate it in the onCreateView callback from the Fragment. Maybe it helps, let me know.

Cheers!

As far as I can see you are not hiding / detaching the previous fragment so both will be displayed. You can implement something like this:

        if (mFragment != null) { 
            ft = mActivity.getSupportFragmentManager().beginTransaction();  
            ft.hide(mFragment);                 
            ft.detach(mFragment);
            ft.commitAllowingStateLoss();
        }