Switching fragments during runtime

Question

I found this article most helpful/unhelpful: Switching between Fragments in a single Activity

I'm not sure if we have the same problem, which is why I'm posting my code anyway to see if I'm also going about this the wrong way. The above mentioned solution seems to solve the problem using a method that I feel makes fragments unnecessary. Still very new, it could be very well that my logic is wrong. Anyway here is my problem:

I have a screen that comes up and it gives you two choices, either blue pill or red pill (these two buttons are contained in a fragment). If you select the red pill a new fragment replaces the existing fragment with the text "You stay in wonderland..." or if the blue pill is selected a fragment replaces the existing fragment with the text "The story ends...".

This is just the example I'm using for now to teach myself fragments.

I have 1 activity and 1 layout and 3 fragments.

My activity:

package com.example.learn.fragments;

import android.app.Activity;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {

    @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) {
        // Change fragment code here?
    }

    public void blue(View view) {
        // Change fragment code here?
    }

}

My layout:

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

Starting Fragment:

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

Blue Pill Frag:

<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="The story ends, you wake up in your bed and believe whatever you want to believe."
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Red Pill Frag:

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

Issue

1: Should I be going about this in this way?

2: What would be the appropriate code to use to complete this? FragmentTransaction?

Answer 1

Take a look at this.

I was going about fragments incorrectly it seems.

Replacing Fragments isn't working/Am I executing this the proper way?

Answer 2

The above mentioned solution seems to solve the problem using a method that I feel makes fragments unnecessary.

I believe the link you posted doesn't avoid fragments entirely. Fragments can be specified in xml files (in which case they are permanent) or in code using FragmentTransactions (in which case you can add, remove them).

public void red(View view) {
    // Change fragment code here?
}

public void blue(View view) {
    // Change fragment code here?
}

I think you want onClickListeners here linked to your image buttons. Inside them you will call your FragmentTransaction add/remove/swaps.