Android Tutorial on facebook shimmer effect || facebook shimmer effect

 

Facebook shimmer effect :

Now a days in facebook you may observe a shimmer effect i.e., like before the data is been loaded onto the views, views are made a to look with a shimmering effect.

Generally we have used a progress bar which is in circular or horizontal style just to make sure user know that the data is being loaded, and when data is received we will show data onto the views stopping the current progress bar.May go through the below tutorials for more info on this topic if you are a newbie.

Tutorial on progress bar

Tutorial on custom progress bar

 

So now just as a replacement to the above style progress bar we have got a new shimmer effect from facebook which we will be learning in this tutorial.

I personally think this shimmering effect is a very good replacement for you current progress bar only when you try it on dynamically loaded listviews, textviews where the data is loaded form api, whereas the normal page loading’s and other king of stuff like validations you can continue using progress bar because they are meant for it.

 

Add facebook shimmer sdk to your project

build.gradle(Module:app)

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

 

let’s start coding

 

colors.xml

Specify shimmer effect color here

<resources>
     <color name="viewColor">#c7c3c3</color>
</resources>

 

dimen.xml

Specify the shimmer effect height can differ based on view.

<resources>

    <dimen name="viewHeight">20dp</dimen>

</resources>

activity_main.xml

In this view design your view according to your requirement i have just made a simple UI where i will be showing the user details and will apply shimmer effect for the view.

 

<?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:orientation="vertical"
    tools:context="shimmer.android.com.facebookshimmer.MainActivity">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imgView"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerVertical="true"
            android:background="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/imgView"
            android:gravity="center"
            android:hint="name"
            android:textSize="22dp" />

        <TextView
            android:id="@+id/email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/name"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/imgView"
            android:gravity="center"
            android:hint="email"
            android:textSize="22dp" />

        <TextView
            android:id="@+id/designation"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/email"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/imgView"
            android:hint="designation"
            android:textSize="22dp" />

        <TextView
            android:id="@+id/id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/email"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/designation"
            android:gravity="center"
            android:hint="id"
            android:textSize="22dp" />


    </RelativeLayout>


    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="loadData"
        android:layout_marginTop="40dp"
        android:text="Load Data" />

</LinearLayout>

 

 

load_layout.xml

Now i will be designing a layout to make shimmer effect this is crucial step in this tutorial

in this layout we will be adding a ShimmerFrameLayout using which we will animate our views have a look a the layout first

 

<com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmer_view_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

</com.facebook.shimmer.ShimmerFrameLayout>

 

then in the layout we need to design the views according the views you have used in activity_main.xml

 

For example see the view for name field which look’s exactly like a name field with same dimensions

 

<TextView
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_toRightOf="@+id/imgView"
    android:gravity="center"
    android:hint="name"
    android:textSize="22dp" />

 

designed as View with background color

 

<View
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="@dimen/viewHeight"
    android:layout_marginLeft="20dp"
    android:layout_toRightOf="@+id/imgView"
    android:background="@color/viewColor"
    android:gravity="center" />

 

Shimmer effect :

Full code for the views is provided 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:orientation="vertical"
    tools:context="shimmer.android.com.facebookshimmer.MainActivity">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imgView"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerVertical="true"
            android:background="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/imgView"
            android:gravity="center"
            android:hint="name"
            android:textSize="22dp" />

        <TextView
            android:id="@+id/email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/name"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/imgView"
            android:gravity="center"
            android:hint="email"
            android:textSize="22dp" />

        <TextView
            android:id="@+id/designation"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/email"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/imgView"
            android:hint="designation"
            android:textSize="22dp" />

        <TextView
            android:id="@+id/id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/email"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/designation"
            android:gravity="center"
            android:hint="id"
            android:textSize="22dp" />


    </RelativeLayout>


    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="loadData"
        android:layout_marginTop="40dp"
        android:text="Load Data" />

</LinearLayout>

 

then

 

MainActivity.java

Now initialize the shimmer effect with  ShimmerFrameLayout

ShimmerFrameLayout container;

container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);

 

For starting shimmering effect

container.startShimmerAnimation();

 

For stopping shimmering effect

container.stopShimmerAnimation();

 

Here just to explain the functionality i have taken these views but i don’t suggest using this in real time app developement.

 

View view1, view2;

view1 = getLayoutInflater().inflate(R.layout.load_layout, null); // for load_layout
view2 = getLayoutInflater().inflate(R.layout.activity_main, null); // for activity_main

 

and the setting views accordingly as

 

setContentView(view1);

or

setContentView(view2);

 

initialize remaining views

 

public void init(){
    imgView = (ImageView) findViewById(R.id.imgView);
    name = (TextView) findViewById(R.id.name);
    email = (TextView) findViewById(R.id.email);
    desigation = (TextView) findViewById(R.id.designation);
    id = (TextView) findViewById(R.id.id);
};

 

then for loading data into views create a method and this is called on button click

 

public void loadData(View view) {

    setContentView(view2); // setting second view
   
    name.setText("Abhishek");
    email.setText("admin@androidcoding.in");
    desigation.setText("Developer");
    id.setText("1");


}

 

Full code :

 

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.facebook.shimmer.ShimmerFrameLayout;

public class MainActivity extends AppCompatActivity {

    ShimmerFrameLayout container;
    ImageView imgView;
    TextView name;
    TextView email;
    TextView desigation;
    TextView id;

    View view1, view2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        view1 = getLayoutInflater().inflate(R.layout.load_layout, null);
        view2 = getLayoutInflater().inflate(R.layout.activity_main, null);
        setContentView(view1);

        container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);

        //Starting Shimmer Effect
        container.startShimmerAnimation();
    }

    public void init(){
        imgView = (ImageView) findViewById(R.id.imgView);
        name = (TextView) findViewById(R.id.name);
        email = (TextView) findViewById(R.id.email);
        desigation = (TextView) findViewById(R.id.designation);
        id = (TextView) findViewById(R.id.id);
    };

    public void loadData(View view) {

        // Stopping the Shimmer Effect
        container.stopShimmerAnimation();

        setContentView(view2);
        init();
        name.setText("Abhishek");
        email.setText("admin@androidcoding.in");
        desigation.setText("Developer");
        id.setText("1");


    }
}

 

AndroidManifest .xml

No special permission required as we are loading data locally.

 

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="shimmer.android.com.facebookshimmer">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

Output :

The screen below depicts facebook shimmer effect

 

If you have any query’s in this tutorial on facebook shimmer effect do let us know in the comment section below.If you like this tutorials do like and share us for more interesting updates.