About a year ago, we released Shimmer for iOS. Shimmer is an easy way to add a shimmering effect to any view in your app — it's useful as an unobtrusive loading indicator.
Today, we are releasing a similar component for Android. The component is implemented as a layout so that you can apply the effect to arbitrarily complex views. Just nest your view inside ShimmerFrameLayout and call startShimmerAnimation() – done!
As an example, you can include the following snippet in your layout XML file:
<com.facebook.shimmer.ShimmerFrameLayout
android:id=“@+id/shimmer_view_container”
android:layout_width=“wrap_content”
android:layout_height="wrap_content"
shimmer:duration="5000" // Number of milliseconds to animate one ‘sweep’
>
// your complex view here
</com.facebook.shimmer.ShimmerFrameLayout>
In your code, you can then start the animation:
ShimmerFrameLayout container =
(ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.startShimmerAnimation();
This will create a shimmering effect over any view nested inside ShimmerFrameLayout.
Shimmer is used in several Facebook applications. It was originally written for Home to show feed loading status during wallpaper settings initialization and when opening notifications.
Shimmer for Android generates an alpha mask on the fly, depending on the parameters you set either in the layout XML, or programmatically. It then renders your view twice — once with translucency and then again with the alpha mask applied with full opacity. As the alpha mask is translated across the view, you get the shimmering effect.
You can download the sample app to see the component in action, and try different configuration presets for variations of the effect.
To see Shimmer in action, check out the image below. The movement across the text is Shimmer.
