Two Fragments Displayed Inside a Fragment(Page)

Question

I am trying to display the two fragments 'leftfrag' and rightfrag, in one of the ViewPager's pages through MyFragmentPagerAdapter. In case 0 a new fragment is instantiated AndroidFragment inside this particular page, I'd like to display the two fragments leftfrag and rightfrag. I tried creating another xml to inflate Not the main to contain the two fragments but got errors no views. I am particularity lost at this. Thanks

MainActivity

public class MainActivity extends SherlockFragmentActivity implements ActionBar.TabListener {
...
setContentView(R.layout.main); //Got confused with this xml
 MyFragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(fm, this);
...
}

MyFragmentPagerAdapter

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{
@Override
    public Fragment getItem(int arg0) {

        switch(arg0){
            /** Android tab is selected */
            case 0:
                AndroidFragment androidFragment = new AndroidFragment();
                androidFragment.AFragment(mContext);
                return androidFragment;
}

AndroidFragment

public class AndroidFragment extends SherlockFragment{

   public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

         View rootView = inflater.inflate(R.layout.main, container, false);
             //I am trying to replace or add two fragments in the main.xml see xml below

         final int MARGIN = 16;
        leftFrag = new RoundedColourFragment(getResources().getColor(
                R.color.android_green), 1f, MARGIN, MARGIN / 2, MARGIN, MARGIN);

        rightFrag = new RoundedColourFragment(getResources().getColor(
                R.color.honeycombish_blue), 2f, MARGIN / 2, MARGIN, MARGIN,
                MARGIN);

         //Should I use Replace?
         //ft.replace(R.id.fragg, leftFrag, "left");
         //ft.replace(R.id.fragg2, rightFrag, "right");

        FragmentTransaction ft = getChildFragmentManager().beginTransaction();
         ft.add(R.id.fragg, leftFrag, "left");
         ft.add(R.id.fragg2, rightFrag, "right");
         ft.addToBackStack(null);
         ft.commit();
}

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

     <FrameLayout 

            android:id="@+id/fragg"
            android:layout_weight="2"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

      <FrameLayout

            android:id="@+id/fragg2"
            android:layout_weight="2"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

<android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    />

</LinearLayout>

RoundedColourFragment

public class RoundedColourFragment extends SherlockFragment {

    private View mView;
    private int mColour;
    private float mWeight;
    private int marginLeft, marginRight, marginTop, marginBottom;

    // need a public empty constructor for framework to instantiate
    public RoundedColourFragment() {

    }

    public RoundedColourFragment(int colour, float weight, int margin_left,
            int margin_right, int margin_top, int margin_bottom) {
        mColour = colour;
        mWeight = weight;
        marginLeft = margin_left;
        marginRight = margin_right;
        marginTop = margin_top;
        marginBottom = margin_bottom;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mView = new View(getActivity());

        GradientDrawable background = (GradientDrawable) getResources()
                .getDrawable(R.drawable.rounded_rect);
        background.setColor(mColour);

        mView.setBackgroundDrawable(background);
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(0,
                LayoutParams.FILL_PARENT, mWeight);
        lp.setMargins(marginLeft, marginTop, marginRight, marginBottom);
        mView.setLayoutParams(lp);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        return mView;
    }

}