Android Screen Page loading animation using Shimmer effect - Start with Android Studio

Android Screen Page loading animation using Shimmer effect - Start with Android Studio

The shimmer is an animation library developed by Facebook to give a nice animated effect for loading pages in Android applications.

What is Screen/Page loading in Android application?

In many applications mostly the landing screen(the very first screen of the app) is dynamic. That means it fetches data from the server and populates on it. And then the user is able to see something. Till then the user has to wait.

Why we need to show the loading animation on page load?

Well. As I said sometimes the dynamic data takes time to come from the server. It may be due to a slow network or other coding issues. But it put a huge impact on the user to wait or sometimes the user even confuses to see the blank screen for a long time. So to make it a little user-friendly we should have to do something by which the user will never feel that there is some issue or the app is boring.

What are the default screen loading animations in Android?

Android developers mostly used the circular or horizontal Progress Dialogs to make the screen busy till data populates. We will discuss these in one other session.

How to implement Shimmer effect in Android for Grid Layout?

Make sure you have the Android Studio.
Go to the app level build.gradle and add implementation 'com.facebook.shimmer:shimmer:0.3.0 inside dependencies to get the shimmer library just like below.

[code language="xml"]
dependencies {
  implementation 'com.facebook.shimmer:shimmer:0.3.0' 
}
[/code]

Let's create the custom grid layout and name it something like custom_grid.xml as paste the below code.
Now create the shadow layout which will look like the shadow of the main screen. It may the grid or list or anything. Here we are creating for the GridLayout which has images and text with three columns.
Just name the shadow layout to shimmer_grid_shadow.xml and paste the below code. We are doing it for three grid columns and trying to cover the whole page. You can change as you need.
Now we finish our layouts. It's time to add this layout inside the Facebook Shimmer Animation layout. It should inside the main_layout where we have the GridView.
Suppose the GridView is in main.xml. Then the layout should be like below.
Than add below code in the MainActivity.java . I have not written for the whole class. It's just a demo. You can start/stop the shimmer whenever you want inside the class.