AnimatedIcons: Loading V2 – Styling Android

AnimatedIcons: Loading V2 – Styling Android

- in Android
Comments Off on AnimatedIcons: Loading V2 – Styling Android

There’s a good micro-animation library at which accommodates some helpful animations that are significantly effectively fitted to animated icons. These are all free to make use of and downloadable at Lottie animations. For those who already use Lottie they will use these animations as-is. Nevertheless utilizing them is apps which don’t use Lottie, or in instances the place they could want tweaking and also you don’t have a designer out there that may carry out the mandatory tweaks in After Results, it will not be potential to do that. On this occasional collection we’ll take a look at methods to create a few of these animations as Animated Vector Drawables which can present some helpful AVD strategies.

The primary animated icon that we’ll take a look at is one named Loading V2. It consists of a grid of four×four bins which develop and fade is a wave which flows throughout the icon diagonally. This may be seen in direction of the underside of the web page within the Loading part. It’s a looping animation just a little like a round indeterminate ProgressBar which can repeat till it’s stopped.

The very first thing that we have to do is create a static Vector Drawable useful resource which represents the 16 bins which comprise the four×four grid:

That is truly fairly repetitive, so I’ve solely displayed the primary two bins. The factor to notice is that they’re similar other than the group identify, and translateX and translateY attributes. The pathData of every of the bins is similar and makes use of a string useful resource which is outlined as M0,0h12v12h-12z. This attracts a 12×12 pixel sq..

The pivotX and pivotY attributes specify the purpose round which we’ll scale every field – which is its centre level; and the scaleX and scaleY attributes set the default state – which is totally collapsed. The entire bins begin collapsed, and we’ll develop them to full measurement after which shrink them again once more in the course of the animation.

It’s value mentioning that the vector itself is definitely drawn utterly white, however within the layouts I exploit a tint worth to use colouring to it. This can be a helpful trick with vectors as a result of it permits them to comply with the app theme a lot simpler than hardcoding color values throughout the vector asset itself.

The animator to develop and shrink the field in place 1,1 (the highest left field) seems like this:

That is an ObjectAnimator which defines the period of the animation, and the truth that it should repeat indefinitely. The pattern venture is minSdkVersion="23" which implies that I’m able to use <propertyValuesHolder> and <keyframe> which had been each launched in API 23. It’s actually potential to create this animation with out them, and also you’ll want to do this with a purpose to help earlier API ranges, however they make the code much more compact and simpler to know which is why I’ve elected to make use of them right here.

<propertyValuesHolder> specifies the attribute whose worth shall be animated. On this case we’re animating the scaleX and scaleY attributes of the group within the static vector that we checked out earlier. The <keyframe>s management how the worth will change over the course of the animation. The fraction attributes are all within the vary Zero.Zero-1.Zero the place Zero.Zero is the beginning of the animation and 1.Zero is the tip. The worth attribute management what the worth of the property shall be at that time of the animation. The animator will interpolate the values between these key frames.

So with the values proven above: For the primary 20% of the animation (from Zero.Zero-Zero.2 the worth will go from Zero.Zero-1.Zero; then it should maintain at 1.Zero for the subsequent 30% (from Zero.2-Zero.5); then it should change from, 1.Zero-Zero.Zero over the subsequent 20% (from Zero.5-Zero.7); after which it should maintain at Zero.Zero for the remaining 30% (from Zero.7-1.Zero). It will develop the field, maintain it at full measurement, then shrink it again once more when utilized to the scaleX and scaleY attributes as we’re right here.

This will get connected to the vector within the animated-vector:

This hyperlinks the objectAnimator that we simply checked out to the group named 1-1 within the vector that we checked out earlier.

So that can animate one of many bins, so now we have to apply the identical to the opposite bins, however stagger them to create the wave impact. Should you take a look at the animation firstly of this text, the wave truly flows with the diagonals that run backside left to higher proper. The primary cell to maneuver is the highest left at 1,1, adopted by the 2 cells instantly to the proper and beneath it at 2,1, and 1,2 which transfer collectively. The following block to maneuver is the three cells at three,1, 2,2, and 1,three, and so forth. In all there are seven separate phases. Let’s check out the animator that we use for the second section (calls 2,1 and 1,2):

That is truly similar to the earlier animator besides that we use completely different fraction values for every of the important thing frames. This runs an similar animation sequence, however it’s offset in order that the whole lot occurs 5% of the entire period after the primary section animation.

We will now add this to each the cells within the second section:

We do the identical for the remaining phases offsetting every section by one other 5%, and it will construct up all the animation. I gained’t trouble together with all of this right here, however you possibly can see it within the accompanying supply code.

Whereas this doesn’t completely match the timing of the phases within the authentic animation that I’m basing it upon, this demonstrates the fundamental method at work right here. To imitate the unique animation extra exactly would imply studding the timing of it, after which adjusting the important thing body values to match the unique. Nevertheless, I’m pretty proud of how this animation feels, so we’ll go away it there.

The supply code for this text is obtainable right here.

© 2019, Mark Allison. All rights reserved.

Copyright © 2019 Styling Android. All Rights Reserved.

Details about methods to reuse or republish this work could also be out there at