On replacing one list fragment with another, the new fragment overlaps the older one

Question

I have two list fragments. So basically when any list element is clicked on fragment 1. I need to replace the fragment with newer one. I am using fragment transactions to do this but what happens is the newer fragment overlaps with older one instead of replacing. My codes and XMLs:

package com.example.classwise;
import java.util.Arrays;
import java.util.List;
import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.app.ListFragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;

public class Schedule extends ListFragment {
List<String> days = Arrays.asList("Monday", "Tuesday", "Wednesday","Thursday","Friday");
@Override
public View onCreateView(LayoutInflater inflater,
         ViewGroup container,  Bundle savedInstanceState){

    final View theInflatedView = inflater.inflate(R.layout.schedule2, container, false);
    return theInflatedView;
}

@Override
public void onStart() {
    super.onStart();
    Log.w("sadsad","yooyo");
    ScheduleListAdapter daysListArrayAdapter = new ScheduleListAdapter(getActivity(), days);
    setListAdapter(daysListArrayAdapter);
}

@Override
public void onListItemClick(ListView l, View v, int position, long id) {
    // Passing data to the new activity called upon using the intent
    Log.w("sadsad","yooyo");
    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction transaction = fragmentManager.beginTransaction();
    transaction.addToBackStack(null);
    //transaction.remove(this);
    transaction.replace(R.id.first_fragment_root_id, new DailyList());

    transaction.commit();
 }
}

Another listfragment

package com.example.classwise;

import java.util.Arrays;
import java.util.List;

import subjectdetails.subjectdetail;
import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;

public class DailyList extends ListFragment {
List<subjectdetail> days = Arrays.asList(new subjectdetail("sdsfdsf","sdfdsf","ewrwe"));
@Override
public View onCreateView(LayoutInflater inflater,
         ViewGroup container,  Bundle savedInstanceState){
    Log.w("sadsad","yooyo4");
    final View theInflatedView = inflater.inflate(R.layout.day, container, false);
    return theInflatedView;
}

@Override
public void onStart() {
    super.onStart();
    Log.w("sadsad","yooyo5");
    DailyListAdapter daysListArrayAdapter = new DailyListAdapter(getActivity(), days);
    setListAdapter(daysListArrayAdapter);
}

@Override
public void onListItemClick(ListView l, View v, int position, long id) {
 }

 }

The layout for the above two list fragments:

For first list fragment :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/first_fragment_root_id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.ClassWise.respond" >
    <ListView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    </ListView>

</RelativeLayout>

and for the second list fragment:

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@android:id/list"
    android:layout_height="match_parent" >
</ListView>

Please help me out.

EDIT

The activity class:
package com.example.classwise;


import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.MenuItem;


@SuppressWarnings("deprecation")
public class MainActivity extends android.support.v4.app.FragmentActivity implements ActionBar.TabListener {

    ActionBar actionBar;
    ViewPager viewPager;
    FragmentPageAdapter ft;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.pager);
        ft = new FragmentPageAdapter(getSupportFragmentManager());
        actionBar = getActionBar();

        //ViewPager used the fragmentpage adapter to inflate itself with the data.
        viewPager.setAdapter(ft);

        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        actionBar.addTab(actionBar.newTab().setText("Schedule").setTabListener(this));
        actionBar.addTab(actionBar.newTab().setText("My Subjects").setTabListener(this));
        actionBar.addTab(actionBar.newTab().setText("Notices").setTabListener(this));

        // The onPageChangeListeners methods
        //Methods that will be invoked as per the situation.
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                //Whenevr we swipe to a different page, the corresponding navigation item is selected.
                actionBar.setSelectedNavigationItem(arg0);
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }


    @Override
    public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
        // TODO Auto-generated method stub

    }
    @Override
    public void onTabSelected(Tab arg0, FragmentTransaction arg1) {

        //Whenever a page is selected, view pager gets the position
        //The fragment adapter using this position pass the respective object.
        //The object, onCreateView is called, which inflates the screen with the layout
        viewPager.setCurrentItem(arg0.getPosition());

    }
    @Override
    public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
        // TODO Auto-generated method stub

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}