Here at Nomtek we pay special attention to application responsiveness. It’s also very important for apps we create to be intuitive for our users. Great animations play a huge part in how users perceive apps.
In Android's early days, we didn’t have much choice in the available solutions. Now there are hundreds of awesome libraries that make our life as app developers easier.
In this article, we will give you an overview of animation libraries that we use in our everyday work.
All the examples below are from our public repository.
Android button widget that uses morph animation to transform into a circular progress bar.
It’s an easy way to make your application more responsive. You can customize the button in many ways to achieve the effect desired in your application.
With TransformationLayout you can transform one view into another through morph animation.
You can also use the morph effect for transitions between two activities or fragments. This is a very good-looking effect that will help your users better understand changes happening on the screen.
TransformationLayout library uses MaterialContainerTransform from the com.google.android.material:material package to achieve this result.
If you need a physics-based motion, you might consider using spring animation.
You can customize spring's stiffness, damping ratio, and final position to achieve the desired effect.
Use fling animation to simulate motion animation that takes into account the friction force.
You can customize friction and starting velocity. The friction force will be proportional to the animated object's velocity.
The android:animateLayoutChanges flag is a great and easy way to breathe life into your application.
You can use this flag on any ViewGroup. The Android framework will then automatically animate layout changes caused by any of the following actions on the parent view:
You might also customize the animation by modifying the LayoutTransition object.
Keep in mind that this API is quite old and limited so you won't be able to achieve every effect you need.
The Transition framework makes it easy to animate various changes in your application’s UI by simply providing the starting layout and the ending layout.
You can describe what kind of animations you would like to use (fade in, fade out, translation) and the transition library will figure out how to animate from the starting layout to the ending layout.
You can use the transition framework to animate between activities or fragments. You can also animate simple layout changes.
Animate layout changes by calling:
You can also specify what kind of transition should be used for a particular view and configure animation order.
Keep in mind that Transitions API has some limitations:
Transitions API:
To animate between two layouts with the Transitions framework, you can use scenes API.
Steps needed to create the animation:
Source: https://developer.android.com/training/transitions
ConstraintSet lets you manipulate a set of constraints in ConstraintLayout.
You can combine it with Transition API to achieve complex animations easily!
Transitions API can also be used for activity transitions. You can define enter and exit transitions. You can also specify the shared elements between the two activities.
Thanks to this, the shared elements from one activity will seamlessly transition to their positions in the second activity.
The gif shows the transition from one activity to another. The Android image is a shared element between those two activities.
Apart from specifying shared elements, you don’t have to do anything. Transitions framework will figure out animations on its own!
MotionLayout is a powerful layout that will let you create complex animations without a single line of code. It's fully declarative — you define transitions and interactions in XML.
It's a subclass of ConstraintLayout. Under the hood, MotionLayout uses the property animation framework and Transitions API.
In the gif below, you can see the debugging overlay. It will show you the paths of widgets and the animation frame rate.
You can enable it with app:motionDebug="SHOW_ALL"
flag.
You can control how MotionLayout’s animation progresses thanks to KeyFrameSet.
It might be a little bit difficult to design complex animations with keyframes. Luckily you can use a cycle editor for that.
It's a tool designed by Google developers that will let you adjust key cycles in the GUI environment.
MotionLayout supports various keyframes:
Common keyframes attributes:
Android’s official documentation for MotionLayout. And our usage example.
Sometimes it's very useful to animate icons. For example, you might need to create a progress bar animation consisting of several images, or maybe you would like to create an animation where one icon morphs into another.
We have good news for you. You can delegate creating an animation to your designer! Shape Shifter will generate a drawable XML.
CoordinatorLayout can be used for many things, but you’ll most often use it in combination with AppBarLayout to achieve complex toolbar animations.
You can also create your own custom behaviors that will dictate how the CoordinatorLayout children interact with each other.
Take a look at ShrinkBehaviour as a reference. It demonstrates how to create a behavior that will shrink your FAB when the bottom panel slides in.
You can also create more complex behaviors — take a look at the SwipeToDismissBehaviour. This example illustrates the usage of ViewDragHelper, a powerful class that makes managing drag gestures much easier.
Another popular use case with CoordinatorLayout is a bottom sheet panel. Bottom sheet panel is a view that can be dragged by the user to reveal its content.
To achieve this effect, apply BottomSheetBehavior to a ViewGroup nested in CoordinatorLayout.
I hope you found this article useful and you’ll be able to use some of the presented patterns in your future development. This is by no means an exhaustive list of great Android animation libraries. If you know other ways to create beautiful animations on Android, please share in the comments!