Замена фрагментов не работает/Правильно ли я это делаю?

Мне потребовалось некоторое время, чтобы разобраться с фрагментами, но это должен быть мой последний вопрос о фрагментах, так как я думаю, что я их почти закончил. Я знаю, что это огромный беспорядок кода, который нужно пройти. Но я был бы признателен за помощь, чтобы убедиться, что я не нарушаю никаких фундаментальных правил с фрагментами.

Я собираюсь опубликовать весь свой код только для того, чтобы посмотреть, может ли кто-нибудь «просмотреть его», чтобы увидеть, делаю ли я какие-либо серьезные ошибки или мне следует пойти более простым путем. Наконец, как указано в заголовке, мой фрагмент НЕ заменяется... он будет добавлен сверху.

Дерево файлов:

MainActivity.java:

package com.example.learn.fragments;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends FragmentActivity{

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

    /* Add a class to handle fragment */
    public static class SSFFragment extends Fragment {
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            View v = inflater.inflate(R.layout.choose_pill_frag, container,
                    false);
            return v;
        }
    }

    public void red(View view) {


        // Create new fragment and transaction
        ExampleFragments newFragment = new ExampleFragments();
        android.support.v4.app.FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

        // Replace whatever is in the fragment_container view with this fragment,
        // and add the transaction to the back stack
        transaction.replace(R.id.frag, newFragment);
        transaction.addToBackStack(null);

        // Commit the transaction
        transaction.commit();
    }

    public void blue(View view) {
        //Figure out code for "red" first
    }

}

ExampleFragments.java:

package com.example.learn.fragments;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ExampleFragments extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.red_pill_frag, container, false);
    }
}

ActivityMain.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <fragment
        android:id="@+id/frag"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.example.learn.fragments.MainActivity$SSFFragment" />

</RelativeLayout>

выберите _таблетка _frag.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:onClick="blue"
        android:src="@drawable/blue" />

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:onClick="red"
        android:src="@drawable/red" />

</RelativeLayout>

красный _таблетка _frag.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="You stay in Wonderland and I show you how deep the rabbit-hole goes."
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Приложение должно показать две кнопки. Две кнопки существуют в одном фрагменте, а затем, если вы нажмете кнопку, этот фрагмент заменяется новым фрагментом, который показывает правильный текст. На данный момент он должен заменить, но, кажется, только добавляет его сверху.