
Shimmer is an Android library developed by Facebook to show loading animation while we loading data from API or from LocalDatabase. With the help of this library, we can implement shimmer animation effect to any view in Android.
Implementation of Shimmer library is very easy in your new or existing Android application. Check below simple steps to implement in your project.
Implementation Shimmer Android Library
To add shimmer in your project Create a new Android project or Open existing project in Android Studio.
Create a new Android project and after that open your App build.gradle and add library
dependencies { /..../ implementation 'com.facebook.shimmer:shimmer:0.4.0' }
Once you sync you project you read to add shinner in your project
Add Shimmer in Android Activity or Fragment
Now we can call Shimmer layout in our Activity. Now first we create a layout file which we can include in Shimmer layout. My layout file name loading_view.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="15dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <View android:layout_width="54dp" android:layout_height="54dp" android:background="#BAE4E4E4" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:orientation="vertical"> <View android:layout_width="match_parent" android:layout_height="30dp" android:background="#BAE4E4E4" android:layout_marginBottom="10dp"></View> <View android:layout_width="match_parent" android:layout_height="14dp" android:background="#BAE4E4E4"></View> </LinearLayout> </LinearLayout> </LinearLayout>
Now we need to include loading_view.xml in activity_main.xml as shown below
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:background="#fff" android:orientation="vertical" tools:context=".MainActivity"> <!-- Add your Recycler view --> <com.facebook.shimmer.ShimmerFrameLayout android:id="@+id/loading_animation" android:layout_width="wrap_content" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <include layout="@layout/loading_view"></include> <include layout="@layout/loading_view"></include> <include layout="@layout/loading_view"></include> </LinearLayout> </com.facebook.shimmer.ShimmerFrameLayout> <Button android:id="@+id/start" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="gone" android:layout_gravity="center" android:text="Start Loading Animation" /> <Button android:id="@+id/stop" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Stop Loading Animation" /> </LinearLayout>
If you want to start/stop Shimmer programmatically you can do that by calling startShimmer() / stopShimmer().
public class MainActivity extends AppCompatActivity { Button stop, start; ShimmerFrameLayout animation; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); stop = (Button)findViewById(R.id.stop); start = (Button)findViewById(R.id.start); animation = (ShimmerFrameLayout)findViewById(R.id.loading_animation); start.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { animation.startShimmer(); start.setVisibility(View.GONE); stop.setVisibility(View.VISIBLE); } }); stop.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { animation.stopShimmer(); stop.setVisibility(View.GONE); start.setVisibility(View.VISIBLE); } }); } }
In the above code, I did not implement any RecyclerView or not make any call to Rest API but it was very easy to implement. Add recycler View in your Activity and keep hide once you load and set data in Recycler View then hide Shimmer Layout and Show Recycler View.