How to implement the shimmer effect using jetpack compose?
In almost every project, we need to load some data and present them to the user. Sometimes, the user must wait a few moments for data to be prepared. There are different ways to fill this gap and inform users about data loading. in this article, we are about to implement the shimmer effect purely in jetpack compose.
Let’s not waste time and dive into implementation!
By the end of this article, you’re able to create something like this:
The concept behind that is straightforward. It is a gradient brush that moves from left to write repeatedly. we generate a shimmerBrush that implements Brush . This way, we can use it as background in any composable modifier we want.
This Brush can gets two inputs: showShimmer and targetVaue
The reason behind showShimmer is in my recent project, I had to apply the shimmer effect to Coil AsyncImage composable and hide it when the image was loaded. An example of how you can use this effect is: