ProAndroidDev

The latest posts from Android Professionals and Google Developer Experts.

Follow publication

From Blank to Beautiful: Implementing Shimmer Effect in Compose

Pouya Mazloumpour
ProAndroidDev
Published in
2 min readSep 27, 2023

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:

Happy coding! 👨‍💻

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in ProAndroidDev

The latest posts from Android Professionals and Google Developer Experts.

No responses yet

Write a response