Fragments not changing in Navigation Drawer

Question

Issue that I have is that whenever I try to change from Menu fragment in the navigation drawer (Which it shows my pageviewer and listview correctly) to Contacto fragment, it stays in the same page with both pageviewer and listview including a large text I added in lay_contactofragment.xml to differentiate both fragments.

Here are some screenshots of what happens when I click on both fragment in navigation drawer:

Snippet of where the error might be located in MainActivity.java

String[] categoria = {
            "Jeans"
    };

    int[] imagenes = {
            R.drawable.veroxjeans1,
            R.drawable.veroxjeans2,
            R.drawable.veroxjeans3,
            R.drawable.veroxjeans4,
            R.drawable.veroxjeans5,
            R.drawable.veroxjeans6,
            R.drawable.veroxjeans7
    };

    SectionsPagerAdapter mSectionsPagerAdapter;
    ViewPager mViewPager;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /*texto = (TextView) findViewById(R.id.texto);*/

        mTitle = mDrawerTitle = getTitle();

        // load slide menu items
        navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);

        // nav drawer icons from resources
        navMenuIcons = getResources()
                .obtainTypedArray(R.array.nav_drawer_icons);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.list_slidermenu);

        navDrawerItems = new ArrayList<NavDrawerItem>();

        // agregar un nuevo item al menu deslizante
        // Menu
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));
        // Contacto
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1)));
        // Catologo
        //navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1), true, "Estrenos"));
        // old Contacto (Pedidos)
        //navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1)));

        // Recycle the typed array
        navMenuIcons.recycle();

        mDrawerList.setOnItemClickListener(new SlideMenuClickListener());

        // setting the nav drawer list adapter
        adapter = new NavDrawerListAdapter(getApplicationContext(),
                navDrawerItems);
        mDrawerList.setAdapter(adapter);

        // enabling action bar app icon and behaving it as toggle button
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, //nav menu toggle icon
                R.string.app_name, // nav drawer open - description for accessibility
                R.string.app_name // nav drawer close - description for accessibility
        ) {
            public void onDrawerClosed(View view) {
                getSupportActionBar().setTitle(mTitle);
                // calling onPrepareOptionsMenu() to show action bar icons
                invalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                getSupportActionBar().setTitle(mDrawerTitle);
                // calling onPrepareOptionsMenu() to hide action bar icons
                invalidateOptionsMenu();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        if (savedInstanceState == null) {
            // on first time display view for first nav item
            displayView(0);
        }

        //lista
        ListView lista = (ListView) findViewById(R.id.listView1);
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, categoria );
        lista.setAdapter(adapter);

        //galeria de imagenes

        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        mViewPager = (ViewPager) findViewById(R.id.pager);
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[0]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[1]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[2]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[3]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[4]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[5]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[6]));

        mViewPager.setAdapter(mSectionsPagerAdapter);

    }

public class SectionsPagerAdapter extends FragmentPagerAdapter {

        List<Fragment> fragmentos;
        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
            fragmentos = new ArrayList<Fragment>();
        }

        public void addfragments(Fragment xfragment){
            fragmentos.add(xfragment);
        }


        @Override
        public Fragment getItem(int position) {
            return fragmentos.get(position);
        }

        @Override
        public int getCount() {
            return fragmentos.size();
        }
    }


    public static class PlaceholderFragment extends Fragment {

        private static final String ARG_IMAGE = "imagen";
        private int imagen;

        public static PlaceholderFragment newInstance(int imagen) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_IMAGE, imagen);
            fragment.setArguments(args);
            fragment.setRetainInstance(true);
            return fragment;
        }

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            if(getArguments() != null) {
                imagen = getArguments().getInt(ARG_IMAGE);
            }
        }

        public PlaceholderFragment() {
        }

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

            ImageView imagenView = (ImageView) rootView.findViewById(R.id.imageView1);
            imagenView.setImageResource(imagen);
            return rootView;
        }
    }

