Facebook shimmer animation with demo JSON data loading.

Demo of shimmer and JSON data loading

This article covers the following points

• Shimmer Animation setup
• JSON data fetching and binding
• RecyclerView
• Volley library use
• Glide Image Loading library

Demo JSON Data

• Demo JSON data link https://api.myjson.com/bins/13be4e
• Simply click on the above link to see the demo JSON data which is hosted on http://myjson.com
• You can create a new JSON file OR take my demo JSON data from the above link modify it, host it and then take the API link from the provider.

Full project

checkout full project on GitHub…

Step by step process

Add dependencies in app level build.gradle

// Shimmer 
implementation ‘com.facebook.shimmer:shimmer:0.1.0@aar’
// RecyclerView
 implementation ‘com.android.support:recyclerview-v7:27.1.1’
// Glide image loading library 
implementation ‘com.github.bumptech.glide:glide:4.6.1’
// volley library 
implementation ‘com.android.volley:volley:1.1.0’
implementation ‘com.google.code.gson:gson:2.8.2

First We will setup the layout (XML)

Setup activity_main.xml

• Add recyclerView and shimmer placeholder layout

Create layout for adapter book_list_item.xml

• Setup the layout Item view for BookListAdapter

Create Placeholder layout file book_list_placeholder.xml to load shimmer

• This placeholder layout is for shimmer animation which acts as a data loading animation.

Now Setup Java part

To Setup getter & setter, Create BookItem.java

• BookItem.java contains the getter & setter methods along with constructor.

Now create Custom Adapter BookAdapter.java

• Adapter uses the book_item_list.xml as a layout view and bind the data with recyclerview.

Finally Setup MainActivity.java with recyclerView, arrayList ,adapter and Json data fetching

• MainActivity fetches JSON data using Volley and assign the data using getters & setters along with controls the shimmer animation view.

I hope you understand and find something useful for you.

If you like this article then please clap for me…👏👏👏