As an app developer, I’ve always preferred to prioritize having a working and stable app before focusing on animations and aesthetics. But recently I’ve learned that both of them are equally important and should have more or less the same priority. I started with splash animations, and now I’m animating individual UI components.
One of the aspects of UI design that is usually set aside is animation. This is actually pretty sad, as any animation that is well-timed and implemented gives an app a professional look and differentiates it from the others. This is why today I’m going to share how I implemented an animation to remove an element in a RecyclerView, like you saw at the beginning of the article.
Let’s start with some theory
The first step is understanding how the animation is going to work. When a RecyclerView item is being swiped, the framework shows a view that is the one that is having a horizontal translation, and another one that is static. For this tutorial we are going to call them the parent view (the one that moves), and the child view (the static one), as you can see in the following screenshot.
Remember that in Android the (0,0) coordinates are in the top left corner of the screen. This is important to understand the code later.
We are going to trigger the animation every time a swipe is detected over our item with the next algorithm:
- Parent view coordinates are obtained so that child view coordinates can be calculated too.
- Coordinates when the swipe is considered to be effective are saved.
- Based on how much the item has been moved in the X axis, we define the size of the icon, its colour and the radius of the circle that is going to resize throughout the animation.
- The centre of the icon is calculated, which is also the centre of the circle, and the space in which the icon is going to be shown is defined.
- The icon and the circle are drawn in the child view using the calculations done previously.
Now with some code
To develop this animation we need to override the SimpleCallback class, with special attention to the onChildDraw method, which is going to be called every time the screen is updated, meaning that in a display with a 60 Hz refresh rate, the function is called every 16 ms. This method is going to contain all the logic that was explained before.
Another method that we are going to use is onSwiped, this where we define an action that triggers when a swipe is done in a specific direction (for example, a removal of a row in the app database). In this case, the swipe is going to be in the positive X axis, so we need to check if the direction is
Here you can see implemented the algorithm explained before, with some comments to clarify more what is going on:
The last step is adding the callback to the RecyclerView.
Animating is actually pretty hard to do, and takes a lot of time to learn, but the results are worth it. I hope that you understood how this animation works and if you need to check more about the code, I left the GitHub repository at the bottom of the post.
If you want to read more content like this and support me, don’t forget to check the rest of the bolg or subscribe here to get an email every time I publish new content.