Replacing activity view with fragment view

I've been searching for hours and hours on trying to understand the relationship between Fragments and Activities and I still cant get it right with my code.

I have a mainScreen class that loads actvity_main.xml. This main screen has a layout with a graph and sidebar etc.

I have a button that is on the side bar that is supposed to launch a sidebar fragment that has a checkbox listview in it so I can select data to show on my graph etc. But that fragment is not showing no matter what I do. It shows the "Bing~!" Toast but no other view is launched. Perhaps I shouldn't be using a fragment? I don't want to start a new activity as the checkbox is supposed to interact with the graph and another fragment with a dynamic table in it and it will interact back and forth and so on. I'm not too sure what to do here. I have about 3 weeks of Android experience so I'm not exactly knowledgeable about the whole shebang of it just yet. Really appreciate any ideas or help I can get. I am completely stumped and hence had to post my own question. I really really appreciate any kind of help! Thanks!

mainScreen.java

public class mainScreen extends Activity {

private TextView text_display;
private Button button_list;
private Button button_table;
private String[] dataHolder;
public boolean listClicked = false;


public void loadData () {

    //loaddata stuff here

}

public void createGraph () {

    //graph create stuff here


}

public void buttonClick () {

    button_list.setOnClickListener(
            new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                    sideFragment sf = new sideFragment();
                    FragmentManager fm = getFragmentManager();
                    FragmentTransaction ft = fm.beginTransaction();
                    ft.replace(R.id.side_fragment, sf);
                    ft.commit();

                    Toast.makeText(mainScreen.this, "Bing~!", Toast.LENGTH_SHORT).show();
                }
            }
    );


}


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Intent i = getIntent();
    dataHolder = i.getStringArrayExtra("dataHolder");
    button_list = (Button)findViewById(R.id.button_list);

    loadData();
    createGraph();
    buttonClick();

}

}

activity_main.xml

<LinearLayout xmlns:android="http://ift.tt/nIICcg"
xmlns:tools="http://ift.tt/LrGmb4"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".mainScreen"
android:id="@+id/mainlayout"
android:orientation="horizontal"
android:weightSum="1">

<LinearLayout
    android:orientation="vertical"
    android:layout_width="85dp"
    android:layout_height="match_parent">

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="85dp"
        android:layout_height="85dp"
        android:text="Select"
        android:id="@+id/button_list" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="85dp"
        android:layout_height="85dp"
        android:text="Table"
        android:id="@+id/button_table" />
</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:text=" "
        android:id="@+id/text_display"
        android:textSize="26dp"
        android:layout_margin="5dp" />

    <com.jjoe64.graphview.GraphView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/graph" />

</LinearLayout>

<fragment
    android:name="xabre.mobileicip.sideFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/side_fragment" />

</LinearLayout>

sideFragment.java

public class sideFragment extends Fragment implements android.widget.CompoundButton.OnCheckedChangeListener {

ListView listviewFrag;
ArrayList<sideFrag> sideFragList;
sideFragAdapter sfAdapter;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.side_fragment, container, false);

    listviewFrag = (ListView) view.findViewById(R.id.side_listview);
    //displayList();

    return view;

}

private void displayList() {

    sideFragList = new ArrayList<sideFrag>();
    sideFragList.add(new sideFrag("SPO2"));
    sideFragList.add(new sideFrag("O2 Flow Rate"));
    sideFragList.add(new sideFrag("Resp."));
    sideFragList.add(new sideFrag("Cardiac Output"));
    sideFragList.add(new sideFrag("Cardiac Index"));
    sideFragList.add(new sideFrag("SVR"));
    sideFragList.add(new sideFrag("Wedge Pressure"));

    listviewFrag.setAdapter(sfAdapter);

}

@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

    int pos = listviewFrag.getPositionForView(buttonView);
    if (pos != ListView.INVALID_POSITION) {
        sideFrag sf = sideFragList.get(pos);
        sf.setSelected(isChecked);

        Toast.makeText(getActivity(),"" + sf.getName(), Toast.LENGTH_SHORT).show();
        //Toast.makeText(sideFragment.this, "Clicked on sideFrag: " + sf.getName() + ". State: is " + isChecked, Toast.LENGTH_SHORT).show();
    }
}
}

side_fragment.xml

<LinearLayout
xmlns:android="http://ift.tt/nIICcg"
xmlns:tools="http://ift.tt/LrGmb4"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".sideFragment"
android:id="@id/side_fragment">

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="HELLO WORLD"
    android:id="@+id/helloTester"/>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp">

    <ListView
        android:id="@+id/side_listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>

</LinearLayout>

</LinearLayout>

side_list.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
android:layout_width="match_parent" android:layout_height="match_parent">

<CheckBox android:id="@+id/check_box"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="onCheckboxClicked"
    android:layout_marginBottom="15dp" />

<TextView
    android:id="@+id/check_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/check_box"
    android:textStyle="bold"/>


</RelativeLayout>

sideFragAdapter.java

    package xabre.mobileicip;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.TextView;

import java.util.List;

class sideFrag {
    String name;
    boolean selected = false;
    public sideFrag(String name) {
        super();
        this.name = name;
    }

    public boolean isSelected() {
        return selected;
    }

    public void setSelected(boolean selected) {
        this.selected = selected;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}
public class sideFragAdapter extends ArrayAdapter<sideFrag> implements CompoundButton.OnCheckedChangeListener {

    private List<sideFrag> sideList;
    private Context context;

    public sideFragAdapter (List<sideFrag> sideList, Context context) {
        super(context, R.layout.side_list, sideList);
        this.sideList = sideList;
        this.context = context;
    }

    private static class sideHolder {
        public CheckBox check_box;
        public TextView check_name;
        /* public CheckBox check_O2FR;
        public CheckBox check_Resp;
        public CheckBox check_Carout;
        public CheckBox check_Carind;
        public CheckBox check_svr;
        public CheckBox check_resprate;
        public CheckBox check_Peep;
        public CheckBox check_O2AF;
        public CheckBox check_FIO2;
        public CheckBox check_PO2;
        public CheckBox check_HCO3;
        public CheckBox check_Urea;
        public CheckBox check_Potassium;
        public CheckBox check_Sodium;
        public CheckBox check_Creatinine;
        public CheckBox check_FluidIn;
        public CheckBox check_FluidOut;
        */
    }

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    View v = convertView;

    sideHolder holder = new sideHolder();

    if(convertView == null) {

        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = inflater.inflate(R.layout.side_list, parent, false);

        holder.check_box = (CheckBox) v.findViewById(R.id.checkbox);
        holder.check_name = (TextView) v.findViewById(R.id.check_name);


        holder.check_box.setOnCheckedChangeListener(this);

    } else {
        holder = (sideHolder) v.getTag();
    }

    sideFrag p = sideList.get(position);
    holder.check_name.setText(p.getName());
    holder.check_box.setChecked(p.isSelected());
    holder.check_box.setTag(p);

    return v;
}

@Override
public void onCheckedChanged(CompoundButton buttonView,
                             boolean isChecked) {

}
}