Introduction

The shimmer is a library that provides the shimmer effect with the help of the ShimmerLayout class. It is developed by Facebook. The shimmer effect can be added to a single view or an entire layout.
Nowadays, progress bars in Android are not so attractive and do not make the app's layout great. Well, Shimmer solves this problem by providing a great animation of the shimmer effect. Modern applications mostly use the shimmer effect to show their lists.
In this article, we will develop an application that shows the loading of a list with the shimmer effect, not with a progress bar.
Step 1
Add Shimmer Gradle to your build.gradle.
  1. apply plugin: 'com.android.application'
  3. android {
  4. compileSdkVersion 28
  5. defaultConfig {
  6. applicationId "yourdomain.shimmereffectsample"
  7. minSdkVersion 21
  8. targetSdkVersion 28
  9. versionCode 1
  10. versionName "1.0"
  11. testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
  12. }
  13. buildTypes {
  14. release {
  15. minifyEnabled false
  16. proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  17. }
  18. }
  19. }
  21. dependencies {
  22. implementation fileTree(dir: 'libs', include: ['*.jar'])
  23. implementation 'com.android.support:appcompat-v7:28.0.0'
  24. implementation 'com.android.support.constraint:constraint-layout:1.1.3'
  25. testImplementation 'junit:junit:4.12'
  26. androidTestImplementation 'com.android.support.test:runner:1.0.2'
  27. androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
  29. implementation 'com.facebook.shimmer:shimmer:0.4.0'
  31. implementation 'com.android.support:recyclerview-v7:28.0.0'
  32. }
After adding shimmer and recyclerview to the build.gradle, now add recyclerview to activity_main.xml.
Step 2
Adding recyclerview and ShimmerLayout to activity_main.xml -
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. >
  7. <com.facebook.shimmer.ShimmerFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  8. android:id="@+id/shimmer_view_container"
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:layout_gravity="center"
  12. android:orientation="vertical"
  13. android:background="#ffffff">
  15. <LinearLayout
  16. android:layout_width="match_parent"
  17. android:layout_height="wrap_content"
  18. android:orientation="vertical">
  19. <include layout="@layout/list_shimmer_layout" />
  20. <include layout="@layout/list_shimmer_layout" />
  21. <include layout="@layout/list_shimmer_layout" />
  22. <include layout="@layout/list_shimmer_layout" />
  23. <include layout="@layout/list_shimmer_layout" />
  24. <include layout="@layout/list_shimmer_layout" />
  25. </LinearLayout>
  26. </com.facebook.shimmer.ShimmerFrameLayout>
  27. <android.support.v7.widget.RecyclerView
  28. android:id="@+id/recycler_view"
  29. android:layout_width="match_parent"
  30. android:layout_height="match_parent" />
  33. </RelativeLayout>
Now, we can see that inside the ShimmerFrameLayout tag, a layout named list_shimmer_layout is added. So, it's time to code this layout.
Step 3
Add Views to list_shimmer_layout.xml .
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:id="@+id/main_view"
  3. android:layout_width="match_parent"
  4. android:layout_height="80dp"
  5. android:paddingLeft="10dp"
  6. android:paddingRight="10dp">
  8. <ImageView
  9. android:id="@+id/user_image_View"
  10. android:layout_width="45dp"
  11. android:layout_height="45dp"
  12. android:layout_centerVertical="true"
  13. android:background="#dddddd"
  14. android:scaleType="center" />
  17. <RelativeLayout
  18. android:layout_width="match_parent"
  19. android:layout_height="wrap_content"
  20. android:layout_centerVertical="true"
  21. android:layout_toEndOf="@id/user_image_View"
  22. android:padding="10dp">
  24. <TextView
  25. android:id="@+id/discount_text_view"
  26. android:layout_width="match_parent"
  27. android:layout_height="18dp"
  28. android:background="#dddddd" />
  30. <TextView
  32. android:id="@+id/categories_heading_text_view"
  33. android:layout_width="150dp"
  34. android:layout_height="16dp"
  35. android:layout_below="@id/discount_text_view"
  36. android:layout_marginTop="4dp"
  37. android:background="#dddddd"
  38. android:paddingRight="10dp" />
  40. <TextView
  41. android:id="@+id/categories_details_text_view"
  42. android:layout_width="200dp"
  43. android:layout_height="16dp"
  44. android:layout_below="@id/categories_heading_text_view"
  45. android:layout_marginTop="5dp"
  46. android:background="#dddddd"
  47. android:ellipsize="end"
  48. android:maxLines="2"
  50. />
  51. </RelativeLayout>
  54. </RelativeLayout>
