Facebook Shimmer ( Facebook Loading Effect)

Published by Kapil Mohan on January 11, 2019January 11, 2019

Shimmer is an Android library that provides an easy way to add a shimmer effect to any view in your Android app.

It is useful as an unobtrusive loading indicator, and was originally developed for Facebook Home.

Link:- facebook.github.io/shimmer-android

Preview
Gradle
XML
Java
Options
Example

Example of facebook app using shimmer effect.

dependencies {
  implementation 'com.facebook.shimmer:shimmer:0.4.0'
}

Placing any content on shimmer layout gives it a shimmer effect.

<com.facebook.shimmer.ShimmerFrameLayout
     android:id="@+id/shimmer_view_container"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content">

     ...(your complex view here)...
</com.facebook.shimmer.ShimmerFrameLayout>

Needs to use javacode for manually starting shimmer animation. If autostart property is set to true, then it will start automatically.

ShimmerFrameLayout container =
  (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.startShimmer(); // If auto-start is set to false

Auto Start – Whether to automatically start the animation when the view is shown, or not.
Clip to Children – Whether to clip the shimmering effect to the children, or to opaquely draw the shimmer on top of the children. Use this if your overall layout contains transparency.
Colored – Whether you want the shimmer to affect just the alpha or draw colors on-top of the children
Base Color – If colored is specified, the base color of the content.
Highlight Color – If colored is specified, the shimmer’s highlight color.
Base Alpha – If colored is not specified, the alpha used to render the base view i.e. the unhighlighted view over which the highlight is drawn.
Highlight Alpha – If colored is not specified, the alpha of the shimmer highlight.
Duration – Time it takes for the highlight to move from one end of the layout to the other.
Repeat Count – Number of times of the current animation will repeat.
Repeat Delay – Delay after which the current animation will repeat.
Repeat Mode – What the animation should do after reaching the end, either restart from the beginning or reverse back towards it.
Direction – The travel direction of the shimmer highlight: left to right, top to bottom, right to left or bottom to top.
Dropoff – Controls the size of the fading edge of the highlight.
Intensity – Controls the brightness of the highlight at the center
Shape – Shape of the highlight mask, either with a linear or a circular gradient.
Tilt – Angle at which the highlight is tilted, measured in degrees
Fixed Width, Height – Fixed sized highlight mask, if set, overrides the relative size value
Width, Height ratio – Size of the highlight mask, relative to the layout it is applied to.