Navigation Drawer and ViewPager conflict

Question

I'm currently developing an android application where I'm using a navigation drawer as well as the swipe gesture using viewPager to traverse through fragments.

Basically, I want the user to be able to select pages (fragments) using the navigation drawer and be able to swipe to the next page (fragment).

My problem right now is that they overlap. The swipe gesture works as expected but when I select another page on the nav drawer they underlying page doesn't disappear. I need someway to "refresh" each fragment.

Here is my code in the MainActivity.java page

package com.example.home.cloud;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity implements FragmentDrawer.FragmentDrawerListener {

    private static String TAG = MainActivity.class.getSimpleName();

    private static final int NUM_PAGES = 10;

    private Toolbar mToolbar;
    private FragmentDrawer drawerFragment;

    private ViewPager mPager;
    private PagerAdapter mPagerAdapter;

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

        mPager = (ViewPager) findViewById(R.id.pager);
        mPagerAdapter = new MyFragmentStatePagerAdapter(getSupportFragmentManager());
        mPager.setAdapter(mPagerAdapter);

        mToolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        drawerFragment = (FragmentDrawer)
         getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
        drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
        drawerFragment.setDrawerListener(this);

        // display the first navigation drawer view on app launch
        displayView(0);
    }

    @Override
    public void onBackPressed() {
        if (mPager.getCurrentItem() == 0) {
            super.onBackPressed();
        } else {
            mPager.setCurrentItem(mPager.getCurrentItem() - 1);
        }
    }

    private class MyFragmentStatePagerAdapter extends FragmentStatePagerAdapter
    {
        public MyFragmentStatePagerAdapter(FragmentManager fm)
        {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            final Fragment result;
            switch (position) {
                case 0:
                    result= new HomeFragment();
                   break;
                case 1:
                    result= new OverviewFragment();
                    break;
                case 2:
                    result= new BenFragment();
                    break;
                case 3:
                    result= new TechFragment();
                    break;
                case 4:
                    result= new ArcFragment();
                    break;
                case 5:
                    result= new DmodFragment();
                    break;
                case 6:
                    result= new SmodFragment();
                    break;
                case 7:
                    result= new VirtFragment();
                    break;
                case 8:
                    result= new StorageFragment();
                    break;
                case 9:
                    result= new SecurityFragment();
                    break;
                default: result=null;
                    break;
            }
         /*   if (result != null) {
                FragmentManager fragmentManager = getSupportFragmentManager();
                FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.container_body, result);
                fragmentTransaction.commit();

            }*/
            return result;

        }


        @Override
        public int getCount() {
            return NUM_PAGES;
        }
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.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();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        if(id == R.id.action_search){
            Toast.makeText(getApplicationContext(), "Search action is selected!", Toast.LENGTH_SHORT).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onDrawerItemSelected(View view, int position) {
        displayView(position);
    }

    private void displayView(int position) {
        Fragment fragment = null;
        String title = getString(R.string.app_name);
        switch (position) {
            case 0:
                fragment = new HomeFragment();
                title = getString(R.string.title_home);
                break;
            case 1:
                fragment = new OverviewFragment();
                title = getString(R.string.title_overview);
                break;
            case 2:
                fragment=new BenFragment();
                title="Benefits and Risks";
                break;
            case 3:
                fragment=new TechFragment();
                title="Technologies behind Cloud Computing";
                break;
            case 4:
                fragment = new ArcFragment();
                title="Architecture";
                break;
            case 5:
                fragment= new DmodFragment();
                title="Deployment Models";
                break;
            case 6:
                fragment = new SmodFragment();
                title="Service Models";
                break;
            case 7:
                fragment = new VirtFragment();
                title="Virtualization";
                break;
            case 8:
                fragment = new StorageFragment();
                title="Data Storage";
                break;
            case 9:
                fragment = new SecurityFragment();
                title="Security";
                break;
            default:
                break;
        }

        if (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            fragmentTransaction.replace(R.id.container_body, fragment);
            fragmentTransaction.commit();

            // set the toolbar title
            getSupportActionBar().setTitle(title);
        }
    }
}

Answer 1

The trouble is that you're displaying your fragments in two different ways. Your displayView() method is creating new fragments and displaying them, rather than showing the ones which are already loaded in the ViewPager . To fix this, you need displayView() to instead set your ViewPager position.

private void displayView(int position) {
    mPager.setCurrentItem(position);
    getSupportActionBar().setTitle(mPagerAdapter.getPageTitle(position));
}