Android - ViewPager Animation (paper stack)

Question

I have some items to display, currently I use a listview with scroll animation. But, I want to make the same animation of the Shazam Discover panel, I don't know if I have to use ListView or other Widget... Any idea ? Thanks in advance !

Answer 1

I have found two of the places where you can find good stuff.

1. Github Best UI

2. Camposha Everything You need for Good UI

Hope these two help you ;)

Answer 2

Thank for this two links,

I solved my own problem :), so i post here the solution

To reproduce the same animation above (like a paper stack) i finally used a vertical viewpager with a pagetransformer animation

So I have :

• ViewPager : contain the items to display
• PagerAdapter : the adapter which instantiate each items
• PageTransformer : the slide animation
• A Fragment : contain the ViewPager

Paper Stack Animation

The first difficulty here was to create the paper stack animation, it mean to stack the old items behind the current... create a "z-index" order between each items, else the old item will be at the front and the current at the back. (Am I making sense ? :P)

So I decided to add to each view of the ViewPager a tag with as value his position, and to used it on the PageTransformer to define the translationZ of the view. So the first item view of the ViewPager, so position = 0, have a z-index = 0, the second z-index = 1... and so create a paper stack !!

Proper "Destruction"

The second difficulty was to hide and show previous item at the perfect moment... because by default the ViewPager just show 2 views, and call destroyItem when the third is loaded. So we see the destruction of the last view... in the video of my first message we can see that the last view is deleted when the current view passes in front of the others, so how to make that ?

I decided to create a ArrayList<View> in my PagerAdapter and add each view when instantiateItem function is called. I created also a Getter to get the ArrayList from my Fragment. In my Framgment I added a addOnPageChangeListener to my ViewPager. With this listener I can determinate which view of my ViewPager is displayed (with position and the ArrayList of views) and the positionOffset, with this two variables i can hide or show the previous views at the perfect moment...

Code

I clarified my code below to make generic

Fragment

public class MyFragment extends Fragment {

private ViewPager viewPager;

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

    viewPager = (ViewPager) rootView.findViewById(R.id.viewpager);

    final MyPagerAdapter pagerAdapter = new MyPagerAdapter(getActivity());
    viewPager.setAdapter(pagerAdapter);
    viewPager.setPageTransformer(true, new PaperStackTransformer());
    viewPager.setRotation(90); // Vertical viewpager
    viewPager.setOffscreenPageLimit(10); // To display more than 2 view (and 10 to avoid bugs...)

    final ArrayList<View> views = MyPagerAdapter.getViews();

    final float[] previousPositionOffset = new float[1];
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            if (positionOffset > 0.9 || positionOffset < 0.1) return;

            float dif = previousPositionOffset[0] - positionOffset;

            // Change values (0.40 and 0.70) to conform to your PageViewer view
            if (positionOffset > 0.40 && positionOffset < 0.70 ){
                // at this moment current view hide the previous
                if (dif < 0) {
                    // If we scroll down we hide the previous view
                    int p = position - 2;
                    if (p >= 0 && views.get(p).getVisibility() == View.VISIBLE) {
                        views.get(p).setVisibility(View.INVISIBLE);
                    }
                }
                else if (dif > 0) {
                    // If we scroll up we show the previous view
                    int p = position - 2;
                    if (p >= 0 && views.get(p).getVisibility() == View.INVISIBLE) {
                        views.get(p).setVisibility(View.VISIBLE);
                    }
                }
            }
           previousPositionOffset[0] = positionOffset;
        }

        @Override
        public void onPageSelected(int position) {
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

    return rootView;
}

}

PagerAdapter

public class MyPagerAdapter extends PagerAdapter {

private ArrayList<View> views;

...

public ArrayList<View> getViews() {
    return views;
}

...

@Override
public Object instantiateItem(ViewGroup container, int position) {

    ...

    View view = inflater.inflate(R.layout.view, null, false);

    ...

    view.setTag(position); // To the "z-index" order on PageTransformer
    view.setRotation(-90f); // Vertical ViewPager
    ((ViewPager) container).addView(view); 

    views.add(view); // add the view to the list
    return view;
}

...

}

PageTransformer

public class PaperStackTransformer implements ViewPager.PageTransformer {

private static final float MIN_SCALE = 0.9f;

public void transformPage(View view, float position) {

    if (position < -1) { // [-Infinity,-1)
        view.setTranslationX(1150 * -position);

        float scaleFactor = MIN_SCALE
                + (1 - MIN_SCALE) * (1 - Math.abs(position));
        view.setScaleX(scaleFactor);
        view.setScaleY(scaleFactor);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) view.setTranslationZ((int) view.getTag()*1.0f);

    } else if (position <= 0) { // [-1,0]
        view.setAlpha(1 - position);

        view.setTranslationX(1150 * -position);

        float scaleFactor = MIN_SCALE
                + (1 - MIN_SCALE) * (1 - Math.abs(position));
        view.setScaleX(scaleFactor);
        view.setScaleY(scaleFactor);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) view.setTranslationZ((int) view.getTag()*1.0f);

    } else if (position <= 1) { // (0,1]
        view.setAlpha(1);
        view.setTranslationX(1);
        view.setScaleX(1);
        view.setScaleY(1);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) view.setTranslationZ((int) view.getTag()*1.0f);

    } else { // (1,+Infinity]
        view.setAlpha(1);
    }
}

}

Conclusion

So listview was not the solution, I hope this snippet will help some people. my paper stack animation :D