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:

shimmer effect

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:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mohammad Derakhshan

Hi! I'm Mohammad. A master's student at the University of Milan. I am an android expert who loves NLP! You can search for me on LinkedIn to make a connection!