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.

you can use Transition class for activity transition but it is added in API 19 and also other transition like Fade, Explode and Slide but these are added in API 21 check this link [link](http://xmodulo.com/activity-transition-animations-android.html) this may not be the answer which you are looking for. — Rachit Solanki, Mar 06 '16 at 17:46
It is unfortunately not the answer im looking for. My app targets up to api 16. I cant understand why this effect is so difficult to do because it is used in a lot of apps. If u look at the Facebook app, u can see this effect if you move from one activity to another. — Simon, Mar 06 '16 at 17:53

Android Geek · Answer 1 · 2016-03-07T06:06:43.577

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.

@Simon but it is working good. I can provide you code for scale too. — Android Geek, Mar 05 '16 at 11:30
Please have a look at the video link I posted above and try to make your code work so that the animation look like that. — Simon, Mar 05 '16 at 11:39
time is running out for me to award this bounty. Did you manage to figure this out? — Simon, Mar 06 '16 at 13:13
@Simon actually due to weekend i could not work on this. Wait i am trying to do it now. — Android Geek, Mar 07 '16 at 04:33
OK. Just for your information, the effect I'm looking for can be found everywhere. Have a look at the Facebook app, if you go from the home screen to one of your friends profile, it has this effect. — Simon, Mar 07 '16 at 04:54
@Simon The edited code is working as per your demo video, please check with your own code and let me know. — Android Geek, Mar 07 '16 at 06:07
@Simon Ok let me know if the code is working as per your requirements. — Android Geek, Mar 07 '16 at 09:36
I tried it just now but it doesn't seem to work as expected. Do you have a github repo where I can download your test and see for myself? — Simon, Mar 07 '16 at 19:12
@Simon well i have provided you all the code. And in my code i just took two activites and did the same code as above. — Android Geek, Mar 08 '16 at 05:48
@Simon I'm trying to achieve the same as you. The slide is flat and the depth example from google is the desired I want too. Did you find a solution? Thanks. — Luccas, Mar 13 '16 at 15:45
No unfortunately not. Sorry. I actually am starting to think its a built in android animation and I just need to figure out what the code is that triggers it. — Simon, Mar 13 '16 at 15:48

score 0 · Answer 2 · answered Feb 28 '16 at 15:31

0

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.

answered Feb 28 '16 at 15:31

wngxao

72
5

Yes I know that and I have tried that already but it doesn't seem to work. Can you please demonstrate with code? – Simon Feb 28 '16 at 17:26
Yes,here is the xml code .And I have tried, it works well. enter animation: – wngxao Feb 29 '16 at 01:08

score 0 · Answer 3 · answered Feb 29 '16 at 01:13

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.

You are not understanding my question - I don't want the entering activity to scale AND translate at the same time. Please reread my question. Activity A must scale and Activity B must translate. Did you watch the link to the video by google to see the effect i want to achieve? — Simon, Mar 03 '16 at 18:02

score 0 · Answer 4 · answered Mar 02 '16 at 07:34

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"/>

overridePendingTransition: right to left slide with depth in the activity

4 Answers4