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 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. @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.
