overridePendingTransition for sliding activities in and out smoothly

Viewed 54610

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.

5 Answers

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

Don't forget the pivot at this point! fE. Move from up to down. pivotY is 100% that meen's bottom, so your 0% are on the bottom and -100% are up and you don't see it. Makes it more handy when you set the pivot to your border.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
        android:fillAfter="true"
        android:shareInterpolator="false">
    <translate
            android:duration="800"
            android:fromYDelta="-100%"
            android:toYDelta="0%"
            android:interpolator="@android:anim/bounce_interpolator"
            android:pivotX="50%"
            android:pivotY="100%"/>
</set>
Related