How to switch between fragments during onclick?

I have a project I'm trying to do. I ran into a little issue and I'm not sure how to get around it. Below is an image of the application so far.

What I would like it to do is when the user onclicks one of the list items, the part which says "Hello! It's Fragment2" changes to a new xml which I declared in the app. So if I click the ATO listItem, then the fragment on the right side should change to something like "Hello! It's ATO Fragment"

Here is my code so far:

AndroidListFragmentActivity:

package com.exercise.AndroidListFragment;

import android.app.Activity;
import android.os.Bundle;

public class AndroidListFragmentActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Fragment2:

package com.exercise.AndroidListFragment;

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

public class Fragment2 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.fragment2, container, false);
    }

}  

MyListFragment1:

package com.exercise.AndroidListFragment;

import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MyListFragment1 extends ListFragment {

    String[] options ={
            "ATO", 
            "BETA", 
            "DELT", 
            "PHI DELT",
            "SAE", 
            "SIG NU", 
            "FIJI", 
            "SIG CHI",
            "PHI PSI" 
    };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ListAdapter myListAdapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, options);
        setListAdapter(myListAdapter);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.listfragment1, container, false);
    }

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        // TODO Auto-generated method stub
        Toast.makeText(getActivity(), getListView().getItemAtPosition(position).toString(), Toast.LENGTH_LONG).show();
    }
}

Fragment2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/fragment2text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello! It's Fragment2" />
</LinearLayout>

listfragment1.xml

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:orientation="vertical"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:paddingLeft="8dp"
         android:paddingRight="8dp">

     <ListView android:id="@id/android:list"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:layout_weight="1"
               android:drawSelectorOnTop="false"/>

     <TextView android:id="@id/android:empty"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:text="No data"/>
 </LinearLayout>

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

  <fragment
      android:name="com.exercise.AndroidListFragment.MyListFragment1"
      android:id="@+id/fragment1"
      android:layout_weight="1"
      android:layout_width="0px"
      android:layout_height="match_parent" />
  <fragment
      android:name="com.exercise.AndroidListFragment.Fragment2"
      android:id="@+id/fragment2"
      android:layout_weight="2"
      android:layout_width="0px"
      android:layout_height="match_parent" />

</LinearLayout>

Solution 1:

Not sure what's the minimal fix to get your code working, but have you looked at using a Navigation Drawer to switch between the fragments? It looks to me like the example in the official docs matches pretty much exactly what you want to achieve.

A key is to have some kind of container for the currently displayed fragment (instead of using <fragment> like in your XML). For example:

 <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

Then, switching fragments goes something like this:

Fragment fragment = new Fragment2();
// Insert the fragment by replacing any existing fragment
FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction()
               .replace(R.id.content_frame, fragment)
               .commit();

Further reading: Add a Fragment to an Activity at Runtime in Android developer docs.

Solution 2:

private void openFragment (int number) {

        Fragment fragment = new Fragment();

        switch (number) {
            case FRAGMENT_1:
                fragment = new *Fragment1*();
                break;

            case FRAGMENT_2:
                fragment = new *Fragment2*();
                break;
        }

        getSupportFragmentManager().beginTransaction()
                .replace(R.id.fragment_frame, fragment)
                .commit();
    }