


This way, we know the order of the images without having to view them. I would also recommend naming them in a self-descriptive way, such as ic_heart_0.png, ic_heart_1.png and so on. For now, shove those images into the res/drawable-mdpi folder and call it a day.

In a production application, we would also make sure to have images sized appropriately for different screen densities. For the sake of simplicity, we’re going to use the following series of PNG images: We have two options here: we can use XML drawables (such as shape drawables) or actual image files. Thus, the first step in creating a custom frame animation is to create a sequence of images. The idea behind a frame animation is simple: We’ll be cycling through a series of images very quickly, just like an old movie reel. Nifty animations! Unfortunately, nothing on the page links to resources for actually creating those delightful details, so here I am to help! Specifically, we’re going to walk through making an empty heart animate into a filled-up heart, then vice versa. In Google’s official Material Design spec, there’s an entire page dedicated to Delightful Details, which has wonderful examples of Frame Animations in action. Let’s take a look at how to implement a subcategory of animations called “Frame Animations,” meaning that they’re drawn frame by frame. Animations add vivacity and personality to your apps.
