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
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.
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
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 property
level. 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.