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();
}

Answer 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.

Answer 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);
  }

Answer 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);
    }
}

Answer 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);

}