Activity Transition in Android

Activity transition in Android

You can do this with Activity.overridePendingTransition(). You can define simple transition animations in an XML resource file.

How to perform a fade animation on Activity transition?

You could create your own .xml animation files to fade in a new Activity and fade out the current Activity:

fade_in.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
           android:interpolator="@android:anim/accelerate_interpolator"
           android:fromAlpha="0.0" android:toAlpha="1.0"
           android:duration="500" />

fade_out.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
           android:interpolator="@android:anim/accelerate_interpolator"
           android:fromAlpha="1.0" android:toAlpha="0.0"
           android:fillAfter="true"
           android:duration="500" />

Use it in code like that: (Inside your Activity)

Intent i = new Intent(this, NewlyStartedActivity.class);
startActivity(i);
overridePendingTransition(R.anim.fade_in, R.anim.fade_out);

The above code will fade out the currently active Activity and fade in the newly started Activity resulting in a smooth transition.

UPDATE:
@Dan J pointed out that using the built in Android animations improves performance, which I indeed found to be the case after doing some testing. If you prefer working with the built in animations, use:

overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out);

Notice me referencing android.R instead of R to access the resource id.

UPDATE: It is now common practice to perform transitions using the Transition class introduced in API level 19.

Activity transition black screen

What I always do is to start an activity(any way you want, ways are listed here).

I use slide transitions using these two files:

slide_out_left.xml:

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

slide_in_right.xml:

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

Then I start an activity like this(this is java):

startActivity(MainActivity.this, SecondActivity.class);
overridePendingTransition(R.anim.slide_in_right.xml, R.anim.slide_in_left.xml);
finish();

Using this, the activity exits giving way to the new one smoothly from right to left.

For the black screen, set the theme of that activity as translucent in the AndroidManifest.xml file

android:theme="@android:style/Theme.Translucent"

so your code will be something like this

<activity android:name=".Activity"
        android:theme="@android:style/Theme.Translucent" />

Answer for the black screen taken from: https://stackoverflow.com/a/6468734/9819031

How to apply slide animation between two activities in Android?

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splashscreen);

         new Handler().postDelayed(new Runnable() {
             public void run() {

                     /* Create an intent that will start the main activity. */
                     Intent mainIntent = new Intent(SplashScreen.this,
                             ConnectedActivity.class);
                     mainIntent.putExtra("id", "1");

                     //SplashScreen.this.startActivity(mainIntent);
                     startActivity(mainIntent);
                     /* Finish splash activity so user cant go back to it. */
                     SplashScreen.this.finish();

                     /* Apply our splash exit (fade out) and main
                        entry (fade in) animation transitions. */
                     overridePendingTransition(R.anim.mainfadein,R.anim.splashfadeout);
             }
     }, SPLASH_DISPLAY_TIME);   
    }

Android Activity Transition Animation

Alter your exit animation so that it renders over top of the entering activity.

R.anim.slide_up

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:zAdjustment="top">

    <translate
        android:duration="1000"
        android:fromYDelta="0%"
        android:toYDelta="100%" />

</set>

Then you can do what you were originally doing to set the animation.

overridePendingTransition ( 0 , R.anim.slide_up );

Android: how to make a vertical Activity transition with another Activity

Use overridePendingTransition to change the Activity animation.

For the 1st case you can use:

Intent intent = new Intent(MainActivity.this, SecondActivity.class);
startActivity(intent);                     
overridePendingTransition(R.anim.abc_slide_in_bottom, R.anim.abc_slide_out_top);

For the 2nd case choose other animations and call overridePendingTransition
in onBackPressed or after finish. overridePendingTransition should be called right after your activity finishes.

If you are looking for animations, take a look at the google API samples.
https://android.googlesource.com/platform/development/+/master/samples/ApiDemos/res/anim/
There a lot of simple and useful animation xml's.

But abc_slide_in_bottom and abc_slide_in_bottom are in the google appcompat lib since some years. abc_slide_out_bottom and abc_slide_in_top also.

How to restore element in Activity Transition Animation to different position?

First, you're using the transition names wrong in your call. The name in the ActivityOptions.makeSceneTransitionAnimation is the name of the view in Activity 2. You can use any name you want in Activity 1 and the framework will map the names. This way you can do a many-to-one mapping. For example, if you have a list view of images and you click on one of them, it should be able to transition to a single image in Activity 2. In your case:

<LinearLayout>
   <ImageView android:transitionName="image1" />
   <ImageView android:transitionName="image2" />
   <ImageView android:transitionName="image3" />
   <ImageView android:transitionName="image4" />
   <ImageView android:transitionName="image5" />
   <ImageView android:transitionName="image6" />
</LinearLayout>

and when you make the call:

 ActivityOptionsCompat options =
     ActivityOptionsCompat.makeSceneTransitionAnimation(
            getActivity(), view, Activity2.IMAGE_VIEW_NAME);

And in your Activity 2, you should have an ImageView with the transitionName of Activity2.IMAGE_VIEW_NAME.

But that's not what you were asking about.

Because you're sharing a different element on the way back, you're going to have to override the shared element mappings. You can do this in a couple of ways in your circumstances. The best way requires you to change the mapping of shared elements in Activity 1.

In Activity1, set a SharedElementCallback:

setExitSharedElementCallback(new SharedElementCallback() {
    @Override
    public void onMapSharedElements(List<String> names,
        Map<String, View> sharedElements) {
        sharedElements.put(Activity2.IMAGE_VIEW_NAME, newSharedElement);
    }
}

So, how do you know which view it should return to? You should use startActivityForResult and so that the called Activity can return the correct view to you. Here, I assume you use the same EXTRA_POSITION field when you call setResult with an Intent. You can then override onActivityReenter to do what you need:

@Override
public void onActivityReenter(int resultCode, Intent data) {
    int position = data.getIntExtra(GalleryActivity.EXTRA_POSITION, -1);
    if (position != -1) {
        // I'm assuming child index is the same as position here.
        newSharedElement = mLinearLayout.getChildAt(position);
    }
}

The other thing you can do at this point is scroll the view to a position such that the view is visible. If you're using a recycling container like ListView or RecyclerView, you'll need to use postponeEnterTransition and startPostponedEnterTransition to ensure that the views are laid out prior to starting the transition.

---

Related Topics