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.

Answer 2

This is what they have done, if you don't get the concept shoot a comment.

Basically what they are doing is they have a MainActivity which is showing the camera and it is holding those three buttons in the bottom plus its holding viewpager that viewpager is holding three fragments

1.LeftFragment (Fragment on the left side). 2.CenterFragment (This fragment is transparent so when it comes in center the mainactivity content is visible which is camera). 3.RightFragment(Fragment on the right side).

Now Comes the coding part.

MainActivity.java.

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;

    @RequiresApi(api = Build.VERSION_CODES.KITKAT_WATCH)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(new PagerAdapter(getSupportFragmentManager()));

        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //Here calculate the amount by which the pages are scrolled and animate your buttons accordingly.
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }


    class PagerAdapter extends FragmentStatePagerAdapter {

        public PagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new LeftFragment();
                case 1:
                    return new CenterFragment();
                case 2:
                    return new RightFragment();
            }
            return null;
        }

        @Override
        public int getCount() {
            return 3;
        }
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Here is your camera."
        android:textAppearance="?android:attr/textAppearanceLarge"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Button"/>


</RelativeLayout>

Then comes the fragments

LeftFragment.java

public class LeftFragment extends BaseController {
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_sheet2, container, false);
        return rootView;
    }
}

fragment_left.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="2dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFA726"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:fontFamily="sans-serif"
            android:text="Left"
            android:textColor="#fff"
            android:textSize="30sp"/>

    </RelativeLayout>
</android.support.v7.widget.CardView>

RightFragment.java

public class RightFragment extends BaseController {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_sheet1, container, false);

        return rootView;
    }
}

fragment_right.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="2dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFA726"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:fontFamily="sans-serif"
            android:text="Right"
            android:textColor="#fff"
            android:textSize="30sp"/>

    </RelativeLayout>
</android.support.v7.widget.CardView>

I have left the animation part which I think you can achieve with little bit of calculation in viewpager OnPageChangeListener.

Happy Coding.