Replacing a fragment with other fragment is giving me some issue

Question

I am creating swipe screens using ViewPager where i have two fragments to show using swipes inside FragmentActivity .Please consider the following code :

Fragment_One.java

  public class Fragment_One extends Fragment {

    private Button btnNext;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_one,null);
        btnNext = (Button) v.findViewById(R.id.btnNext);
        btnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Fragment fragment = new Fragment_Two();
                FragmentManager fragmentManager = getActivity().getSupportFragmentManager();
                FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentOne,fragment);
                fragmentTransaction.addToBackStack(null);
                fragmentTransaction.commit();
            }
        });
        return v;
    }
}

2.Fragment_Two.java

 public class Fragment_Two extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_two,null);
    }
}

3. PagerAdapter.java

 public class PagerAdapter extends FragmentPagerAdapter {

    List<Fragment> listFragments ;
    public PagerAdapter(FragmentManager fm,List<Fragment> listFragments) {
        super(fm);
        this.listFragments = listFragments;
    }

    @Override
    public Fragment getItem(int i) {
        return listFragments.get(i);
    }

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

4.MainActivity.java

 public class MainActivity extends FragmentActivity{
        private List<Fragment> listFragments;
        private ViewPager viewPager;

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

            viewPager = (ViewPager) findViewById(R.id.viewPager);

            Fragment_One fragment_one = new Fragment_One();
            Fragment_Two fragment_two = new Fragment_Two();

            listFragments = new ArrayList<>();
            listFragments.add(fragment_one);
            listFragments.add(fragment_two);

            PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(),listFragments);
            viewPager.setAdapter(pagerAdapter);

        }
    }

The above mentioned code is working fine while swiping screens .But i click on next button ,fragment is replaced with another but is displayed on the same screen.I am not able to fix the issue.Screenshot is given below :

Next button should work in the same way as we swipe the screen .Please help me to fix the issue.

Answer 1

Wouldn't that be easier to use:

.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) 
            {
                 viewPager .setCurrentItem(viewPage.getCurrentItem() + 1);

            });