How to get ViewPager with previous and next page shown and larger focused page

Question

I am trying to create something that displays my pages on a viewpager so that it has a nice feel and design, and I checked this link on how I can implement it, but I had some problems. Firstly, it doesn’t work or looks so good for devices that run below API11 (API8 is my goal). and secondly, I cannot make the page focused, which will be larger than the next and previous page. I wanted it to look something like this:

Hope someone can help me in this or any other way to achieve this.

Answer 1

It contains the soruce code for the gallery.

https://code.google.com/p/android-3d-carousel-view/ 

Answer 2

Read this one first. Then apply your own implementation of PageTransformer . Something like that:

 public class DepthPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.5f; private static final float MAX_SCALE = 0.8f; private static final float MIN_FADE = 0.2f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { view.setAlpha(MIN_FADE); } else if (position < 0) { view.setAlpha(1 + position * (1 - MIN_FADE)); view.setTranslationX(-pageWidth * MAX_SCALE * position); ViewCompat.setTranslationZ(view, position); float scaleFactor = MIN_SCALE + (MAX_SCALE - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else if (position == 0) { view.setAlpha(1); view.setTranslationX(0); view.setScaleX(MAX_SCALE); ViewCompat.setTranslationZ(view, 0); view.setScaleY(MAX_SCALE); } else if (position <= 1) { ViewCompat.setTranslationZ(view, -position); view.setAlpha(1 - position * (1 - MIN_FADE)); view.setTranslationX(pageWidth * MAX_SCALE * -position); float scaleFactor = MIN_SCALE + (MAX_SCALE - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { view.setAlpha(MIN_FADE); } } } 

You will also need to control the order of detailed drawing in order to set the currently selected top view (only required if your views overlap):

 public class MyPager extends ViewPager { public MyPager(Context context) { this(context, null); } public MyPager(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected int getChildDrawingOrder(int childCount, int i) { if(i == childCount - 1) { return getCurrentItem(); } else { return i >= getCurrentItem()? i + 1 : i; } } } 

Set ViewPager.setOffscreenPageLimit to 2 or even more if there are more visible pages on the screen.

Here is the result: