Le remplacement des Fragments ne fonctionne pas/je Suis l'exécution de ce la bonne façon?

Il m'a fallu un certain temps pour envelopper ma tête autour de fragments, mais ce devrait être ma dernière question sur des fragments, car je crois que j'ai à peu près les avoir vers le bas. Je sais que c'est un énorme gâchis de code pour passer à travers. Mais je te remercie de l'aide, pour m'assurer que je ne suis pas d'enfreindre les règles fondamentales avec les fragments.

Je vais poster tout mon code, juste pour voir si quelqu'un peut "regardez," pour voir si je suis en train de faire toutes les erreurs ou si je dois aller à une simplification de la route. Enfin, comme précisé dans le titre, mon fragment n'est PAS remplacée... il avait ajouté sur le dessus.

De L'Arborescence De Fichiers:

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>

choose_pill_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>

red_pill_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>

La demande doit faire apparaître deux boutons. Les deux boutons exister dans un seul fragment, et puis si vous appuyez sur un bouton, le fragment sera remplacé par un nouveau fragment qui montre le bon texte. À partir de maintenant, il doit la remplacer, mais il semble que pour l'ajouter sur le dessus.