Animation and Transitions in Android: A Guide

Animating your app's user interface provides more than just visual appeal. As the trend for a more kinetic interaction slowly gains traction, an effective animation adds more User Experience feels - something that can attract potential users to keep on using the app.

We have to note the fact that animation in Android is already present in its lower versions. In this blog, however, I will be explaining to you the basic animation, including activity transitions, from the Lollipop version onwards. In the newer versions, they added some new custom animations in material design to provide visual continuity as users interact with your app.

Override Pending Transitions

OverridePendingTransition can only happen when starting an activity and closing an activity. After starting or closing an activity, Android will automatically play default transitions. With the help of overridePendingTransition, we can override these default transitions.

The method to call to override transition is

public void overridePendingTransition (int enterAnim, int exitAnim).

The enterAnim is the animation of the activity that will be started and the exitAnim is the animation of the current activity that will be finished.

To create an animation from xml, you first need to create a subfolder under res/ folder and name it anim. If such subfolder exists, create an xml resource file, the name it based on what animation it utilizes.

In this example, we are going to show an animation which moves the activity from the current screen, downards to bottom. As you can see, we've set YDelta from 0 to 100, which means, it is meant to close the existing activity. You, however, can change its values depending on what animation you want.

You can call overridePendingTransition after you start an activity and/or after finishing the activity.

Shared Elements

Shared elements transition has the ability to animate a certain view to another page or activity/fragments. It’s like passing the view to another page but more like having a shared element. Note that the shared element transitions require Android 5.0 (API level 21) and above.

Enable Window Content Transitions

Enable window content transitions to enable the shared elements transitioning in styles.xml.

Assign a Common Transition Name

Assign a common transition name on both layouts. Use the android:transitionName attribute

Start Activity

Start the target activity by specifying a bundle of those shared elements and views from the source.

Multiple Shared Elements

You can animate multiple views.

That’s it! You can now animate views to another page by using Shared elements.

Conclusion

Animating views in Android is challenging, yet easy to learn. Though it is already existing in older versions, it should be done like basic animation, intricately and piece-by-piece. Take note, though, that once Android 5.0 (API Level 21) is released, animation and transition in Android will be a piece of cake.

Animating views can improve user attraction, though it using it too much can do more harm than good. Animating all the views could make your app less user friendly, thus one should take in mind to utilize animation and transition sparingly and wisely.

* Primary image taken from StackOverflow

Blog Posts by Jorge Repaso

Android, Mobile Development

Animation and Transitions in Android: A Guide

As the trend for a more kinetic interaction slowly gains traction, an effective animation adds more User Experience feels - something that can attract potential users to keep on using the app.

Read More