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 shimmer effect to 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 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

Categories: AndroidTutorials

Related Posts

Android

Add Admob Native Ads in Android (RecyclerView)

Admob Native Ads is an ad format that gives developers the freedom to customize the look of their ad and match it with the overall design of the app. Today in this tutorial, I will show you how to add Native ads in RecyclerView. 

Android

Add Phone Number Authentication in Android (Firebase Tutorial #5)

This tutorial shows how to add Phone Number Authentication in Android app using Firebase. We have used FirebaseUI library for achieving authentication.

Android

Upload an Image to Firebase Storage (Firebase Tutorial #4)

Today, I am going to show you how to upload an image to Firebase storage and then show that uploaded image in an ImageView in Android.

Subscribe and get a free eBook on 8 Tips to level up your Android Development Skills.

(We hate spam as much as you do)

You have Successfully Subscribed!

%d bloggers like this: