From Blank to Beautiful: Implementing Shimmer Effect in Compose

Photo by Andrew Guan on Unsplash

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 the remember function.
• Create custom ShaderBrush: create a LinearGradientShader. The movement of the brush is defined by the offset. As the offset progresses , it generates the shimmer effect. To achieve a beautiful shimmer effect, use TileMode.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:

GitHub - Pouyaa91/TheMealDB

Happy coding! 👨‍💻