title: Replacing Fragments isn't working/Am I executing this the proper way?
body: <p>It's taken me some time to wrap my head around fragments, but this should be my last question on fragments, since I think I just about have them down. I know this is a huge mess of code to go through. But I'd appreciate the help, to make sure I'm not breaking any fundamental rules with fragments.</p>
  
  <p>I am going to post all of my code just to see if someone can "look over it" to see if I'm making any major mistakes or if I should go a simpler route. Lastly, as stated in the title, my fragment is NOT being replaced... it'd being added on top.</p>
  
  <p>File Tree:</p>
  
  <p><img src="https://i.stack.imgur.com/sxh3L.png" alt="enter image description here"></p>
  
  <p>MainActivity.java:</p>
  
  <pre><code>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
      }
  
  }
  </code></pre>
  
  <p>ExampleFragments.java:</p>
  
  <pre><code>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);
      }
  }
  </code></pre>
  
  <p>ActivityMain.xml:</p>
  
  <pre><code>&lt;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" &gt;
  
      &lt;fragment
          android:id="@+id/frag"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          class="com.example.learn.fragments.MainActivity$SSFFragment" /&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>choose_pill_frag.xml</p>
  
  <pre><code>&lt;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" &gt;
  
      &lt;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" /&gt;
  
      &lt;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" /&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>red_pill_frag.xml</p>
  
  <pre><code>&lt;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" &gt;
  
      &lt;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" /&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>The application should show two buttons. The two buttons exist in a single fragment, and then if you hit a button, the fragment gets replaced with a new fragment that shows the proper text. As of right now, it should replace, but it only seems to add it on top.</p>