Harnessing the Power of Animated Vector Drawables
Dealing with the UI/UX portion of the development process can be a very daunting task, whether you work as part of a team, or as a freelancer. The animation support, or lack thereof, is a topic that a majority of, if not all Android developers have discussed with varying degrees of passion.
With the industry changing, companies are paying more attention to the importance of a good UI/UX — an aspect of software development that some of us may never have to deal with if they so chose. However, for those of us that do, it would help a lot if there was just a little bit more support. Don’t get me wrong, I think the team at Google are working towards making animations a bit less daunting for developers but, this is a-whole-nother topic for another day; perhaps another Medium post. Anyway, there are certainly way more APIs available now that help us create beautiful, and responsive apps, but like everything else, you have to know what you’re doing. Thankfully there are a lot of communities such as Medium, dribble, reddit e.t.c to help us make the right decisions.
The AVD
The animated vector drawable has been around for around a couple of years now, with the launch of Lollipop. However, like many developers, I only saw it as a pointless library to change a hamburger menu into an arrow. We’ve all seen it.
This was my view of AVDs for while. I just didn’t see any other use cases for it.
I was also developing an app while Lollipop was making its way to production, and you can say that this really wasn’t a very optimistic time for animations in the Android world. No matter how hard I tried I just couldn’t get this app to look as polished as some well designed iOS apps. As a matter of fact a good amount of the people that I demoed it to said that it looked really great, but it was “Android-y”, or something to that respect. I may not have 100% understood what that meant at the time, but I digress. It was an opinion nonetheless, and sometimes it was meant negatively, and something had to be done about it.
As time went on I came across this library, as well as this tool while watching a talk on animations from two people who I believe where on the Android development team at the time. I wasn’t able to find the video but, it was definitely one of the catalysts in helping me create the app where the animation at the top of this post lives.
I’ve never really used the library in a project but, the shape shifter tool has been a game changer in terms of my work flow.
“As developers, we make programs by breaking ideas up into smaller segments. Animations are done the same way.”
Before I continue, yes, this is for API 21 and above — I simply don’t have the time to cater to a different UX anymore. Also, material design animations look out of place pre-lollipop, in my opinion.
Design & Application
Animations aren’t that hard to implement. As developers, we make programs by breaking ideas up into smaller segments. Animations are done the same way.
In order to try and keep this post short, I will be showing a less complex animation than the one above. Also, I will only be talking about the AVD, not the translation, or the ripple animation.
My main issue with a lot of tutorials and teaching material in general is that they don’t usually provide a use case to accompany their content. So, I’m compelled to explain how/why I use this animation in my app although, this is not a tutorial. Feel free to skip this and head over to the next section if you don’t share this ideology.
To put it simply, this article centres around an Android app in the puzzle game genre in which users have to solve a series of puzzles without directly interacting with them. The reason the card turns grey as opposed to green, and the circle bounces off the top edge of the card instead of completely “escaping” the card as in the first animation is due to one of the constraints of the game. I don’t want to ramble on about this for longer than I need to so, this is a link to it where you can find out some more information about it, and try it out if you please. It’s still in it’s beta phase so try not to be too critical but, do let me know what you think if you find the time. A lot more content for it will be coming over the following days as well.
Animated States
Building on what I said earlier, though the animation may seem like it has a lot going on, you just need to look at it critically. In reality, the AVD has only three main states. This is great because you can delegate the task of making the AVD to the designer, and the developer would only need to worry about these three states in their code. More on this later.
Obviously you have to make the images first, and they have to be in .svg format, so use a tool that allows you to export to that format. I use Adobe Illustrator. If you have a UX designer on your team, then they can deal with this part. If not, the great thing about AVDs is that they are 2D. All of the images in this post are just a combination of simple shapes. The first state for example, just consists of rectangles and a polygon. Once you have your images, head over to the tool I mentioned earlier.
You can also have as many states as you like. You could even break down this particular example into more states, if you so please. I chose three states because that was my use case.
Shape Shifter
This tool is great because it allows you to design animations visually. Before this tool, you had to code up the image by hand 🤢.
With shape shifter, I just drag the first state of the AVD onto the webpage, and start from scratch. Lets take another look at the animation in slow motion where you’ll hopefully be able to see the AVD animating to all three states.
All the animation that happens in-between is done visually in Shape shifter. As you can see, the shapes are just being translated downwards at different rates with a bounce interpolator added to the translation animation of the polygon to give it realistic, falling look.
The animation to the third state is called a path animation. Shape shifter does this for you as well. All you need is the image that you are animating to, and from.
This tool also has pre-made, fully exportable path animations that you can play around with by clicking on the “Demo” option in the File menu. This is one of them but with a fill-color animation added to it.
Code
If all the animations are done its just a matter of exporting the separate animations into to an AVD file, which is in .xml format. In this case, there are only two. If you’re on the design team, this is where you can call it a day. Just make sure you email those .svg and .xml files to the dev team.
Once that is done, you just need to put them into the drawable folder. Now, you just need to make your program understand how to animate these files.
The first step is making a state selector file, which is just another .xml file that goes in the drawable folder. This is an example of what it should look like for the animation.
Then add the states to the attrs.xml
Now, all you need to do is set this file as the src value of your ImageView element. Then in the code, all you need to do is declare the states as int arrays.
That’s it. All you need to do is call img.setImageState(STATE_ONE,true); and watch your animation come to life.
