How to implement skeletons and shimmering effects on layouts and recyclerViews for Android.

W e should load much of the data from the network or external/internal storage from devices. The best case is that we do not need to wait for fetching data from the external environment. But in most cases, there is no choice. We must wait a while for loading data. While waiting it looks much better to show view skeletons to users instead of showing only a white-empty screen. Because they don’t know if it loading or stopped or whatever.

This posting is how to implement masked skeletons and shimmering effects like Facebook or LinkedIn to your layouts and recyclerView on Android using AndroidVeil library.

Let’s start!

Including in your project

Firstly you should add a dependency code to your module’s build.gradle file.

dependencies {
 implementation “com.github.skydoves:androidveil:1.0.8”
}

The version could be different from the latest release.
If you want to get the latest version, you can check it here.

How to use

Here is a basic example of implementing a shimmering effect and skeleton to your view or viewGroup in your layout using VeilLayout.

The VeilLayout can wrap any views or viewGroups and it will make skeletons based on the wrapped view hierarchy and give shimmering effects. The basic principle is the VeilLayout will traverse the wrapped view hierarchy and make masked skeleton layout based on the child view’s width/height sizes and position.

If we want to wrap a layout resource, we can implement veiled skeletons like below.

veilLayout.setLayout(R.layout.layout_item_test)

And we can change the skeleton color, shimmering color, alpha, dropOff and the radius of the view skeleton using attributes.

Veil and UnVeil

It is really easy to use. Just call veil() and unVeil() functionalities.

veilLayout.veil()
veilLayout.unVeil()

We can call the veil() method before calling the network request or something costly works. After finish something works, we should call the unVeil() method to reveal the real natural layout which we want to show.

Here is an example of using Glide and VeilLayout in the ViewHolder (RecyclerView). This case is, every ViewHolder item has an imageView that should be loaded by Glide. And we want to make a veil effect before loading the image and unveil after finish the loading.

The Glide provides a listener functionality that listens to success or failure to load an image. So we can use it with the VeilLayout. Just call veil() method initially in the onBindViewHolder method. And after we could know the status of the image is loaded (success or failure), we should call unVeil() method. You can reference some examples to use of the VeilLayout in the ViewHolder on this repository GitHubFollows.

VeilRecyclerFrameView

Here is an easier way to implement skeletons and shimmering effects to the RecyclerView using the VeilRecyclerFrameView. It is almost similar to use the VeilLayout. We should use VeilRecyclerFameView instead of the RecyclerView in our XML layout file.

And we can bind our RecyclerView.Adapter and LayoutManager to the like VeilRecyclerFameView below.

veilRecyclerView.setAdapter(adapter) // sets your own adapter
veilRecyclerView.setLayoutManager(LinearLayoutManager(this)) // sets LayoutManager

Now add as many fake views (masked skeleton views) to the VeilRecyclerFameView as we want. The below codes will add some fake masked views to your frame view.

veilRecyclerView.addVeiledItems(15) // add veiled 15 items

We can even scroll the RecyclerView with shimmering effects on every item.

Shimmer

This library using shimmer-android by Facebook. Here is the detail shimmer-instruction about shimmer or we can reference the below example.

That’s all!
If you want to get more information about the AndroidVeil library, you can check below the GitHub link :) Thank you! Have a nice day! 🤩

skydoves/AndroidVeil