title: View Pager with previous and next item smaller in size with infinite scroll
body: <p>Want to create the view pager same as following UI, applied custom transformer but not working.</p>
  
  <p><a href="https://i.stack.imgur.com/Xm9HR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Xm9HR.png" alt="enter image description here"></a></p>
  
  <p>ViewPager.java </p>
  
  <pre><code>public class MyViewPager extends ViewPager implements ViewPager.PageTransformer {
  public static final String TAG = "MyViewPager";
  private float MAX_SCALE = 0.0f;
  private int mPageMargin;
  private boolean animationEnabled=true;
  private boolean fadeEnabled=false;
  private  float fadeFactor=0.5f;
  
  
  public MyViewPager(Context context) {
      this(context, null);
  }
  
  public MyViewPager(Context context, AttributeSet attrs) {
      super(context, attrs);
      // clipping should be off on the pager for its children so that they can scale out of bounds.
      setClipChildren(false);
      setClipToPadding(false);
      // to avoid fade effect at the end of the page
      setOverScrollMode(2);
      setPageTransformer(false, this);
      setOffscreenPageLimit(3);
      mPageMargin = dp2px(context.getResources(), 50);
      setPadding(mPageMargin, mPageMargin, mPageMargin, mPageMargin);
  }
  
  public int dp2px(Resources resource, int dp) {
      return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, resource.getDisplayMetrics());
  }
  public void setAnimationEnabled(boolean enable) {
      this.animationEnabled = enable;
  }
  
  public void setFadeEnabled(boolean fadeEnabled) {
      this.fadeEnabled = fadeEnabled;
  }
  
  public void setFadeFactor(float fadeFactor) {
      this.fadeFactor = fadeFactor;
  }
  
  @Override
  public void setPageMargin(int marginPixels) {
      mPageMargin = marginPixels;
  // setPadding(mPageMargin, mPageMargin, mPageMargin, mPageMargin);
  }
  
  @Override
  public void transformPage(View page, float position) {
      if (mPageMargin &lt;= 0|| !animationEnabled)
          return;
      page.setPadding(mPageMargin / 3, mPageMargin / 3, mPageMargin / 3, mPageMargin / 3);
  
      if (MAX_SCALE == 0.0f &amp;&amp; position &gt; 0.0f &amp;&amp; position &lt; 1.0f) {
          MAX_SCALE = position;
      }
      position = position - MAX_SCALE;
      float absolutePosition = Math.abs(position);
      if (position &lt;= -1.0f || position &gt;= 1.0f) {
          if(fadeEnabled)
              page.setAlpha(fadeFactor);
          // Page is not visible -- stop any running animations
  
      } else if (position == 0.0f) {
  
          // Page is selected -- reset any views if necessary
          page.setScaleX((1 + MAX_SCALE));
          page.setScaleY((1 + MAX_SCALE));
          page.setAlpha(1);
      } else {
          page.setScaleX(1 + MAX_SCALE * (1 - absolutePosition));
          page.setScaleY(1 + MAX_SCALE * (1 - absolutePosition));
          if(fadeEnabled)
              page.setAlpha( Math.max(fadeFactor, 1 - absolutePosition));
      }
  }
  }
  </code></pre>