Redeem Now
Read More
Read now

Facebook shimmer animation

Shimmer Animation for Android developers

You might have noticed the shimmer effect on Facebook’s mobile app while the data is loading from the network. Shimmer library was created by Facebook to display an animation when data is loading to make the UI more interesting and beautiful,

instead of using the traditional ProgressBar. Facebook, later on, released an open-source library called Shimmer which we can use it to implement the Shimmer Effect Placeholder.

Shimmer for Android is implemented as a layout, which means that you can simply nest any view inside a ShimmerFrameLayout.

The following is an example of Shimmer effect in an Android application:

 

 

In this blog, we will demonstrate how to use Shimmer in your Android application. We will build the shimmer layout design and start and stop the animation when data being load and loaded.

 

Knowledge required to use this animation 

Add dependencies

Add the following dependencies in your app level build.gradle and sync.

 

Now, Add item_layout.xml in the layout folder and add the following code:

 

Now, Add shimmer_placeholder_layout.xml in the layout folder and add the following code:

Above in the XML,

Note– an important thing to note is that the background color should be grey or any non-white color since the shimmering effect won’t be visible if the background is white.

 

Do not forget to add the color in the colors.xml like below:

 

Now, Open the activity_main.xml file and add the below code:

Understanding the above code:

We have setup shimmer layout animation in design, Now its time to start and stop animation from Java class.

 

Get a ShimmerFrameLayout instance like below from id write down in MainActivity.java

When you want to start the Animation –

When you want to stop shimmer animation and show recycler view data.

 

Start the animation when you request the data from the server or local database and stop when you get the data from the source. Your result will look like

Reference – Facebook shimmer

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close