Case study: Building an Instagram-like chat theme animation
Recently Instagram introduced a new chat themes feature which animates colors when we scroll. An example can be seen above.
Introduction
In this tutorial, we’ll learn an easy way to add a similar color change animation while scrolling in RecyclerView.
The demo app project shown in the tutorial can be found here:
and an APK of the example can be found here!
Let’s get started
By looking at the animation we can see that each cell goes through a series of color change depending on its y-coordinate value (which changes for each cell as we scroll). So we will define two colors:
- Start color: when the y-cord value is equal to 0. (means the cell is at the bottom)
- End color: when the y-cord value is equal to the height of the screen. (means the cell is at the top)
Now we need a way to animate from the start color to end color. For that we can use the below class:
To understand the logic behind this class please refer to this SO post.
Now we understand that we have to animate from the start color to end color. We also have a class which helps us animate between these colors. But we need a progress value (which will be b/w 0 to 1) that we can pass in with(delta) function. For example:
- with(0): will give you that start color.
- with(1): will give you the end color.
- with(x): where x is b/w 0 to 1 (open interval) will give you colors to smoothly transition b/w start and end color.
Next thing is we have to calculate the value of ‘x’. For that, we can use the below function:
It divides the y-cord with the total height of the screen. For example:
- For a view at the bottom, y-cord is equal to screen height. So the float range is 1. (since we need start-color at the bottom we return 1 - range)
- For a view at the top, y-cord is equal to 0. So the float range is 0.
- For a view at the mid, y-cord is equal to screen-height/2. So the float range is 0.5. Similarly, we can calculate for the rest of the value.
Now we have everything we need. To change color on scroll let’s add an onScrollListener to our recyclerview:
Here as you can see we are updating the background only for OutgoingChatViewHolder because in animation we can see only the color of outgoing message changes. You can update it according to your use case.
Also as you can see above, it is important to call getFloatRange() in “itemView.post{}” runnable because in recyclerview it is possible that cell might not get rendered right away otherwise it will always return 0.
Also, forEachVisibleHolder is an extension function which loops through all the view-holders in a RecyclerView & updateTint is an extension function which updates the drawable tint color. You can find them below:
That’s all. Thanks for reading the article & don’t forget that the code for this tutorial is available on my Github account, here.
If you like this article don't forget to clap and share!!
