ViewPager show next and before item preview on screen

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);                   }                }             }          });

//PagerAdapterpublic 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(); }

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 :)

viewPager.setPageMargin(100);viewPager.setPageTransformer(false, new ViewPager.PageTransformer(){    @Override    public void transformPage(View page, float position)    {        int pageWidth = viewPager.getMeasuredWidth() -            viewPager.getPaddingLeft() - viewPager.getPaddingRight();        int pageHeight = viewPager.getHeight();        int paddingLeft = viewPager.getPaddingLeft();        float transformPos = (float) (page.getLeft() -            (viewPager.getScrollX() + paddingLeft)) / pageWidth;        int max = pageHeight / 10;        if (transformPos < -1)        {            // [-Infinity,-1)            // This page is way off-screen to the left.            page.setAlpha(0.5f);// to make left transparent            page.setScaleY(0.7f);        }        else if (transformPos <= 1)        {            // [-1,1]            page.setScaleY(1f);        }        else        {            // (1,+Infinity]            // This page is way off-screen to the right.            page.setAlpha(0.5f);// to make right transparent            page.setScaleY(0.7f);        }    }});