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

i working on app has 2 fragments on each other. lower fragment navigation wheel, 1 never changes, upper fragment changes when user changes mode on lower fragment. problem having when use wheel change mode new view added hierarchy, old 1 not removed, newly added view wrapped in framelayout did not define anywhere.

this code have in oncreate of 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 code use switch fragments

randomactivity.java

private void switchfragments(modefragment fragment){     fragmentmanager = getsupportfragmentmanager();     fragmenttransaction = fragmentmanager.begintransaction();     fragmenttransaction.replace(r.id.mode_view, fragment);     fragmenttransaction.commit();    } 

this root view both placeholders 2 fragments 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 fragments (i want end lot of different modes, have 2 currently) 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 happening, take @ these screenshots hierachyviewer

this annoying , not how supposed work. how rid of redundant framelayout parent of added views? , how make android replace 1 fragment instead of adding it?

similar problems seem occur when fragments declared in xml, can see mine made in java code. example here

also. using 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); } 

}