Android Navigation Drawer - Fragment Navigation not working properly

Question

I have designed navigation drawer app. All the other features are working properly except Fragment navigation.

When i try to select an item from the side menu, its displays that selected layout on top of the activity_main layout.I think transition.replace() method is not working or it does not replacing the current layout with selected layout.

Here is my code

public class MainActivity extends FragmentActivity {
ActionBarDrawerToggle icon;
final String[] listContent ={"Account Setup","Fragment Two",
"Fragment Three","Main  Page"};
final String[] fragments ={
        "com.strawberryapps.accountsetup.AccountSetup",
        "com.strawberryapps.backupnotes.BackupNotes",
        "com.strawberryapps.notes.AddNote",
        "com.strawberryapps.myapp.MainPage"};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
       ArrayAdapter<String> ad = new ArrayAdapter<String> (getActionBar().getThemedContext(), android.R.layout.simple_list_item_1, listContent);
       final DrawerLayout drawer = (DrawerLayout)findViewById(R.id.drawer_layout);
        final ListView list = (ListView) findViewById(R.id.drawer);
        list.setAdapter(ad);

        list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, final int position, long id) {
                drawer.setDrawerListener( new DrawerLayout.SimpleDrawerListener(){
                    @Override
                    public void onDrawerClosed(View drawerView){
                        super.onDrawerClosed(drawerView);
                        android.support.v4.app.FragmentTransaction transition = getSupportFragmentManager().beginTransaction();

                        transition.replace(R.id.main, Fragment.instantiate(MainActivity.this, fragments[position]));

                        transition.commit();
                    }
                });

            }
        });


}

Here is my activity_main.xml

  <android.support.v4.widget.DrawerLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity"
  android:background="#FFFFFF"
                                    >
    <FrameLayout
      android:id="@+id/main"
      android:layout_width="match_parent"
      android:layout_height="match_parent" >



     </FrameLayout>

      <ListView
      android:id="@+id/drawer"
      android:layout_width="240dp"
      android:layout_height="match_parent"
      android:layout_gravity="start"
      android:background="#454545"
      android:choiceMode="singleChoice"/>

    </android.support.v4.widget.DrawerLayout>

Im developing with android 4.3

Answer 1

Kindly change color of background of fragment's layout .xml file.... Use this code in fragment's layout file in parent layout

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_home"
android:background="#FFF"
android:layout_marginTop="50dp"
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">

</RelativeLayout>