Step 4
Since we are showing the data and Shimmer effect on a list, let's create a list item layout.
Add Views to list_items.xml.
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@+id/main_view"
  4. android:layout_width="match_parent"
  5. android:layout_height="80dp"
  6. android:paddingLeft="10dp"
  7. android:paddingRight="10dp">
  9. <ImageView
  10. android:id="@+id/user_image_View"
  11. android:layout_width="45dp"
  12. android:layout_height="45dp"
  13. android:layout_centerVertical="true"
  14. android:src="@drawable/ic_user" />
  17. <RelativeLayout
  18. android:layout_width="match_parent"
  19. android:layout_height="wrap_content"
  20. android:layout_centerVertical="true"
  21. android:layout_toEndOf="@id/user_image_View"
  22. android:padding="10dp">
  24. <TextView
  25. android:id="@+id/user_name_textview"
  26. android:layout_width="match_parent"
  27. android:layout_height="wrap_content"
  28. tools:text="Gaurav Kumar"
  29. android:textSize="15sp"/>
  31. <TextView
  33. android:id="@+id/user_profession"
  34. android:layout_width="match_parent"
  35. android:layout_height="wrap_content"
  36. android:layout_below="@id/user_name_textview"
  37. android:layout_marginTop="2dp"
  38. tools:text="Software Engineer"
  39. android:textSize="13sp"/>
  41. <TextView
  42. android:id="@+id/user_address"
  43. android:layout_width="match_parent"
  44. android:layout_height="wrap_content"
  45. android:layout_below="@id/user_profession"
  46. android:layout_marginTop="2dp"
  47. android:textSize="13sp"
  48. tools:text="Noida"
  50. />
  51. </RelativeLayout>
  54. </RelativeLayout>
Step 4
Here, we need a pojo class named UserDataModel.java.
  1. public class UserDataModel {
  3. String name;
  4. String profession;
  5. String city;
  7. public String getName() {
  8. return name;
  9. }
  11. public void setName(String name) {
  12. this.name = name;
  13. }
  15. public String getProfession() {
  16. return profession;
  17. }
  19. public void setProfession(String profession) {
  20. this.profession = profession;
  21. }
  23. public String getCity() {
  24. return city;
  25. }
  27. public void setCity(String city) {
  28. this.city = city;
  29. }
  32. }
Step 4
We need an adapter to show the data in the list. Let's see the adapter's code mentioned below. We have named it UserAdapter.java.
  1. import android.support.annotation.NonNull;
  2. import android.support.v7.widget.RecyclerView;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. import android.widget.TextView;
  8. import java.util.ArrayList;
  10. public class UserAdapter extends RecyclerView.Adapter<UserAdapter.ViewHolder> {
  12. private ArrayList<UserDataModel> mlist;
  14. public UserAdapter(ArrayList<UserDataModel> list) {
  16. mlist = list;
  18. }
  20. @NonNull
  21. @Override
  22. public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int i) {
  23. View itemView = LayoutInflater.from(parent.getContext())
  24. .inflate(R.layout.list_items, parent, false);
  26. return new ViewHolder(itemView);
  27. }
  29. @Override
  30. public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
  32. viewHolder.nameTextView.setText(mlist.get(i).getName());
  33. viewHolder.professionTextView.setText(mlist.get(i).getProfession());
  34. viewHolder.cityTextView.setText(mlist.get(i).getCity());
  36. }
  38. @Override
  39. public int getItemCount() {
  40. return mlist.size();
  41. }
  43. public class ViewHolder extends RecyclerView.ViewHolder {
  45. TextView nameTextView;
  46. TextView professionTextView;
  47. TextView cityTextView;
  49. public ViewHolder(View itemView) {
  50. super(itemView);
  52. nameTextView = itemView.findViewById(R.id.user_name_textview);
  53. professionTextView = itemView.findViewById(R.id.user_profession);
  54. cityTextView = itemView.findViewById(R.id.user_address);
  56. }
  59. }
  61. }
