Swipe Back like Pinterest or Tumblr Swipe Back like Pinterest or Tumblr android android

Swipe Back like Pinterest or Tumblr


It seems that the effect you're looking for is one of the samples for ViewPager in the android developer's website.

Check out http://developer.android.com/training/animation/screen-slide.html#depth-page , in the Depth page transformer section. It has a video and source code.

Using a ViewPager.PageTransformer you can decide how the pages behave when switching from one to the next.

The only difference between the sample and the video you linked to is that left-right seems to be inverted, but should be a good starting point for what I saw on the YouTube video linked in the question. The actions on the two views would have to be swaped. As shown in this piece of code (the 1st parameter to mPager.setPageTransformer should be reverseDrawingOrder = false). Note the middle 2 if sections are swaped and the position variable is handled slightly different to switch sides. The bouncy effect is left as an exercise. Please share when you get that!

    package com.example.android.animationsdemo;    import android.support.v4.view.ViewPager;    import android.view.View;    public class SinkPageTransformer implements ViewPager.PageTransformer {            private static float MIN_SCALE = 0.75f;            public void transformPage(View view, float position) {                    int pageWidth = view.getWidth();                    if (position < -1) { // [-Infinity,-1)                            // This page is way off-screen to the left.                            view.setAlpha(0);                    } else if (position <= 0) { // [-1,0]                            // Fade the page out.                            view.setAlpha(1 + position);                            // Counteract the default slide transition                            view.setTranslationX(pageWidth * -position);                            // Scale the page down (between MIN_SCALE and 1)                            float scaleFactor = MIN_SCALE                                            + (1 - MIN_SCALE) * (1 - Math.abs(position));                            view.setScaleX(scaleFactor);                            view.setScaleY(scaleFactor);                    } else if (position <= 1) { // (0,1]                            // Use the default slide transition when moving to the left page                            view.setAlpha(1);                            view.setTranslationX(0);                            view.setScaleX(1);                            view.setScaleY(1);                    } else { // (1,+Infinity]                            // This page is way off-screen to the right.                            view.setAlpha(0);                    }            }    }

And just in case the page with the sample goes poof, here's that section's original code:

    public class DepthPageTransformer implements ViewPager.PageTransformer {        private static float MIN_SCALE = 0.75f;        public void transformPage(View view, float position) {            int pageWidth = view.getWidth();            if (position < -1) { // [-Infinity,-1)                // This page is way off-screen to the left.                view.setAlpha(0);            } else if (position <= 0) { // [-1,0]                // Use the default slide transition when moving to the left page                view.setAlpha(1);                view.setTranslationX(0);                view.setScaleX(1);                view.setScaleY(1);            } else if (position <= 1) { // (0,1]                // Fade the page out.                view.setAlpha(1 - position);                // Counteract the default slide transition                view.setTranslationX(pageWidth * -position);                // Scale the page down (between MIN_SCALE and 1)                float scaleFactor = MIN_SCALE                        + (1 - MIN_SCALE) * (1 - Math.abs(position));                view.setScaleX(scaleFactor);                view.setScaleY(scaleFactor);            } else { // (1,+Infinity]                // This page is way off-screen to the right.                view.setAlpha(0);            }        }    }


Update:fixed memory usage problem for this project and changed the slide back style to iOS like.

enter image description here

I wrote a demo exactly like Pinterest and tumblr like,you just extend the BaseActivity and you get a swipe back effect,works smoothly!

check this:https://github.com/chenjishi/SlideActivity

and the screenshot:enter image description here


I found a GitHub project that is based on SwipeBack like Pinterest.

It is really a great open source project that should solve your problem. It does as you needed like go to previous screen by pressing back or simple swipe. As this project having option

1. Swipe left to Right

2. Swipe Right to Left

3. Swipe Bottom to top

https://github.com/Issacw0ng/SwipeBackLayout

and also you install this demo application from Google Play.

https://play.google.com/store/apps/details?id=me.imid.swipebacklayout.demo

Attached Screenshots:-

enter image description here

Hope this will help you.