ViewPager show next and before item preview on screen

Question

I want to show viewpager next and before page preview in screen. Before and next page show deep in screen and slide next page with deep animation.

You can look this image

How can i do it?

Answer 1

Finally, i did it :) I modify this answer Android - Carousel like widget which displays a portion of the left and right elements

You can look this code.

//pager settings           pager.setClipToPadding(false);           pager.setPageMargin(24);           pager.setPadding(48, 8, 48, 8);           pager.setOffscreenPageLimit(3);           pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {               @Override              public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                 Log.i("", "onPageScrolled: " + position);                  CampaignPagerFragment sampleFragment = (CampaignPagerFragment) ((CampaignPagerAdapter) pager.getAdapter()).getRegisteredFragment(position);                   float scale = 1 - (positionOffset * RATIO_SCALE);                  // Just a shortcut to findViewById(R.id.image).setScale(scale);                 sampleFragment.scaleImage(scale);                   if (position + 1 < pager.getAdapter().getCount()) {                    sampleFragment = (CampaignPagerFragment) ((CampaignPagerAdapter) pager.getAdapter()).getRegisteredFragment(position + 1);                    scale = positionOffset * RATIO_SCALE + (1 - RATIO_SCALE);                    sampleFragment.scaleImage(scale);                 }              }               @Override              public void onPageSelected(int position) {                 Log.i("", "onPageSelected: " + position);              }               @Override              public void onPageScrollStateChanged(int state) {                 Log.i("", "onPageScrollStateChanged: " + state);                 if (state == ViewPager.SCROLL_STATE_IDLE) {                    CampaignPagerFragment fragment = (CampaignPagerFragment) ((CampaignPagerAdapter) pager.getAdapter()).getRegisteredFragment(pager.getCurrentItem());                    fragment.scaleImage(1);                    if (pager.getCurrentItem() > 0) {                       fragment = (CampaignPagerFragment) ((CampaignPagerAdapter) pager.getAdapter()).getRegisteredFragment(pager.getCurrentItem() - 1);                       fragment.scaleImage(1 - RATIO_SCALE);                    }                     if (pager.getCurrentItem() + 1 < pager.getAdapter().getCount()) {                       fragment = (CampaignPagerFragment) ((CampaignPagerAdapter) pager.getAdapter()).getRegisteredFragment(pager.getCurrentItem() + 1);                       fragment.scaleImage(1 - RATIO_SCALE);                    }                 }               }           }); 

---

//PagerAdapter  public class CampaignPagerAdapter extends FragmentStatePagerAdapter {    SparseArray<Fragment> registeredFragments = new SparseArray<Fragment>();     public CampaignPagerAdapter(FragmentManager fm) {       super(fm);    }     @Override    public int getCount() {       return 5;    }     @Override    public Fragment getItem(int position) {       return new CampaignPagerFragment();    }     @Override    public Object instantiateItem(ViewGroup container, int position) {       Fragment fragment = (Fragment) super.instantiateItem(container, position);       registeredFragments.put(position, fragment);       return fragment;    }     @Override    public void destroyItem(ViewGroup container, int position, Object object) {       registeredFragments.remove(position);       super.destroyItem(container, position, object);    }     public Fragment getRegisteredFragment(int position) {       return registeredFragments.get(position);    } } 

for ex: https://github.com/mrleolink/SimpleInfiniteCarousel..

Hello, One thing that is missing sampleFragment.scaleImage(scale); It is a method created in CampaignPagerFragment and it scale the fragment rootView..

e.g public void scaleImage(float scaleX) { rootView.setScaleY(scaleX); rootView.invalidate(); }

Answer 2

You can use PagerTransformer to ViewPager :-

mViewPager.setPageTransformer(false, new ViewPager.PageTransformer() {      @Override      public void transformPage(View page, float position) {              // do transformation here       }      }); 

Use this link for complete tutorial :-

http://andraskindler.com/blog/2013/create-viewpager-transitions-a-pagertransformer-example/

Hope this help you :)