overridePendingTransition for sliding activities in and out smoothly

Question

I'm having trouble figuring out how to slide activities in and out with a push of a button. What I want is for the user to push a button and then the screen slides. The way I want it is for the 1st activity (the one with the button) to slide out to the left while the new 2nd activity slides in from the right.

With the below code, when the button is clicked, the 1st activity slides out to the right when I want it to slide out to the left. Then when it is done sliding, all that is remaining is a black screen for a split second and then the 2nd activity just appears and does not slide in.

So the 1st activity is sliding out the incorrect direction and the next activity just appears instead of sliding. What am I doing wrong? I am having a hard time understanding the XML files so hear is the code for everything below.

1st activity

@Override
public void onCreate(Bundle savedInstanceState) {

    playBtn.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
            Intent intent = new Intent(MainMenu.this, Levels.class);
            startActivity(intent);
            overridePendingTransition(R.anim.enter_from_right, R.anim.exit_out_left);
        }
    });

2nd activity

@Override
public void onCreate(Bundle savedInstanceState) {
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.levels);

    overridePendingTransition(R.anim.enter_from_left, R.anim.exit_out_right);

So I am thinking that some of my XML files might be incorrect. Here they are.

enter_from_left.xml

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

    <translate
        android:duration="600"
        android:fromXDelta="100%"
        android:toXDelta="0%" >
    </translate>
</set>

enter_from_right.xml

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

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

exit_out_left.xml

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

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

exit_out_right.xml

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

    <translate
        android:duration="600"
        android:fromXDelta="0%"
        android:toXDelta="100%" >
    </translate>
</set>

EDIT Removing the overridePendingTransition() from the 2nd activity made it so the 1st activity slides out to the left which is what I wanted. But, when the 1st activity slides away, it still is just revealing a black screen instead of having the 2nd activity slide in from the right.

Answer 1

Instead of overriding the animation in both startActivity() and the new activities onCreate(), you only need to override the animation just after the startActivity() call.

The two ints you provide for overridePendingTransition(int enterAnim, int exitAnim) correspond to the two animations - removing the old Activity and adding the new one.

For your second question, I believe you have the fromXDelta set wrong, -100% should be all the way off the left-hand side of the screen, not the right, so changing this to 100% should fix it.

Answer 2

look at my gist, it works perfectly:

1.Override CommonActivity's startActivity and finish

 @Override
    public void startActivity(Intent intent) {
        super.startActivity(intent);
        overridePendingTransition(R.anim.from_right_in, R.anim.from_left_out);
    }

    @Override
    public void finish() {
        super.finish();
        overridePendingTransition(R.anim.from_left_in, R.anim.from_right_out);
    }

2.from_left_in.xml

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

3.from_right_in.xml

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

4.from_left_out.xml

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

5.from_right_out.xml

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

gist link: https://gist.github.com/JagieChen/f5cc44bf663f3722bd19097be47ccf9b

Answer 3

There's an error not only in the enter_from_right animation, that should have a fromXDelta of 100% instead of -100%, but even in the enter_from_left animation, that should fave a fromXDelta of -100% instead of 100%.

Cheers,

Answer 4

Change fromXDelta to -100% from enter_from_left and fromXDelta to 100% from enter_from_right in your code, this will give you a correct sliding animation.