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

Answer 1

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

Answer 2

I did this by changing my viewpager's padding based on the position.

carouselViewHolder.carouselViewPager.setPadding(Utils.dpToPixels(context, 12), 0, Utils.dpToPixels(context, paddingRequired - 12), 0); // initial padding for position 0
carouselViewHolder.carouselViewPager.setPageMargin(Utils.dpToPixels(context, 12)); // margin between pages
carouselViewHolder.carouselViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }
    @Override
    public void onPageSelected(int position) {
        if (position != 0) {
            if (position == playCardData.getPlayCards().size() - 1) {
                carouselViewHolder.carouselViewPager.setPadding(Utils.dpToPixels(context, finalPaddingRequired - 12), 0, Utils.dpToPixels(context, 12), 0);
            } else
                carouselViewHolder.carouselViewPager.setPadding(Utils.dpToPixels(context, finalPaddingRequired / 2), 0, Utils.dpToPixels(context, finalPaddingRequired / 2), 0);
        } else {
            carouselViewHolder.carouselViewPager.setPadding(Utils.dpToPixels(context, 12), 0, Utils.dpToPixels(context, finalPaddingRequired - 12), 0);
        }
    }
    @Override
    public void onPageScrollStateChanged(int state) {
    }
});

Answer 3

I think this is the simplest and cleanest solution.

float scaleFactor = 0.85f;
viewPager.setPageMargin(-35);
viewPager.setOffscreenPageLimit(2);
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
    @Override
    public void transformPage(@NonNull View page, float position) {
        page.setScaleY((1 - Math.abs(position) * (1 - scaleFactor)));
        page.setScaleX(scaleFactor + Math.abs(position) * (1 - scaleFactor));
    }
});

Answer 4

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

Answer 5

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