“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. As an indie dev I simply don’t have the time to cater to a different UX anymore. Also, material design animations look out of place, 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, my app is a puzzle game where 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 the game for more 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. Even for this particular image, you could break it down 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, very disgusting.

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

Once 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.