Motion in android
So earlier this year I attended a talk where the speaker wanted to introduce us to meaningful motion in android apps and he convinced us to use this in our apps as well. Motion came in with Material design, actually not really came but became popular with Material design and since google has added the same kind of motions to their apps as well, developers have started using it.
I love motion, not only does it boost engagement but it’s instantly noticeable. Think of the apps you use that feature motion design and how pleasing, satisfying, fluent and natural they feel to experience. Eg. Zomato, Play music etc.
Now think of some apps that don’t use any kind of motions and you’ll realise they look a bit boring and you as users will always prefer apps with some kind of motion.
Touch
So firstly let’s discover the feedback on touch. It helps to communicate to the user in a visual form that some interaction has been made. But also keep in mind that this animation should be enough for them to gain clarity and encourage further explorations and not distract them.
For adding backgrounds you can use the following :
- ?android:attr/selectableItemBackground — Show a ripple effect within the bounds of the view.
- ?android:attr/selectableItemBackgroundBorderless — Show a ripple effect extending the bounds of the view.
View Property Animator
Introduced in API 12, this allows us to perform animated operations (in parallel) on a number of view properties using a single Animator instance
Some of the parameters that can be added to a view are as follows :
- alpha() -Set the alpha value to be animated to
- scaleX() & scaleY() — Scales the view on it’s X and / or Y axis
- translationZ() — Translates the view on its Z axis
- setDuration() — Sets the duration of the animation
- setStartDelay() — Sets the delay on the animation
- setInterpolator() — Sets the animation interpolator
- setListener() — Set a listener for when the animation starts, ends, repeats or is cancelled.
Now let’s write some code on how to do this on a button for example:
mButton.animate().alpha(1f) .scaleX(1f) .scaleY(1f) .translationZ(10f) .setInterpolator(new FastOutSlowInInterpolator()) .setStartDelay(200) .setListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }) .start();
Note : Use ViewCompat class to implement the ViewPropertyAnimator from Android API version 4 and up
Object Animator
Similar to the ViewPropertyAnimator, the ObjectAnimator allows us to perform animations on various properties of the target view (both in code and XML resource files). However, there a couple of differences:
- The ObjectAnimator only allows animations on a single property per instance e.g.Scale X followed by Scale Y.
- However, it allows animations on a custom Property e.g. A view’s foreground colour.
Her we need to set the evaluator, set the delay and call start().
private void animateForegroundColor(@ColorInt final int targetColor) { ObjectAnimator animator = ObjectAnimator.ofInt(YOUR_VIEW, FOREGROUND_COLOR, Color.TRANSPARENT, targetColor); animator.setEvaluator(new ArgbEvaluator()); animator.setStartDelay(DELAY_COLOR_CHANGE); animator.start();}
Interpolators
An Interpolator can be used to define the rate of change for an animation, meaning the speed, acceleration and behaviour during animating can be altered. Some of them are :
- No Interpolator — The view animates with no rate of change alteration
- Fast-Out Linear-In– The view begins animating and finishes in a linear motion
- Fast-Out Slow-In– The view begins animating quickly and slows down to a finish
- Linear-Out Slow-In– The view begins with a Linear motion and slows down to a finish
- Accelerate-Decelerate– The view appears to accelerate at the start of the animation, and gradually decelerates when coming to a finish
- Accelerate — The view gradually accelerates until the animation finishes
- Decelerate — The view gradually decelerates until the animation finishes
- Anticipate — The view begins by a slight reverse of the stated animation before animating in a standard manner
- Anticipate-Overshoot — Similar to Anticipate, but the pull-back motion that occurs during animating is slightly more exaggerated
- BounceInterpolator — The view animates a ‘bounce’ effect before coming to a finish
- LinearInterpolator — The view to animates from start-to-finish in a linear and smooth motion
- OvershootInterpolator — The view animates an exaggeration of the given value, retracting back to the desired value
These are some of the basics. there are a lot of other things like
- Window transitions(Explode, fade, slide etc.)
- Shared element Transitions
- Other custom transitions
- Animated Vector drawables
you can play around with these for a better understanding but be sure to actually try everything on a device/emulator since you’ll get to actually see the changes in the UI and in turn understand better.
You must be logged in to post a comment.