Step 5
Now, bind all the Views in MainActivity.java and initialize these Views. Here comes the java activity.
  1. import android.os.Bundle;
  2. import android.os.Handler;
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.support.v7.widget.DefaultItemAnimator;
  5. import android.support.v7.widget.LinearLayoutManager;
  6. import android.support.v7.widget.RecyclerView;
  7. import android.view.View;
  9. import com.facebook.shimmer.ShimmerFrameLayout;
  11. import java.util.ArrayList;
  13. public class MainActivity extends AppCompatActivity {
  16. ShimmerFrameLayout shimmerLayout;
  17. RecyclerView mRecyclerView;
  18. ArrayList<UserDataModel> mUserArrayList;
  19. UserAdapter mAdapter;
  22. @Override
  23. protected void onCreate(Bundle savedInstanceState) {
  24. super.onCreate(savedInstanceState);
  25. setContentView(R.layout.activity_main);
  27. shimmerLayout = findViewById(R.id.shimmer_view_container);
  28. mRecyclerView = findViewById(R.id.recycler_view);
  30. mUserArrayList = new ArrayList<>();
  32. showShimmer();
  34. final Handler handler = new Handler();
  35. handler.postDelayed(new Runnable() {
  36. @Override
  37. public void run() {
  38. populateList();
  39. mAdapter = new UserAdapter(mUserArrayList);
  40. RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
  41. mRecyclerView.setLayoutManager(mLayoutManager);
  42. mRecyclerView.setItemAnimator(new DefaultItemAnimator());
  43. mRecyclerView.setAdapter(mAdapter);
  44. hideShimmer();
  45. }
  46. }, 3000);
  49. // we are delaying so that shimmer effect can be seen because here we are not making any API call.
  50. }
  52. private void populateList() {
  54. UserDataModel dataModel = new UserDataModel();
  55. dataModel.setName("Gaurav Kumar");
  56. dataModel.setProfession("Android Developer");
  57. dataModel.setCity("Noida");
  58. mUserArrayList.add(dataModel);
  60. UserDataModel dataModel1 = new UserDataModel();
  61. dataModel1.setName("Ashish Tiwari");
  62. dataModel1.setProfession("Unity Game Developer");
  63. dataModel1.setCity("Delhi");
  64. mUserArrayList.add(dataModel1);
  66. UserDataModel dataModel2 = new UserDataModel();
  67. dataModel2.setName("Pravesh Dubey");
  68. dataModel2.setProfession("Ios Developer");
  69. dataModel2.setCity("Pune");
  70. mUserArrayList.add(dataModel2);
  72. UserDataModel dataModel3 = new UserDataModel();
  73. dataModel3.setName("Praveen Singh togadia");
  74. dataModel3.setProfession("Web Developer");
  75. dataModel3.setCity("Gurgaon");
  76. mUserArrayList.add(dataModel3);
  78. UserDataModel dataModel4 = new UserDataModel();
  79. dataModel4.setName("Narendra singh");
  80. dataModel4.setProfession("Sql Developer");
  81. dataModel4.setCity("Banglore");
  82. mUserArrayList.add(dataModel4);
  85. }
  87. private void hideShimmer() {
  88. shimmerLayout.stopShimmer();
  89. shimmerLayout.setVisibility(View.GONE);
  90. }
  92. private void showShimmer() {
  93. shimmerLayout.startShimmer();
  94. shimmerLayout.setVisibility(View.VISIBLE);
  95. }
  96. }
See, this is so simple to implement. Here, we are delaying the setting of the adapter because we are not making any API call. So, the effect can't be seen without delaying the output. Let's look at the two methods - showShimmer() and hideShimmer(). These two methods are responsible for showing and hiding the shimmer effect respectively.
Output
There are several images to show the effect, so please see carefully the stages and the difference in images.
This is the initial stage of the shimmer. Now, let us see other images to mark a difference.
See the right side is darker and the left side of Views is lighter in color. This indicates that shimmer effect travels left to right. See another image for a clear explanation.
Now, after that effect, the data will load as below.

Conclusion

In this article, we learned about the shimmer effect with the help of various images. We saw the stages of shimmer layout with an animated wave traveling from left to right. Finally, our data loaded and the shimmer effect got hidden and stopped. I hope this article was helpful to you.