A beginners guide to implement Android Animations (Part 2)

In Part 1, we discussed about basics of Animations and about Property Animations. In this post, I’ll discuss about View Animations and the new Activity transitions framework introduced in API level 21. The transition framework was already added in API Level 19 (4.4.2) but it got more powerful in API level 21.

The android framework began with View animations but due to their problems, they introduced the Property Animations as discussed in Part 1. View animations are perfect for splash screen animations and other areas where there is no such interaction with the view. In most of the cases, they are implemented using XML code.

Types of View Animation

1. Tween Animation — These are the animations applied on a view which is responsible for scaling, translating, rotating or fading a view (either together or one by one).
2. Frame Animation — These animations are applied using various drawables. In this, we just have to specify a list of drawables in the XML code and the animation runs just like frames of a video.

View Animations are not much used because the same thing can be using ViewPropertyAnimator object which is much faster and readable. Frame animation is similar to Drawable Animation. The more important thing is to understand the new Transition framework which is much useful and provide beautiful animations.

The new animations (API Level 21+)

Isn’t it cool ?

Android provides activity transitions, fragment transitions and shared element transitions. Other animations are circular reveal, ripple effect etc, curved motion. Ripple effect can be applied by just setting the background property of a view as:

android:background=”?attr/selectableItemBackground”

Here we will try out activity transitions and shared element transitions just like above GIF.

The basic step is to create styles-v21 file and do the following things:

styles-v21.xml

Explanation of above styles-v21.xml

Shared Element Transitions — In this, there is a shared view between two activities/ fragments. Shared view means that both the views are same in both the activities, it’s just that their sizes are a little different. For eg — an image in a recycler view item which when clicked(tapped) show the item detail with the same image but in larger size. We will do something like this:-

Cool…But how is this thing working?

Basically there are 2 activities here. One with a small dot and other with a big dot and text. When I click the button in Activity A, it opens up the Activity B with the animation. This effect can also be seen in the Google Play Store app. But they also apply circular reveal, arc motion effects. The most important thing to notice here that the image is NOT moving from original position to final position. The transition framework calculates the start scene and the end scene and then animates in between those scenes. For knowing how animations work refer this. Also with the help of new intent mechanism, this is achievable as shown below:

Here I’ve used the API check for lollipop and then run the transition and in other levels the activity will start normally. The new Pair<> line helps the system to know about the shared elements.

Note — Keep the transition name same in both the views (small dot and big dot). This helps the system know the shared elements. A good thing is to place the transition name in strings.xml.

Here, I’ve used custom_animation.xml transition for the activity transition which is an explode effect. More over, I’ve excluded some views to participate in animation. These views are the statusBar and the toolbar. We can use different kinds of effect (fade, slide) to match our use case.

Activity Transitions — API level 21 introduced more realistic and user friendly activity transitions. For instance, Explode, ChangeImageTransform transitions appear more realistic and better guide the user of the activities flow. In our example above I’ve used fade transition which is provided by Android system. If we don’t specify any animation, then by default AutoTransition is used. We can create our own transition by creating a custom class that extends Transition. See this for reference.

Circular Reveal

Circular reveal effect

The above circular reveal effect is created when FAB is clicked:

Thanks for reading the article. Suggestions/ Corrections/ Comments are always welcomed. If you like it, please hit the like button and share the article with the Android community. Let’s share the knowledge as much as we can.

Also, Let’s become friends on About.me, Twitter, LinkedIn, Github and Facebook.