Left FmMenu and FmContacto with public View onCreateView

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

/**
 * Created by WiLo on 2/13/2015.
 */
public class FmMenu extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.lay_menufragment, container, false);

        return rootView;
    }
}

---------------------

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

/**
 * Created by WiLo on 2/13/2015.
 */
public class FmContacto extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.lay_contactofragment, container, false);

        return rootView;
    }
}

And activity_menu.xml with both viewPager and Listview

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0a393d">

    <!-- Linearlayout to display Fragments -->
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:id="@+id/container">

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="265dp"
            tools:context=".MenuActivity" />

        <ListView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/listView1"
            android:layout_gravity="center_horizontal" />

    </LinearLayout>

    <!-- Listview to display slider menu -->
    <ListView
        android:id="@+id/list_slidermenu"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@color/list_divider"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector"
        android:background="@color/list_background"/>
</android.support.v4.widget.DrawerLayout>

UPDATE

LOGCAT ERROR

02-27 00:11:47.544  23569-23569/com.wlodsgn.bunbunup E/AndroidRuntime﹕ FATAL EXCEPTION: main
    Process: com.wlodsgn.bunbunup, PID: 23569
    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.wlodsgn.bunbunup/com.wlodsgn.bunbunup.MenuActivity}: java.lang.IllegalArgumentException: No view found for id 0x7f090048 (com.wlodsgn.bunbunup:id/container) for fragment FmMenu{425d2998 #0 id=0x7f090048}
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2202)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2252)
            at android.app.ActivityThread.access$800(ActivityThread.java:139)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1200)
            at android.os.Handler.dispatchMessage(Handler.java:102)
            at android.os.Looper.loop(Looper.java:136)
            at android.app.ActivityThread.main(ActivityThread.java:5103)
            at java.lang.reflect.Method.invokeNative(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:515)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:790)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:606)
            at dalvik.system.NativeStart.main(Native Method)
     Caused by: java.lang.IllegalArgumentException: No view found for id 0x7f090048 (com.wlodsgn.bunbunup:id/container) for fragment FmMenu{425d2998 #0 id=0x7f090048}
            at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:939)
            at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1126)
            at android.support.v4.app.BackStackRecord.run(BackStackRecord.java:739)
            at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1489)
            at android.support.v4.app.FragmentActivity.onStart(FragmentActivity.java:548)
            at android.app.Instrumentation.callActivityOnStart(Instrumentation.java:1171)
            at android.app.Activity.performStart(Activity.java:5285)
            at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2175)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2252)
            at android.app.ActivityThread.access$800(ActivityThread.java:139)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1200)
            at android.os.Handler.dispatchMessage(Handler.java:102)
            at android.os.Looper.loop(Looper.java:136)
            at android.app.ActivityThread.main(ActivityThread.java:5103)
            at java.lang.reflect.Method.invokeNative(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:515)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:790)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:606)
            at dalvik.system.NativeStart.main(Native Method)

FmMenu.java with viewPager and Listview in it

import java.util.ArrayList;
import java.util.List;

import android.support.v7.app.ActionBarActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.app.Activity;

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

/**
 * Created by WiLo on 2/13/2015.
 */
public class FmMenu extends Fragment {

    String[] categoria = {
            "Jeans"
    };

    int[] imagenes = {
            R.drawable.veroxjeans1,
            R.drawable.veroxjeans2,
            R.drawable.veroxjeans3,
            R.drawable.veroxjeans4,
            R.drawable.veroxjeans5,
            R.drawable.veroxjeans6,
            R.drawable.veroxjeans7
    };

