Depth Pager Transformer just like SnapChat

Question

I'm trying to implement ViewPager with DepthPageTransformer just like Snapchat application. In SnapChat application, there is a Camera screen which always comes in center of ViewPager and swiping from left or right brings other fragments on top of camera screen.

I've found code for DepthPageTransformer from this link. But the problem with this demo is that it brings all the next screen views from behind. Just like SnapChat I've a Camera screen in center and 2 screens coming on top from left and two screens coming on top from right on Camera screen.

So, how can I create a PageTransformer which brings fragments from left or right on the top of my center screen which is Camera?

Answer 1

I think you should provide 5 fragments in your FragmentPagerAdapter, the third (index=2) fragment will be fragment with camera view,

viewPager.setCurrentItem(2); //2 is index of camera fragment

Then your ViewPager.PageTransformer should look like this:

@Override
public void transformPage(View page, float position) {
  int pageIndex = (int) page.getTag(); //im stroing pageIndex of fragment in its tag
  if(pageIndex == 2) { //2 is index of camera fragment
     float currentTranslation = - position * page.getWidth();
     ViewCompat.setTranslationX(page, currentTranslation);
     ViewCompat.setTranslationZ(page, -1);
     return;
}

I am stroing pageIndex while fragment's view is created in its tag.

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    ...
    view.setTag(pageIndex);
    return view;
}

Here is gif with results: https://media.giphy.com/media/OIwmXdr3nukq4/giphy.gif

Fragment with food is the one you should replace with your camera fragment.