Skip to main content

Skeleton content loading animation in android | Facebook Shimmer

What is Facebook Shimmer

Skeleton content loading animation in android
Today we are going to see what is Facebook shimmer and how to use it?
See below example to understand Facebook shimmer.

content loading animation

The Facebook shimmer is used to show or indicate the user that the content is loading from somewhere which takes sometimes so that users need to wait. While content is loading, it is necessary to show the user an indication that content is loading and it is bad practice to leave screen blank which confuses user what is happening in the app or maybe the user thinks the app is hanging.

How to use Facebook Shimmer

So enough talking, let do some code on how to make content loading animation using facebook shimmer library. See below facebook shimmer android example

To use facebook shimmer first we need to add the dependency to your project. See below to add facebook shimmer dependency.

After adding dependency, let's create our layout. For demo purposes, we are creating our layout some like below.
cardview layout

To make the above layout we are using this code.
You can make your own layout according to your need.
Note: we use cardview for making this layout you can read here about how to use cardview in android.
After the layout, we need to add code for facebook shimmer effect.
First, we need to add ShimmerFrameLayout as parent container of the shimmer effect we can simply copy our main layout and with minor changes, we have done with our shimmer layout part. See below code and remember to set the visibility of main layout to gone.
Notice the ids we have assigned to the ShimmerFrameLayout (facebookShimmerLayout).
Now, this all for layout part now its time to come to java part.
See the below code.
First, we are getting our main container which is cardview and then ShimmerFrameLayout.
To start the shimmer animation we need to call the startShimmer method of ShimmerFrameLayout
if you run your app at this point, your shimmer effect will show but it will not end as we never stopping it.
To stop the shimmer we need to call stopShimmer methods of ShimmerFrameLayout.
For showing some delay and faking data loading we are using handler then we stop the shimmer and change its visibility and also change the visibility of the main container to visible.

You can use this effect with recyclerview and change its visibility.

Thank you for reading this article on the skeleton shimmer effect in android. If you learn something new then share this article with your batchmates and friends

Share this Article 👇

Subscribe to our Newsletter

By subscribing to our newsletter you're agreeing with our T&C.

Popular Posts

Customize rating bar in android

Working with Bottom Navigation bar in Android [Full Guide]

Custom Switch in Android | | Android Tutorial