CODEWITHSUNDEEP
animationandroid-activityslide
Wolf
Wolf

Reputation: 135

Push In/Out Animation Between Activities

I am working on an application that consists of many activities that represent stages. So there is the Stage1Activity, Stage2Activity, Stage3Activity, etc. Each activity has a button (or more buttons) that, once clicked, take the user to the next activity. What I wanted to do was animate the transition between those activities.

I have added two XML files to the res/anim folder. The push_left_in.xml:

<?xml version="1.0" encoding="utf-8"?>
<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>

And the push_left_out.xml:

<?xml version="1.0" encoding="utf-8"?>
<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>

In the main activity, Stage1Activity I have:

public class Stage1Activity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_stage1);
    overridePendingTransition(R.anim.push_left_in, R.anim.push_left_out);
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event){
        if (keyCode == KeyEvent.KEYCODE_BACK){
            finish();
            overridePendingTransition(R.anim.push_left_in, R.anim.push_left_out);
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

Now, when I move through activities the transition works as it should. The new activity pushes the old one out of view from the right to the left. I wanted a reverse effect for when the user presses the back button on their device, however the same transition animation plays out. I've played with the android:fromXDelta tag and achieved some pretty weird results but I just don't know how to set it so that upon pressing the back button on the device, the new activity (actually old one newly called with an intent) pushes out the old one from the left to the right.

Basically I want to make it appear like you are moving to the right when progressing through the stages, but when you press back it is supposed to look like you went back (to the left). Apologies if this is a dumb question but I really got confused and I need help :/

Upvotes: 2

Views: 5790

Answers (1)

Wolf
Wolf

Reputation: 135

Kinda dumb to answer my own question I suppose... But I guess it's only fitting that I clean up my own mess. I've done some more extensive research and played around with the code and I'm proud to say that I've solved the problem. Here's the solution below for reference of anyone else who might need it.

Four animations were needed for this application. First, upon clicking the button on Stage1Activity I wanted to slide and fade out that activity to the left, while sliding in Stage2Activity from the right to the left. This required two XML files:

push_left_in.xml

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

push_left_out.xml

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

These two files are called in the overridePendingTransition(R.anim.push_left_in, R.anim.push_left_out); command placed in the onCreate, right below setContentView. One pushes the old activity out, the other one pushes the new activity in. Now I just needed the opposite effect for when the Back button is pressed on the device. This required a whole new animation (something that I didn't get right away).

So I add two more XML files:

push_right_in.xml

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

push_right_out.xml

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

These other two files are called in the overridePendingTransition(R.anim.push_right_in, R.anim.push_right_out); placed in the onKeyDown method for the Back button response. One slides the old activity out, the other one slides the new activity in - but in reversed direction when compared to the previous animation. Don't forget to change the alpha values as well, because that happened to me lol

Anyway this question is now closed. Sorry for the trouble! Or not, since I at least got the Tumbleweed achievement for it XD

Upvotes: 11

Related Questions