Replacing fragment results in an extra view hierachy wrapped in a framelayout

Question

I am currently working on an app that has two fragments over each other. The lower fragment is a navigation wheel, so that one never changes, but the upper fragment changes when the user changes the mode on the lower fragment. The problem I am having is that when I use the wheel to change mode a new view is added to the hierarchy, but the old one is not removed, also the newly added view is wrapped in a FrameLayout the I did not define anywhere.

This is the code I have in onCreate of my activity

RandomActivity.java

@Override
public void onCreate(Bundle savedInstanceState) {           
    super.onCreate(savedInstanceState);

    setContentView(R.layout.root);

    fragmentManager = getSupportFragmentManager();
    fragmentTransaction = fragmentManager.beginTransaction();       
    modeFragment = new LottoModeFragment();
    wheelFragment = new WheelFragment();        
    fragmentTransaction.add(R.id.mode_view, modeFragment);
    fragmentTransaction.add(R.id.wheel_view, wheelFragment);        
    fragmentTransaction.commit();
}

This is the code I use to switch fragments

RandomActivity.java

private void switchFragments(ModeFragment fragment){
    fragmentManager = getSupportFragmentManager();
    fragmentTransaction = fragmentManager.beginTransaction();
    fragmentTransaction.replace(R.id.mode_view, fragment);
    fragmentTransaction.commit();   
}

This is the root view where both placeholders for the two fragments are declared

root.xml

<org.random.wheel.RootView
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/root"
  android:contentDescription="@string/root_desc"    
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  android:background="@color/root_background">

  <FrameLayout 
      android:id="@+id/mode_view"
      android:contentDescription="@string/mode_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

  <FrameLayout 
      android:id="@+id/wheel_view"
      android:contentDescription="@string/wheel_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>    
</org.random.wheel.RootView>

In my fragments (I want to end up with a lot of different modes, but I only have two currently) I do this in onCreateView

LottoModeFragment

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    modeView = (LottoModeView) inflater.inflate(R.layout.lotto_mode, container, false);
    return modeView;
}

To better illustrate what is happening, take a look at these screenshots from the hierachyviewer

This is clearly annoying and not how it is supposed to work. How do I get rid of the redundant FrameLayout that is the parent of the added views? And how do I make Android actually replace one fragment with another instead of just adding it?

Similar problems seem only to occur when the fragments are declared in xml, but as you can see mine are made in java code. For example here

Also. I am using the support package.

Thanks in advance.

Edit

Included ModeView.java upon request:

ModeView.java

public class ModeView extends RelativeLayout{

private RandomActivity activity;
private AppDisplaySizeInterface appDisplay;

public ModeView(Context context, AttributeSet attrs) {      
    super(context, attrs);  
    activity = (RandomActivity) getContext();
}

private void applyRoundedCorners(){
    int width = (int) activity.getAppDisplaySizes().getModeWidth();
    int height = (int) activity.getAppDisplaySizes().getModeHeight();               
    Bitmap original = Conversion.drawableToBitmap(this.getBackground(), width, height);
    float radius = Float.parseFloat(getResources().getString(R.string.rounded_corner_radius));
    RoundedCorners rounded = new RoundedCorners(original, radius, 0);
    this.setBackgroundDrawable(rounded);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    appDisplay = activity.getAppDisplaySizes();     
    super.onMeasure(MeasureSpec.makeMeasureSpec((int) appDisplay.getModeWidth(), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec((int) appDisplay.getModeHeight(), MeasureSpec.EXACTLY));
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {      
    super.onLayout(changed, l, t, r, b);        
    applyRoundedCorners();      
}

@Override
protected void onDraw(Canvas canvas) {      
    super.onDraw(canvas);
}

}