Content Placeholder Animation using Shimmer in Android - GeeksforGeeks

22 Feb, 2021
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. 
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 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’  
// depenancy 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:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    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. 
android
Picked
Technical Scripter 2020
Android
Java
Technical Scripter
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Retrofit with Kotlin Coroutine in Android
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Android Listview in Java with Example
Arrays in Java
Split() String method in Java with examples
For-each loop in Java
Reverse a string in Java
HashMap in Java with Examples