Add Shimmer Effect to Android app

Ever wondered how you can get the cool shimmer effect that Facebook and LinkedIn and other such big players use in their apps? Rather than the same old circular loader, you can add a shimmer effect to the Android app when it is loading, thereby preventing your users from leaving your app and hence increasing engagements. 

Today in this tutorial, I am going to show you how to add a Shimmer effect to your Android app. We will be using the Shimmer Android library developed by Facebook to achieve this effect.

Adding dependencies

Copy the below dependency to your build.gradle file.

compile 'com.facebook.shimmer:shimmer:0.1.0@aar'

XML data

Now, open the activity_main.xml file or the activity in which you want to show the shimmer effect when it is loading. And copy the below code.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <com.facebook.shimmer.ShimmerFrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/shimmer_view_container1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >

        <ImageView
            android:layout_width="192dp"
            android:layout_height="192dp"
            android:src="@drawable/tec_logo"
            />

    </com.facebook.shimmer.ShimmerFrameLayout>

</RelativeLayout>

Java code

Now open your MainActivity.java and copy the below code.

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.facebook.shimmer.ShimmerFrameLayout;

public class MainActivity extends AppCompatActivity {

    ShimmerFrameLayout container;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container1);
        container.startShimmerAnimation();
    }
}

Now run the app and you can see the Shimmer effect in action. 

Since this is a demo app, I am not fetching anything from the Internet. But in your app, once the content is fetched you should stop the animation using the below code.

container.stopShimmerAnimation();

Other attributes

You can tweak the animation using the following attributes. These attributes work both in Java and XML. Some of the useful tweaks are listed below.

• Autostart: Whether to automatically start the animation when the view is shown, or not.
• Base Alpha: Alpha used to render the base view i.e. the unhighlighted view over which the highlight is drawn.
• Duration: Time it takes for the highlight to move from one end of the layout to the other.
• Repeat Count: Number of times, the current animation will repeat.
• Repeat Delay: Delay after which the current animation will repeat.
• Repeat Mode: What the animation should do after reaching the end, either restart from the beginning or reverse back towards it.
• Angle: Angle at which the highlight mask is animated, from left-to-right, top-to-bottom, etc.
• Dropoff: Controls the size of the fading edge of the highlight.
• Intensity: Controls the brightness of the highlight at the center.
• Tilt: Angle at which the highlight is tilted, measured in degrees.

You don’t need to create a different view for showing this animation. In fact, you should just wrap the content you want to animate with this layout. For example, you can wrap the layout representing the row of a RecyclerView and when you run the app you could see the Shimmer effect in all the rows. Don’t forget to add the background color to the views so that you can see the animation. Personally, I recommended the gray color and you can see the same on Linkedin, Facebook, and Twitter.

View Project on Github