From Blank to Beautiful: Implementing Shimmer Effect in Compose
It’s important to have a great user experience in Android apps. Instead of presenting a blank space, you can use a shimmer effect for a loading animation. This will improve the user experience. in this article, we will show you how you can create a shimmer effect with Compose.
What is shimmer effect?

A shimmer effect is a smooth transition between shades of color. It is usually used on a UI component to show that content is loading. You can use this effect to make waiting more visually appealing.
Let’s get Started
All you need to do is to create a custom brush, and then you can apply the shimmer effect to any Compose UI element.
Here is what you should do:
- Prepare the Animation stage: Set the stage for your shimmer effect by creating a
rememberInfiniteTransition
. - Animate a Float Value: To smoothly change the offset of your
LinearGradientShader
animate a float value. - Allow recompositions: To allow recomposition when the
offset
changes, use theremember
function. - Create custom ShaderBrush: create a
LinearGradientShader
. The movement of the brush is defined by theoffset
. As theoffset
progresses , it generates the shimmer effect. To achieve a beautiful shimmer effect, useTileMode.Mirror
. It’s important for the effect to be continuous and captivating. This tile mode makes the pattern blend perfectly, creating a smooth animation.
Now, you can use Modifier.background(brush = ShimmerEffectBrush())
to add a shimmer effect to any Compose UI element.
Here’s an example of how to display a shimmer effect while loading an image:

You can find the complete code for this project on GitHub:
Happy coding! 👨💻