Development issue/problem:

Does anyone know how Pinterest or Tumblr used the swipe back method there?

That is, on Pinterest you can click on an item in the information stream. The DetailActivity is then executed and displays the details of the selected message. You can then press the Back button to return to the E-Mail job, or drag to the left (detail job) to return to the E-Mail job.


Normally I would use overridePendingTransition(), but overridePendingTransition() takes the animations (resource IDs like Pinterest and Tumblr activate the animation only when the user makes a sliding motion. They also support a kind of frame-by-frame animation based on finger movement. In this way, they track the distance of your finger and animate the transition with the corresponding percentage value.

I know how to use a real Java animation / AnimatorSet object with FragmentTransaction to animate a fragment. For snippets, I need to override OnCreateAnimator(), but I have no idea how to implement something like that for actions. Is there an onCreateAnimator() function (or something similar) for the action? I also don’t know how to drag the behavior, because there’s just no animation going on, just a step-by-step pass to the window properties / actions / fragment or something….

Do you have any suggestions?

I found a video of the Pinterest application on youtube:
This is what I want to implement.

I believe Pinterest works with Fragments and onCreateAnimator() to create Swipe Back.
Since my application already has fragments and pieces of children in the activity, it would be much easier for me to implement this for the activity.

Again: I can recognize gestures, and that’s not what I’m asking. Watch the video on youtube:

I created a small library that doesn’t have exactly the same behavior as the Pinterest or Tumblrs implementation, but for my applications it seems like a good solution:

How can I solve this problem?

Solution 1:

It looks like the effect you’re looking for is one of the ViewPager examples on the Android developers’ site.

See , under the Transform heading on the Depth page. He has the video and the source code.

With ViewPager.PageTransform, you can control how pages behave when you move from one page to another.

The only difference between the example and the video you linked is that the left-right pattern seems to be reversed, but that should be a good starting point for what I saw in the YouTube video you linked this to. We need to reverse the two positions. As shown in this excerpt (the 1st parameter of mPager.setPageTransformer must be reverseDrawingOrder = false). Note the middle 2 if the sections are switched and the position variable is treated slightly differently to switch sides. The rebound effect is left as an exercise. Please share if you get it! package ;

import android.view ;

the public class SinkPageTransformer implements ViewPager.PageTransformer {
private static float MIN_SCALE = 0.75f ;

public invalid transformPage (View, hover) {
int pageWidth = view.getWidth() ;

as (position

And just in case the sample page disappears, here is the original code for this section:

The public class DepthPageTransformer implements ViewPager.PageTransformer {
private static float MIN_SCALE = 0.75f ;

public invalid transformPage (View, hover) {
int pageWidth = view.getWidth() ;

as (position

Solution 2:

fixed the memory usage issue for this project and changed the backslide style on iOS as.

Enter a description of the image here

I wrote a demo, just like Pinterest and tumblr, just expand the BaseActivity and get the swipe back effect, it works well!


and a screenshot: enter a description of the image here

Solution 3:

I found a GitHub project based on SwipeBack, similar to Pinterest.

It’s a really great open source project that should solve your problem. It does everything you need to do, such as B. Switch to the previous screen by typing on the keyboard or simply dragging. Since this project has the potential

1. Slide from left to right

2. Move from right to left

3. Swipe from bottom to top

and you also install this Google Play demo application.

Attached screenshots:-

Enter a description of the image here

I hope this helps.

Solution 4:

I did it in 15 minutes, which isn’t bad to begin with. If you take a little time, you can change it.

Moby’s package. Sheriff. Activitidrag ;

import android.os.bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.view;
import android.view.animation.AlphaAnimation;
import android.view.Animation.Animation;
import android.view.animation.AnimationListener.Animationview.animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout.Layout.Params ;

the public MainActivity class extends the activity {
double private static endpoint PERCENT_OF_SCROLL_OF_ACTIVITY_TO_FINISH = 0.3 ;
mView ;

protected void onCreate(Bundle savedInstanceState) {
mView = LayoutInflater.from(this).inflate(R.layout.activity_main, null);

private boolean isDragging = false;int startX;int currentX;@Overridepublic boolean onTouchEvent(event MotionEvent) {Log.v(sheriff, isDragging?YES:NO + : + event.getX());if(!isDragging) {if(event.getAction() == MotionEvent.ACTION_DOWN && event.getX() PERCENT_OF_SCROLL_OF_ACTIVITY_TO_FINISH * mView.getWidth()) {AnimationSet animation = new AnimationSet(false);Animation anim = new TranslateAnimation(Animation).RELATIVE_TO_ZELF, 0.0f, Animation.RELATIVE_TO_ZELF, 1.0f – current Percentage, Animation.RELATIVE_TO_ZELF, 0.0f, Animation.RELATIVE_TO_ZELF, 0.0f);anim.setDuration(getResources().getInteger(android.R.integer.config_mediumAnimTime));anim.setInterpolator(new LinearInterpolator());anim.setStartTime(AnimationUtils.currentAnimationTimeMillis());animation.addAnimation(anim);anim = new AlphaAnimation(1.)0f, 0.5f);anim.setDuration(getResources().getInteger(android.R.integer.config_shortAnimTime));anim.setInterpolator(new LinearInterpolator());anim.setStartTime(AnimationUtils.currentAnimationTimeMillis());animation.addAnimation(anim);animation.setFillAfter(true);animation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {fin();}});mView.startAnimation(Animation);}else {AnimationSet animation = new AnimationSet(false);Animation animation = new Translate animation(Animation.RELATIVE_TO_ZELF, 0.0f, Animation.RELATIVE_TO_ZELF, 0.0f -1 * currentPercent, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f);anim.setDuration(getResources().getInteger(android.R.integer.config_shortAnimTime));anim.setInterpolator(new LinearInterpolator());anim.setStartTime(AnimationUtils.currentAnimationTimeMillis());animation.addAnimation(anim);animation.setFillAfter(true);animation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {LayoutParams params = (LayoutParams) mView.getLayoutParams();params.leftMargin = 0;params.rightMargin = 0;mView.requestLayout();mView.clearAnimation();mView.startAnimation(animation);}break;return true ;


Solution no. 5:

I was just talking to the viewer from the hierarchy. It looks like they are using ViewPager with a screenshot of the previous action.

Solution no. 6:

Here’s what I propose:

First, determine what action the user is performing in the device. You can follow this link

I won’t copy the code corresponding to the link above because I think it’s the accepted answer.

Second, with this method you can

public void onSwipeLeft() {
Toast.makeText(MyActivity.this, links, Toast.LENGTH_SHORT).show();

Take the following steps as suggested in this question

It’s a matter of ending the event with an animation.

Consider this with a theme. You can define the input of the output animation for an activity or for the whole application.

I hope this helps you

Solution no. 7:

I think I found the solution myself:

Pinterest uses ViewPager with its own page transformer, which @frozenkoi mentions in his comment. You can see the effect of scrolling at the edge of the preview page in the Little Interest application.

@Amit Gupta pointed out that the library allowed the activity to take place. This is more or less the same concept as the different navigation boxes and it also gives the theme of semi-transparency. They’re changing the plan. But that’s not exactly what I was looking for, because it moves the top activity to the right instead of just calling finish(). However, the following activity is not animated.

The solution is (and I think Tumblr did) to write its own animation with animated objects and animate it step by step.
This can be done with ActivityOptions. I think that would be the solution.

Solution no. 8:

I wrote a draft. It facilitates application development, snippet navigation, works like Pinterest.

That may not be the answer you’re looking for. But I hope it’s useful to someone else.

Solution no. 9:

I did it as part of a project I’m working on and found the following code. It may not be relevant to you right now, but it might help someone who just got hired.

This is essentially the implementation of the ViewPager you mention in your reply, but I think it’s the simplest and quickest solution to your question. The downside is that this is only for fragments (which can easily be changed to objects), and if you want to add an action bar to the scan, you’ll probably end up creating a custom panel.

The DoubleViewPager public class extends the FrameLayout implementation of ViewPager.OnPageChangeListener {

* Represents the number of objects in the DelegateViewPager. In other words, there is a main window
* and a detail window
private static lock in SCREEN_COUNT = 2 ;

private static ending intent CONTENT_SCREEN = 0 ;
private static ending intent DETAIL_SCREEN = 1 ;

private DeputyViewPager DeputyViewPager;
private SparseArray activeScreens = new SparseArray(SCREEN_COUNT);
private DeputyAdapter ;

public DoubleViewPager(context) {
this(context, null);

public DoubleViewPager(Context, AttributeSet attrs) {
this(context, attrs, 0);

public DoubleViewPager(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle) ;

delegatesViewPager = new DelegateViewPager(context);
final FrameLayout.Parameters LayoutParams = new LayoutParams (ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER);
addView(delegatesViewPager, params);

* Create a new PagerAdapter and set the content fragment as the first object in the ViewPager;
* @param-fragment Fragment to be used as primary content
* @param fm FragmentManager needed for operations in the ViewPager
public void initialize(final Fragment, final FragmentManager fm) {
adapter = new DelegateAdapter(fm);
activeScreens.put(CONTENT_SCREEN, fragment);

* Adds a fragment to the stack and defines it as the currently selected item. This is like calling
* startActivity() with some transition effects
* @param fragment Excerpt you want to go into
public void openDetailScreen(fragment) {
activeScreens.put(DETAIL_SCREEN, fragment);
delegateViewPager.setCurrentItem(1, true);

public void hideDetailScreen() {
if (activeScreens.get(DETAIL_SCREEN)! = null) {

public void onPageScrolled(int i, float v, int i2) {
// unused

public void onPageSelected(int i) {
if (i == CONTENT_SCREEN) hideDetailScreen();

public void onPageScrollStateChanged(int i) {
// unused

closed class DelegateViewPager extends ViewPager {

public DelegateViewPager(Context) {

@Public boolean entry
onInterceptTouchEvent(MotionEvent event) {
returns getCurrentItem() != CONTENT_SCREEN && super.onInterceptTouchEvent(event);

@General boolean control
onTouchEvent(event MotionEvent) {
give getCurrentItem() != CONTENT_SCREEN && super.onTouchEvent(event);

the closed class DelegateAdapter extends the FragmentPagerAdapter {

public delegateAdapter(FragmentManager fm) {

getItem(int i) {
returns activeScreens.get(i);

public int getCount() {
returns activeScreens.size();


Here is an activity that implements it with another ViewPager like SlidingMenu. (Attached)

the DoubleViewPagerActivity public class extends FragmentActivity {

DoubleViewPager ;

protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_double_view_pager) ;

doubleViewPager = (DoubleViewPager) findViewById(;
doubleViewPager.initialize(new MainContentFragment(), getSupportFragmentManager());

the public static end class MainContentFragment expands the fragment {

public MainContentFragment() {


@Public View Surface
onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle storedInstanceState) {end view
= inflater.inflate(R.layout.fragment_doublepager_content_window, parent, false); end view
ViewPager = (ViewPager) viewfindViewById(;
pager.setAdapter(new SimpleMenuAdapter(getChildFragmentManager());
return view;


The public static end class SimpleMenuAdapter extends the FragmentPagerAdapter {

public SimpleMenuAdapter(FragmentManager fm) {
super(fm) ;

public Fragment getItem(int i) {
return DoubleViewPagerActivity.PagerFragment.instance(i);

public int getCount() {
return 3;

public float getPageWidth(int position) {
switch (position) {
case 0 :
case 2 :
return 0.7f ;
return super.getPageWidth(int position) ;

the public static end class PagerFragment expands the fragment {

public static PagerFragment instance(int position) {
final PagerFragment and = new PagerFragment();
bundleargs = new bundle();
args.putInt(position, position);
return and;

public PagerFragment() {


@PublicView surface
onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
final FrameLayout fl = new FrameLayout(getActivity());
fl.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
int position = getArguments().getInt(position);
switch (position) {
case 0:
fl.setBackgroundColor(Color.RED); break
; case
fl.setBackgroundColor(Color.GREEN); break
initListView(fl); break
; case
fl.setBackgroundColor(Color.BLUE); break
reverse fl;

private void initListView(FrameLayout fl) {
int max = 50 ;
final ArrayList items = new ArrayList(max) ;
for (int i = 1 ; i (getActivity(),
android.R.layout.simple_list_item_1, items))

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView parent, View view view, int position, long id) {
((DoubleViewPagerActivity) getActivity())doubleViewPager.openDetailScreen(new DetailFragment());

the public finite static class DetailFragment expands the fragment {

public DetailFragmentation() {


@PublicView surface
onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle storedInstanceState) {
FrameLayout l = new FrameLayout(getActivity());
l.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
return l;



Solution no. 10:

This library allows you to open fragments of data like in iOS and close them with sliders.

Good luck!

pinterest backuppinterest image expanderpinterest australiapinterest complaintspinterest enhanced chromepin4ever reviewpinterest app images not loadingpinterest save the link you copied