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.
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:
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:-
Hope this will help you.