Open In App

Content Placeholder Animation using Shimmer in Android

Improve
Improve
Like Article
Like
Save
Share
Report

We have seen a unique design for loading screen which is seen in Facebook for loading purpose and it is also used to display the content placeholder for the purpose of loading. GitHub provides this type of loading placeholder, and it looks beautiful than the normal progress bar. In this article, we will take a look at the implementation of Content Placeholder using Shimmer animation in Android. 

What we are going to build in this article? 

We will be building a simple application in which we will be loading data from a URL in JSON format and during the process of loading, we will be displaying a shimmer layout for loading. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Adding dependency for using Facebook Shimmer layout 

Navigate to the app > Gradle Scripts > build.gradle file and add the below dependency to it. 

// below line is used for volley library

implementation ‘com.android.volley:volley:1.1.1’

// below line is used for image loading library

implementation ‘com.squareup.picasso:picasso:2.71828’  

// dependency for using facebook shimmer layout.

implementation ‘com.facebook.shimmer:shimmer:0.5.0’

Now sync your project and move towards your XML file. 

Step 3: Adding permissions for the internet in Android

Navigate to the app > AndroidManifest.xml and add permissions to it for the internet as we are loading data from the internet. 

XML




<uses-permission android:name="android.permission.INTERNET"/>


Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <!-- Card view for displaying our card-->
    <androidx.cardview.widget.CardView
        android:id="@+id/idCVCourse"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="10dp"
        android:visibility="gone"
        app:cardCornerRadius="8dp">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
 
            <!--Image view for displaying our image-->
            <ImageView
                android:id="@+id/idIVCourse"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:layout_margin="5dp" />
 
            <!--Text view for displaying our course name-->
            <TextView
                android:id="@+id/idTVCourseName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:padding="5dp"
                android:text="Course Name "
                android:textColor="@color/black"
                android:textSize="18sp"
                android:textStyle="bold" />
 
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="horizontal"
                android:weightSum="2">
 
                <!--Text view for displaying our batch-->
                <TextView
                    android:id="@+id/idTVBatch"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="5dp"
                    android:text="Batch"
                    android:textColor="@color/black" />
 
                <!--Text view for displaying our tracks.-->
                <TextView
                    android:id="@+id/idTVTracks"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="5dp"
                    android:text="Tracks"
                    android:textColor="@color/black" />
 
            </LinearLayout>
 
        </LinearLayout>
 
    </androidx.cardview.widget.CardView>
     
    <!--below is the view for our shimmer-->
    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmerLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:animationCache="true"
        app:shimmer_repeat_mode="restart"
        app:shimmer_shape="radial">
 
        <!--For shimmer we are creating a same layout
            but setting its background as a gray colour and
            not providing any view inside it-->
        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:elevation="10dp"
            android:visibility="visible"
            app:cardCornerRadius="8dp">
 
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
 
                <!--Image view for displaying our image-->
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:layout_margin="5dp"
                    android:background="#B3B3B3" />
 
                <!--Text view for displaying our course name-->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:background="#B3B3B3"
                    android:padding="5dp"
                    android:textColor="@color/black"
                    android:textSize="18sp"
                    android:textStyle="bold" />
 
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:orientation="horizontal"
                    android:weightSum="2">
 
                    <!--Text view for displaying our batch-->
                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="#B3B3B3"
                        android:padding="5dp"
                        android:textColor="@color/black" />
 
                    <!--Text view for displaying our tracks.-->
                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="#B3B3B3"
                        android:padding="5dp"
                        android:textColor="@color/black" />
 
                </LinearLayout>
 
            </LinearLayout>
 
        </androidx.cardview.widget.CardView>
         
    </com.facebook.shimmer.ShimmerFrameLayout>
 
</RelativeLayout>


Step 5: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java




import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
 
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
 
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;
import com.facebook.shimmer.ShimmerFrameLayout;
import com.squareup.picasso.Picasso;
 
import org.json.JSONException;
import org.json.JSONObject;
 
public class MainActivity extends AppCompatActivity {
 
    // creating variables for our textview,
    // imageview, cardview and progressbar.
    private TextView courseNameTV, courseTracksTV, courseBatchTV;
    private ImageView courseIV;
    private CardView courseCV;
     
    // variable for our shimmer frame layout
    private ShimmerFrameLayout shimmerFrameLayout;
     
    // below line is the variable for url from
    // where we will be querying our data.
    String url = "https://jsonkeeper.com/b/63OH";
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // initializing our shimmer layout.
        shimmerFrameLayout = findViewById(R.id.shimmerLayout);
         
        // on below line we are
        // starting our shimmer layout.
        shimmerFrameLayout.startShimmer();
         
        // in below line we are
        // initializing our all views.
        courseCV = findViewById(R.id.idCVCourse);
        courseNameTV = findViewById(R.id.idTVCourseName);
        courseTracksTV = findViewById(R.id.idTVTracks);
        courseBatchTV = findViewById(R.id.idTVBatch);
        courseIV = findViewById(R.id.idIVCourse);
        
        // creating a new variable for our request queue
        RequestQueue queue = Volley.newRequestQueue(MainActivity.this);
        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                // inside the on response method.
                // in below line we are making our card
                // view visible after we get all the data.
                // on below line we are making our shimmer
                // layout visibility to gone.
                // on below line we are stopping our shimmer.
                shimmerFrameLayout.stopShimmer();
                courseCV.setVisibility(View.VISIBLE);
                try {
                    // now we get our response from API in json object format.
                    // in below line we are extracting a string with its key
                    // value from our json object.
                    // similarly we are extracting all the strings from our json object.
                    String courseName = response.getString("courseName");
                    String courseTracks = response.getString("courseTracks");
                    String courseMode = response.getString("courseMode");
                    String courseImageURL = response.getString("courseimg");
 
                    // after extracting all the data we are
                    // setting that data to all our views.
                    courseNameTV.setText(courseName);
                    courseTracksTV.setText(courseTracks);
                    courseBatchTV.setText(courseMode);
 
                    // we are using picasso to load the image from url.
                    Picasso.get().load(courseImageURL).into(courseIV);
                } catch (JSONException e) {
                    // if we do not extract data from json object properly.
                    // below line of code is use to handle json exception
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            // this is the error listener method which
            // we will call if we get any error from API.
            @Override
            public void onErrorResponse(VolleyError error) {
                // below line is use to display a toast message along with our error.
                Toast.makeText(MainActivity.this, "Fail to get data..", Toast.LENGTH_SHORT).show();
            }
        });
        // at last we are adding our json
        // object request to our request
        // queue to fetch all the json data.
        queue.add(jsonObjectRequest);
    }
}


Now run your app and see the output of the app. 

Output:



Last Updated : 17 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads