Now a days in facebook you may observe a shimmer effect i.e., like before the data is been loaded onto the views, views are made a to look with a shimmering effect.

Generally we have used a progress bar which is in circular or horizontal style just to make sure user know that the data is being loaded, and when data is received we will show data onto the views stopping the current progress bar.May go through the below tutorials for more info on this topic if you are a newbie.

Tutorial on progress bar

Tutorial on custom progress bar

 

So now just as a replacement to the above style progress bar we have got a new shimmer effect from facebook which we will be learning in this tutorial.

I personally think this shimmering effect is a very good replacement for you current progress bar only when you try it on dynamically loaded listviews, textviews where the data is loaded form api, whereas the normal page loading’s and other king of stuff like validations you can continue using progress bar because they are meant for it.

Add facebook shimmer sdk to your project

build.gradle(Module:app)

 

let’s start coding

 

colors.xml

 

dimen.xml

activity_main.xml

In this view design your view according to your requirement i have just made a simple UI where i will be showing the user details and will apply shimmer effect for the view.

 

 

 

load_layout.xml

Now i will be designing a layout to make shimmer effect this is crucial step in this tutorial

in this layout we will be adding a ShimmerFrameLayout using which we will animate our views have a look a the layout first

 

 

then in the layout we need to design the views according the views you have used in activity_main.xml

 

For example see the view for name field which look’s exactly like a name field with same dimensions

 

 

designed as View with background color

 

 

full code for the views

 

 

then

 

MainActivity.java

Now initialize the ShimmerFrameLayout

 

For starting shimmering effect

 

For stopping shimmering effect

 

Here just to explain the functionality i have taken these views but i don’t suggest using this in real time app developement.

 

 

and the setting views accordingly as

 

or

 

initialize remaining views

 

 

then for loading data into views create a method and this is called on button click

 

 

full code

 

 

AndroidManifest .xml

No special permission required as we are loading data locally.

 

Output

 

Show Buttons
Hide Buttons
Read previous post:
Android Push Notification Tutorial Using Google Firebase

Close