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
- Explode :
- Views are moved in or out of the scene’s center.
Slide :
Views are moved in or out from a scene’s edge.
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"));
