overridePendingTransition: right to left slide with depth in the activity

Question

I managed to pull off a right to left slide in my activity easily by using this animation R.anim.anim_left_to_right:

<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="300"/>
</set>

In Activity A, I overrode the pendingTransition:

        overridePendingTransition(R.anim.anim_left_to_right, 0);

In Activity B, in the onBackPressed method, I overrode the pendingTransition like this:

 @Override
public void onBackPressed() {
    super.onBackPressed();
    overridePendingTransition(0, R.anim.anim_right_to_left);

}

The R.anim.anim_right_to_left looks like this:

<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="300" />
</set>

The problem with this type of animation is that the animation between Activity A and B is very FLAT - Activity B literally rolls over Activity A and there is no depth in the activity. I want to achieve some type of depth when the activity is transitioning where the exiting Activity A will scale down in the background and the Activity B would slide over it as it scales. When you exit Activity B, the Activity B should slide to the left and Activity A would scale back up to normal size.

A video from Google actually demonstrates this on ViewPager but I wnat to make a similar effect for *Activity**:

http://developer.android.com/training/animation/anim_page_transformer_depth.mp4

I tried to put this in Activity A:

        overridePendingTransition(R.anim.anim_left_to_right, R.anim.anim_scale_out);

And this in Activity B:

    overridePendingTransition(R.anim.anim_scale_in, R.anim.anim_right_to_left);

R.anim.anim_scale_out:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
        <scale android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:toXScale="0.8"
            android:toYScale="0.8"
            android:duration="300"
            android:fillBefore="false" />
</set>

R.anim.anim_scale_in:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
        <scale android:fromXScale="0.8"
            android:fromYScale="0.8"
            android:toXScale="1"
            android:toYScale="1"
            android:duration="300"
            android:fillBefore="false" />

</set>

Still the animation doesn't give me the depth in the activity. When going from Activity A to B, I need Activity A to scale down and Activity B to slide from right to left. When going from Activity B to A, I want Activity B to slide from left to right and Activity A to scale back up.

Answer 1

You should combine translate animation and scale animation.The tag "set "can have several sub items of different type of animations.Write this two kind of animations in one xml file.It will work.

Answer 2

Yes,here is the xml code .And I have tried, it works well. enter animation:

    <translate
        android:duration="1000"
        android:fromXDelta="100%p"
        android:toXDelta="0"
         />
    <scale android:fromXScale="0.8"
            android:fromYScale="0.8"
            android:toXScale="1"
            android:pivotX="50%p"
            android:pivotY="50%p"
            android:toYScale="1"
            android:duration="1000" />
</set>

exit animation:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:fillAfter="true">

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:toXDelta="-100%p"
         />
    <scale android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:toXScale="0.8"
            android:pivotX="50%p"
            android:pivotY="50%p"
            android:toYScale="0.8"
            android:duration="1000" />
</set>

If it still doesn't work for you.I can e-mail my project to you.Good luck.

Answer 3

below XML coding works well.try this

bottom in

<translate
    android:fromYDelta="100%p"
    android:toYDelta="0"
    android:duration="500"/>

top out

<translate
    android:fromYDelta="0"
    android:toYDelta="-100%p"
    android:duration="500"/>

slide in left:

<translate 
   android:duration="400" 
   android:fromXDelta="-100%" 
   android:toXDelta="0%"/>

<alpha 
 android:duration="400" 
 android:fromAlpha="0.0" 
 android:toAlpha="1.0"/>

slide in right:

<translate 
     android:duration="400" 
     android:fromXDelta="100%" 
     android:toXDelta="0%"/>
<alpha 
     android:duration="400" 
     android:fromAlpha="0.0" 
     android:toAlpha="1.0"/>

Answer 4

put these files in anim folder:

slide_in_left:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="true">
    <translate android:fromXDelta="-100%"
        android:toXDelta="0%" android:fromYDelta="0%"
        android:toYDelta="0%" android:duration="300">
    </translate>
</set>

slide_in_right:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="50%p" android:toXDelta="0"
            android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
            android:duration="@android:integer/config_mediumAnimTime" />
</set>

slide_out_left:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-50%p"
            android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0"
            android:duration="@android:integer/config_mediumAnimTime" />
</set>

slide_out_right:

<?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="0">
    </translate>
</set>

And then for opening and closing activity use proper animation as:

overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_right);

Edit

Now the animation you want using scale is here:

scale_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.8"
        android:toYScale="0.8"
        android:duration="500"
        android:fillBefore="false" />
</set>

scale_out:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:duration="500"
        android:fillBefore="false" />
</set>

left_to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%"
        android:toXDelta="0%"
        android:fromYDelta="0%"
        android:toYDelta="0%"
        android:duration="500"/>
</set>

right_to_left:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="-100%" android:toXDelta="0%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="500" />
</set>

And use them like:

Activity A to B-->

 overridePendingTransition(R.anim.left_to_right, R.anim.slide_out);

Activity B to A-->

overridePendingTransition(R.anim.right_to_left,R.anim.slide_in);

Also you can change the duration of animation as per your requirements.