Photo by Jeremy Yap on Unsplash

Animating a single item from a <layer-list>

Eliza Camber
Aug 8, 2017 · 3 min read

A bit more than a year back, android animations was a big black hole for me... Then one day my director came to me and he showed me the screen of one of our apps saying: “You see this? Now, how can we make this interesting and sexy?”. A few jokes later, we ended up at the conclusion that the only way we could make it more user friendly and impressive was to add animations. So I started looking into animations and all the different Android SDKs we could use. I found out that although it’s fairly simple to start with animations and animating simple views, there are some points that you just have to try everything because nothing seems to do the trick; and then again you have to unleash your creativity and try all the possible different combinations.

Recently, we had a new project where the main screen has a horizontal RecyclerView of CardViews. Each item of the RecyclerView is divided in 2; on top there’s some description and on the bottom there’s an ImageButton which, when clicked, it will spin while loading and then it will give some feedback to the user that his request either succeeded or failed. Simple enough, huh? Sort of… My button looked like this:

The background needs to spin, while the calls to the backend are made, while the heart needs to stay still. As you cannot animate backgrounds, there were 2 options left. The first option is to have the button only with the heart and behind it to have an ImageViewonly with the circles. The problem with that approach is that, this point in the screen will be draw twice, and since it’s in an item of a RecyclerViewand performance matters, this doesn’t seem like the right approach. So my other option was to create a new xml that would hold both of my drawables.

Prior API 23 if the Button’s source is a drawable

If you have a png for your Button you can use the bitmaptag inside the rotate tag without any further adjustments (if the dimensions are correct). If your drawable is from a SVG file though you need to resize it manually otherwise it will stretch to the dimensions of your background. From API 23 and above you can also use the width and height tags.

API 23+

What I needed next was to be able to somehow animate only one the items, and apply the animation to the drawable instead of the whole view. A lot of Google searches and failed tries later, I finally manged it like this:

You first need to create a LayerDrawable to get the drawable from your View (in this case my button). You then can get a specific item from the <layer-list either from it’s tag or from it’s index. Once done you can create your ObjectAnimator,pass that drawable to it and alter the propertylevel. And although I’d expect to set the values from 0 to 360 since I want a full circle, this seemed to be ridiculously slow so I had to play around with the end value of the level property and finally select something that looks good to the eye and close to what we wanted.

You can find the code for the whole project here.

Eliza Camber

Written by

Pixplicity

The Creative Tech Agency

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade