How to start activity using Animation?

Android Development
September 15, 20222 minutesuserVivek Beladiya
How to start activity using Animation?

Material design apps use activity transitions to connect different states with motion and transformations. Entry and exit transitions, as well as transitions between shared elements, can be animated.

Android supports these enter and exit transitions

1] Explode :

  • Views are moved in or out of the scene's center.

2] Slide :

  • Views are moved in or out from a scene's edge.

3] Fade

  • Changes the opacity of a view to add or remove it from the scene.

These transitions are also supported on Android

ChangeBounds :

  • Makes target views' layout bounds change.

ChangeClipBounds :

  • Animates changes made to the clip boundaries of target views.

ChangeTransform :

  • Initiates the scale and rotation change of target views.

ChangeImageTransform :

  • Images have a change in size and scale as a result of animation.

Check on versions compatibility


// Check if we're running on Android 5.0 or higher
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                // Apply activity transition
            } else {
                // Swap without transition
}

Create custom transitions

  • When you define a style that inherits from the material theme, enable window content transitions with the android:windowActivityTransitions attribute.
<style name="BaseAppTheme" 
parent="android:Theme.Material">
      <!-- enable window content transitions -->
      <item name="android:windowActivityTransitions">true</item>
      <!-- specify enter and exit transitions -->
      <item name="android:windowEnterTransition">@transition/explode</item>
      <item name="android:windowExitTransition">@transition/explode</item>

<!-- specify shared element transitions -->
      <item name="android:windowSharedElementEnterTransition">
            @transition/change_image_transform</item>
      <item name="android:windowSharedElementExitTransition">
            @transition/change_image_transform</item>
</style>

This example defines the change_image_transform transition as follows:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet 
       xmlns:android="http://schemas.android.com/apk/res/android">
       <changeImageTransform/>
</transitionSet>

In your code, enable window content transitions by calling Window.requestFeature() :

            // inside your activity (if you did not enable transitions in your theme)
            getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

            // set an exit transition
            getWindow().setExitTransition(new Explode());

Use transitions to start an activity

startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

Let someone start a new activity with a shared element

To make a screen transition animation between two activities that have a shared element:

            final View imgContainerView = findViewById(R.id.img_container);

            // get the common element for the transition in this activity
            final View androidRobotView = findViewById(R.id.image_small);

            // define a click listener
            imgContainerView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Intent intent = new Intent(this, Activity2.class);
                    // create the transition animation - the images in the layouts
                    // of both activities are defined with android:transitionName="robot"
                    ActivityOptions options = ActivityOptions
                        .makeSceneTransitionAnimation(this, androidRobotView, "robot");
                    // start the new activity
                    startActivity(intent, options.toBundle());
                }
            });

An activity with multiple elements is an excellent start

            ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
                    Pair.create(view1, "agreedName1"),
                    Pair.create(view2, "agreedName2"));