From Blank to Beautiful: Implementing Shimmer Effect in Compose | by Pouya Mazloumpour | Sep, 2023
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
- Animate a Float Value: To smoothly change the offset of your
LinearGradientShaderanimate a float value.
- Allow recompositions: To allow recomposition when the
offsetchanges, use the
- Create custom ShaderBrush: create a
LinearGradientShader. The movement of the brush is defined by the
offset. As the
offsetprogresses , 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:
- Mobile App Development (439)