    SectionsPagerAdapter mSectionsPagerAdapter;
    ViewPager mViewPager;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.lay_menufragment, container, false);



        //lista
        ListView lista = (ListView) rootView.findViewById(R.id.listView1);
        ArrayAdapter adapter = new ArrayAdapter(this.getActivity(), android.R.layout.simple_list_item_1, categoria);
        lista.setAdapter(adapter);

        //galeria de imagenes

        mSectionsPagerAdapter = new SectionsPagerAdapter(getChildFragmentManager());

        mViewPager = (ViewPager) rootView.findViewById(R.id.pager);
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[0]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[1]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[2]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[3]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[4]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[5]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[6]));

        mViewPager.setAdapter(mSectionsPagerAdapter);

        return rootView;

    }

    /*@Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.lay_menufragment);

        //lista
        ListView lista = (ListView) findViewById(R.id.listView1);
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, categoria );
        lista.setAdapter(adapter);

        //galeria de imagenes

        mSectionsPagerAdapter = new SectionsPagerAdapter(getFragmentManager());

        mViewPager = (ViewPager) findViewById(R.id.pager);
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[0]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[1]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[2]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[3]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[4]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[5]));
        mSectionsPagerAdapter.addfragments(PlaceholderFragment.newInstance(imagenes[6]));

        mViewPager.setAdapter(mSectionsPagerAdapter);

    }*/

    public class SectionsPagerAdapter extends FragmentPagerAdapter {

        List<Fragment> fragmentos;
        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
            fragmentos = new ArrayList<Fragment>();
        }

        public void addfragments(Fragment xfragment){
            fragmentos.add(xfragment);
        }


        @Override
        public Fragment getItem(int position) {
            return fragmentos.get(position);
        }

        @Override
        public int getCount() {
            return fragmentos.size();
        }
    }


    public static class PlaceholderFragment extends Fragment {

        private static final String ARG_IMAGE = "imagen";
        private int imagen;

        public static PlaceholderFragment newInstance(int imagen) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_IMAGE, imagen);
            fragment.setArguments(args);
            fragment.setRetainInstance(true);
            return fragment;
        }

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            if(getArguments() != null) {
                imagen = getArguments().getInt(ARG_IMAGE);
            }
        }

        public PlaceholderFragment() {
        }

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

            ImageView imagenView = (ImageView) rootView.findViewById(R.id.imageView1);
            imagenView.setImageResource(imagen);
            return rootView;
        }
    }

}

lay_menufragment.xml with viewPager and Listview layout in it

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

<!-- Linearlayout to display Fragments -->
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:id="@+id/container">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="265dp"
        tools:context=".MenuActivity" />

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView1"
        android:layout_gravity="center_horizontal" />

</FrameLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0a393d">

    <!-- Listview to display slider menu -->
    <ListView
        android:id="@+id/list_slidermenu"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@color/list_divider"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector"
        android:background="@color/list_background"/>

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

Would appreciate any help

Answer 1

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:id="@+id/container">

...

f (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.container, fragment).commit();

You are using LinearLayout as a container to add fragment, but you should use FrameLayout as container. Can you replace it with FrameLayout and try if it works?

Also If I understand your requirements correctly, the ViewPager and ListView should be present in fragment layout and not as child of the container view. i.e

1. Move ViewPager and ListView to lay_menufragment and it's related java code to FmMenu fragment. This is your first page.

2. Similarly, move the large TextView to lay_contactofragment fragment.This is your second page.

So basically your main activity just acts as container to hold fragments, the views needed for each page should be added to that particular fragment itself.

update : Add frameLayout container in main activity. Not in fragment.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0a393d">

    <FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:id="@+id/container">
</FrameLayout>

    <!-- Listview to display slider menu -->
    <ListView
        android:id="@+id/list_slidermenu"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@color/list_divider"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector"
        android:background="@color/list_background"/>
</android.support.v4.widget.DrawerLayout>

You can add LinearLayou/relativeLayout as parent in Fragment. FrameLayout is not really needed.

lay_menufragment.xml

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

<!-- Linearlayout to display Fragments -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:id="@+id/container">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="265dp"
        tools:context=".MenuActivity" />

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView1"
        android:layout_gravity="center_horizontal" />

</LinearLayout>