Cannot get slide animation to work right

Question

I am trying to make a nice transion effect from my list to detail page, then after pressing back from the detail to list page. Something like:

     +----------+
   +--------+ A |  All from same direction
 +------+ B |   |
 |    A |  +--> |
 |      |   |   |
 |      |   |   |
 |     +--> |   |
 +------+   |   |
   +--------+   |
     +----------+


+--------+             +----------+
|   B    |---+    +----|     A    |
|        | A |    |  B |          |
|        |   |    |    |          |
|        |   |    |    |          |
|        |   |    |    |          |
|      +---> |    |    |          |
|        |   |    |  <----+       |
|        |   |    |    |          |
|        |---+    +----|          |
+--------+             |          |
                       +----------+

 B moves over A, then after pressing back
 A moves over B.

The first part works well (list>detail) however I hook the opposite order of effects on the back action and it kind of works but not as I would want it. The wrong page (page B) undertakes the slide after back press, settles over A, then disappears.

What I really wanted was for A to slide over B after back press, which makes more sense.

Code from list:

lstBooks.setOnItemClickListener(new ListView.OnItemClickListener()
{
    @Override
    public void onItemClick(AdapterView<?> adapter, View view, int position, long id)
    {
        Intent intent = new Intent(BooksActivity.this, DetailClass.class);
        startActivity(intent);
        overridePendingTransition(R.anim.left_to_right_slide, R.anim.right_to_left_slide);
    }
});

The opposite from the detail page :

@Override
public void onBackPressed()
{
    super.onBackPressed();
    overridePendingTransition(R.anim.left_to_right_slide,  R.anim.right_to_left_slide);
}

left to right slide:

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
    <translate android:fromXDelta="-100%"
               android:toXDelta="0%"
               android:fromYDelta="0%"
               android:toYDelta="0%"
               android:duration="350"/>
</set>

right to left slide:

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
    <translate android:fromXDelta="0%"
               android:toXDelta="100%"
               android:fromYDelta="0%"
               android:toYDelta="0%"
               android:duration="350" />
</set>

Basically I want the slide to work naturally in the opposite direction when pressing back. **

Answer 1

There are 4 different scenarios which will be animated:

          ******************
          *                *
Left    ==*==>  Center     * 
          *                *
          ******************

          ******************
          *                *
          *     Center   ==*==>     Right       
          *                *
          ******************

          ******************
          *                *
Left   <==*==   Center     * 
          *                *
          ******************

          ******************
          *                *
          *     Center  <==*==      Right       
          *                *
          ******************

So, you need to define 4 animations:

left_to_center_slide

    android:fromXDelta="-100%"
    android:toXDelta="0%"

center_to_right_slide

    android:fromXDelta="0%"
    android:toXDelta="100%"

center_to_left_slide

    android:fromXDelta="0%"
    android:toXDelta="-100%"

right_to_center_slide

    android:fromXDelta="100%"
    android:toXDelta="0%"

And then:

List to Detail:

overridePendingTransition(R.anim.left_to_center_slide, 
                                           R.anim.center_to_right_slide);

Detail to List:

overridePendingTransition(R.anim.right_to_center_slide, 
                                           R.anim.center_to_left_slide);

Answer 2

Try this:

@Override
public void onBackPressed()
{
    super.onBackPressed();
    overridePendingTransition(null,  R.anim.right_to_left_slide);
}

with right to left slide:

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
    <translate android:fromXDelta="100%"
               android:toXDelta="0%"
               android:fromYDelta="0%"
               android:toYDelta="0%"
               android:duration="350" />
</set>