12/08/2018, 17:10

Facebook''s Shimmer Library

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. You can easily implement Facebook Shimmer to let the users know your app is performing ...

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. You can easily implement Facebook Shimmer to let the users know your app is performing some tasks, could be loading data or any other actions that might take a while to complet so there the view should be interactive.

Implementation

You can easily add the shimmer jar file to your app (Java) from this link or in this case for Android you can add the dependency:

// Gradle dependency on Shimmer for Android

dependencies {
  compile 'com.facebook.shimmer:shimmer:0.1.0@aar'
}

After the library has been imported you can go ahead and add the custom layout to your views. By wrapping the view with ShimmerFrameLayout, its as easy as that to make any view be accessible by Shimmer. Example below..

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

         <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view_data"
        android:layout_awidth="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"/>

</com.facebook.shimmer.ShimmerFrameLayout>

Here we wrap our RecyclerView in the ShimmerFrameLayout tag and that is all. We can then go ahead and set the shimmer loader proerties by enabling and dissabling it after our data is fetched and views populated.

Fetching data................>>>>

In your code, you can then start the animation:

ShimmerFrameLayout container = 
  (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.startShimmerAnimation();

Data Fetched.......>

container.stopShimmerAnimation();

While the loader is active the view looks like the example image below:

http://facebook.github.io/shimmer-android/images/shimmer-small.gif

Other Attributes

You can control the look and pace of the effect using a number of custom attributes on the ShimmerFrameLayout tag. Alternatively, you can set these values on the layout object itself. For a comprehensive list, check out the API reference

Auto Start Whether to automatically start the animation when the view is shown, or not. Base Alpha Alpha used to render the base view i.e. the unhighlighted view over which the highlight is drawn. 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. Mask Shape Shape of the highlight mask, either with a linear or a circular gradient. Angle Angle at which the highlight mask is animated, from left-to-right, top-to-bottom etc. Dropoff Controls the size of the fading edge of the highlight. Intensity Controls the brightness of the highlight at the center 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 Relative Width, Height Size of the highlight mask, relative to the layout it is applied to.

For exmple project using Shimmer please refere here There are times when loading dialog isnt just right design wise and on this occurence shimmer might be perfect for your app design. Just like every other loader you can implement it when you are fetching apps from the Api and populating your views while lookign good at the same time. More infos can be find here

0