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,…
