Android Content Placeholder Animation using Shimmer

We normally use spinner loaders when the app wants to load the data from a network call. Instead of using the usual loaders, we can make the loading screen more interesting using Facebook’s Shimmer library. This library adds Shimmer effect on to any custom view that we define. You can notice this shimmer effect in Facebook’s mobile and desktop apps.

This tutorial explains how to use the Shimmer library in your apps with an example of loading a list data from a API call.

1. Facebook’s Shimmer Library

Shimmer is an Android library that provides an easy way to add a shimmer effect to any view in your Android app.

To get shimmer effect on any layout, you have to place your layout inside ShimmerFrameLayout. To start the animation, you have to call startShimmerAnimation() on ShimmerFrameLayout. That’s all, you can immediately notice the shimmer effect on your layout. You can find the additional documentation on the Shimmer’s page.

To get the Shimmer effect place your layout inside ShimmerFrameLayout.

To start the animation, call startShimmerAnimation() from your activity.

2. Creating New Project

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activity from templates.

2. Add Shimmer dependency to your build.gradle and rebuild the project.

3. Create a new layout xml file named recipe_placeholder_item.xml. In this file we define the placeholder layout using plain View elements. All the views will be placed similar to actual list items.

4. As the placeholder view is ready, let’s add it to our main activity layout. Open the layout file of your main activity i.e activity_main.xml and include the placeholder layout.

5. Open MainActivity.kt and start the Shimmer animation by calling startShimmerAnimation() method in onResume(). We are also pausing the animation in onPause() when the activity is paused.

Now run the app, you can see the below Shimmer animation.

3. Loading data from JSON and hiding the Shimmer

1. Create a new class named RecipeResponse.kt and define the following variables. This is a POJO class used to serialize the JSON.

2. We need another class to write the necessary adapter required for RecyclerView. Create a class named RecipeListAdapter.java and add below code.

3. Now we have everything in place. Open MainActivity.kt and use the code as shown below.

• fetchRecipes() method fetches the JSON by making Volley’s http call. The JSON is parsed using Gson serializer.
• Once the JSON is parsed and added to RecyclerView adapter, the list is rendered and ShimmerFrameLayout is hidden making the actual list visible on the screen.

VIDEO DEMO

So that’s all for this Android Content Placeholder Animation using Shimmer Tutorial. If any query/suggestion for Android Content Placeholder Animation using Shimmer Tutorial ask freely on hardikdungrani8@gmail.com

Please go through my GitHub repository.

Hardik8184/Shimmer-Layout

Thanks.

Hardik D.