Make activity animate from top to bottom

Question

I am writing an Android app where I want the activity to appear by animating in from the bottom of the screen to the top. I am able to do this with code from here:

• How to translate the activity from top to bottom and viceversa?

However, I am not able to do the vice-versa animation wherein the Activity would disappear by sliding from the top to the bottom of the screen.

I used the code in the above link; the activity appears by sliding up, but when disappearing, it fades out, instead of sliding to the bottom.

I even tried putting the code in onCreate() :

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    overridePendingTransition(R.anim.appear_from_bottom, R.anim.disappear_to_bottom);
    setContentView(R.layout.activity_all_metadata_display);
    initializePage();
}

Solution 1

You need to define your "slide up" animations from the linked question, and some new "slide down" animations that reverse the process.

The important parts of the animations to look at are the fromYDelta and toYDelta values. These define the Y-positions (of the top of your view) at the start & end of the animations.

slide_in_up.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_longAnimTime"
    android:fromYDelta="100%p"
    android:toYDelta="0%p" />

slide_out_up.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_longAnimTime"
    android:fromYDelta="0%p"
    android:toYDelta="-100%p" />

slide_in_down.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_longAnimTime"
    android:fromYDelta="-100%p"
    android:toYDelta="0%p" />

slide_out_down.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_longAnimTime"
    android:fromYDelta="0%p"
    android:toYDelta="100%p" />

---

For the "slide up" animations, you should have overridden the pending transition in your onResume() method like this:

protected void onResume()
{
    super.onResume();
    overridePendingTransition(R.anim.slide_in_up, R.anim.slide_out_up);
}

For the "slide down" animations, do something similar in your onPause() method:

protected void onPause()
{
    super.onPause();
    overridePendingTransition(R.anim.slide_in_down, R.anim.slide_out_down);
}

---

Some tutorials suggest using the wrong life-cycle methods:

• onCreate() is not called every time the activity is shown
• onDestroy() is not called every time the activity is taken away

Rather use methods that are called every time there is a screen transition:

• onResume() is called when the activity is shown to the user
• onPause() is called when the activity is going to be taken away

For more info on these methods specifically, check the Android developer site:

• Pausing and Resuming an Activity

---

When your screen is displayed, it will slide in from the bottom.

When a new screen is displayed, your screen will slide back down.

Solution 2

Two ways of doing this:

1. Using styles

Assuming you wish to implement this for all activities, in your base theme define the following entry:

<item name="android:windowAnimationStyle">@style/ActivityAnimations</item>

Then define the following style:

<style name="ActivityAnimations" parent="android:style/Animation.Activity">
    <item name="android:activityOpenEnterAnimation">@anim/appear_from_bottom</item>
    <item name="android:activityOpenExitAnimation">@anim/hold</item>
    <item name="android:activityCloseEnterAnimation">@anim/hold</item>
    <item name="android:activityCloseExitAnimation">@anim/disappear_to_bottom</item>
</style>

Where @anim/hold can be something like this:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >
    <translate
        android:duration="1000"
        android:zAdjustment="bottom" />
</set>

2. Using overridePendingTransition()

Override finish():

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

Override onBackPressed():

  @Override
  public void onBackPressed() {
    finish();
  }

Override onOptionsItemSelected():

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
      case android.R.id.home:
        finish();
        return true;
    }
    return super.onOptionsItemSelected(item);
  }

Solution 3

In your main xml file. Add id of the root tag and pass this to function. like

/** The Constant ANIM_NO. */
public static final int ANIM_NO = 0;

public static void topToDown(Context context, View target, int type,
        int duration) {

    if (type == UtilityAnimations.ANIM_NO) {
        UtilityAnimations.topToDown(context, target, duration);
    } else {
        final Animation animation = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, 0.0f,
                Animation.RELATIVE_TO_SELF, -1.0f,
                Animation.RELATIVE_TO_SELF, 0.0f);
        animation.setDuration(duration != 0 ? duration
                : UtilityAnimations.DURATION_MEDIAM);
        animation.setInterpolator(UtilityAnimations.getInterpolator(
                context, type));
        target.startAnimation(animation);
    }
}

Solution 4

you can vice-versa your transition by overriding the Transition in your onPause() :

@Override
protected void onPause()
{
    super.onPause();
    overridePendingTransition(R.anim.appear_from_bottom, R.anim.disappear_to_bottom);

}

View more solutions

Comments

[Richard Le Mesurier]

By the way, just testing the code I gave you, and that's a really nice effect. I've been using slide left / right quite a lot recently, but the up / down is good.

[frogatto]

Is this caused when you press back button? Because back button does not follow animations specified by overridePendingTransition

[Richard Le Mesurier]

@ABFORCE There is no reason for the BACK button to ignore overridePendingTransition(). You just need to put the method in the right place, like onPause() for example.

[Richard Le Mesurier]

better to use onPause() as you don't know when onDestroy() will be called.

[Tíbó]

haven't tested this code, but I used this technic a couple of times before, and I can say it works. @user2903200 you should definitely go for that approach.

[Fakher]

Great answer ! is there a way to reverse animation when back button is pressed and not when new activity is opened after user interaction ? thx

[Richard Le Mesurier]

@Fakher off the top of my head, an easy way to do that might be to set a Boolean flag in onBackPressed(), and check it when overriding your animation later.

[Fakher]

I did it by another way, i just make the animation if savedinstance is null ;)

[Xijukx]

Spent time unnecessarily troubleshooting animations and lifecycle methods, but the key factor for me was zAdjustment="bottom".