gallery viewpager implementation

xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#edebeb"
    android:clipChildren="false"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="312.5dp"
        android:layout_height="500dp"
        android:layout_marginTop="@dimen/xhdpi_30dp"
        />
</LinearLayout>

Limit the width of the viwpager and center it, which controls the position of the image of the selected viewpager. The Linearlayout of the parent layout is set

 android:clipChildren="false", so that the pager that is not selected by the viewpager will also be displayed.

Key code:

  mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());

Set the animation when the viewpager switches,

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {

    @Override
    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0.5f);

        }
        else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float MIN_SCALE = 0.85f;
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            }
            else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            float MIN_ALPHA = 0.5f;
            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)
                    / (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        }
        else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0.5f);
        }
    }
}