Shimmer Effect Android – A Facebook Github – Display loading indicator

Hi Guys, Welcome to Proto Coders Point, In this Android Github library tutorial we will discuss and implement Facebook Shimmer Effect library which is easy to implement, and a flexible way to add a shimmering effect to any view in an Android app.

What is Shimmer Effect?

A Shimmer Effect is just an shine effect on any of the View like text, images or any widget.

Shimmer is one of the Android github library that is one of the easiest way to add an shimmer effect to a views in android xml layout.

Now a day it is mostly used as loading indicator.

Facebook shimmer android effect is been implemented in the layout file, That means we can simple nest any number of android views inside a ShimmerFrameLayout tag. and just you need to initialize and call the start or stop shimmer method to begin animation effect.

Ok let’s begin adding the Library in our android project

Final Result of the Below Complete Code

youtube video Tutorial on Facebook Shimmer android example

Implementation of Facebook shimmer effect library

1. Adding dependencies in your project

To include Shimmer in your project, add the following dependency:

Project > App > Gradle Script > Open build.gradle(module.app)

// Gradle dependency on Shimmer for Android
dependencies {
  implementation 'com.facebook.shimmer:shimmer:0.5.0'
}

then after adding library just click on sync now  and now all set shimmer library is added in project successfully.

2. Xml Usage

Snippet code of ShimmerFrameLayout

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


     ...(your view here)...
</com.facebook.shimmer.ShimmerFrameLayout>

The above snippet code will show how you can use the Library view.

you can also initialize to auto_start to start the shimmer animation

there are many other attributes of this library

Attributes

You can control the look and pace of the effect using a number of custom attributes on the ShimmerFrameLayout tag.

Clip to Children

Whether to clip the shimmering effect to the children, or to opaquely draw the shimmer on top of the children. Use this if your overall layout contains transparency.

Colored

Whether you want the shimmer to affect just the alpha or draw colors on-top of the children.

Base Color

If colored is specified, the base color of the content.

Highlight Color

If colored is specified, the shimmer’s highlight color.

Base Alpha

If colored is not specified, the alpha used to render the base view i.e. the unhighlighted view over which the highlight is drawn.

Highlight Alpha

If colored is not specified, the alpha of the shimmer highlight.

Auto Start

Whether to automatically start the animation when the view is shown, or not.

Duration

Time it takes for the highlight to move from one end of the layout to the other.

Repeat Count

Number of times of 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.

Direction

The travel direction of the shimmer highlight: left to right, top to bottom, right to left or bottom to top.

Dropoff

Controls the size of the fading edge of the highlight.

Intensity

Controls the brightness of the highlight at the center

Shape

Shape of the highlight mask, either with a linear or a circular gradient.

Tilt

Angle at which the highlight is tilted, measured in degrees

Fixed Width, Height

Fixed sized highlight mask, if set, overrides the relative size value

Width, Height ratio

Size of the highlight mask, relative to the layout it is applied to.

For example

app:shimmer_auto_start="true"

3.  Programmatically start and stop of shimmer effect

create the object of Shimmer Frame Layout , i have create it as shimmer1, because i have 2 shimmer

ShimmerFrameLayout shimmer1;

point out to the reference view using shimmerFrameLayout id

shimmer1= (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container1);

then, all you need to do is just call the startShimmer() method to start the animation effect.

shimmer1.startShimmer();

You can even stop the Shimmer effect using stop method

shimmer1.stopShimmer();

Complete Code of Facebook Shimmer Effect for android Application to show loading indication

activity_main.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="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="#D6D6D6">
    <TextView
        android:id="@+id/textloading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Loading Image.."
        android:layout_gravity="center"
        android:textSize="25sp"
        android:textStyle="bold|italic"/>
    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmer_view_container1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="5dp"
        >
    <View
        android:id="@+id/view1"
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:background="#8A8888"
        android:layout_gravity="center"/>
    </com.facebook.shimmer.ShimmerFrameLayout>
    <ImageView
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:visibility="gone"
        android:layout_gravity="center"
        android:id="@+id/imageload"
        android:background="@drawable/imageloaded"/>

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmer_view_container2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:shimmer_shape="radial"
        android:layout_gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="PROTO CODERS POINT"
            android:layout_gravity="center"
            android:textSize="25sp"
            android:textStyle="bold|italic"/>
    </com.facebook.shimmer.ShimmerFrameLayout>

    <TextView
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Demo of Facebook Shimmer Effect"/>
</LinearLayout>

Main_Activity.java

package com.ui.shimmereffect;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.os.Handler;
import android.os.HandlerThread;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.facebook.shimmer.ShimmerFrameLayout;

public class MainActivity extends AppCompatActivity {

    ShimmerFrameLayout shimmer1,shimmer2;
    ImageView imageload;
    View view1;
    TextView loading;

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

        imageload=(ImageView)findViewById(R.id.imageload);
        view1=(View)findViewById(R.id.view1);
        loading=(TextView)findViewById(R.id.textloading);

        shimmer1= (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container1);
       shimmer1.startShimmer(); //start Shimmer animation of shimmer 1


        shimmer2= (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container2);
        shimmer2.startShimmer(); //start Shimmer animation of shimmer 1

        Log.d("text","wait for 3 secs to load image");

        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                Log.d("text2","working");

                shimmer1.stopShimmer();
                view1.setVisibility(View.GONE);
                loading.setText("Loaded");

                imageload.setVisibility(View.VISIBLE);
            }
        },3000);

    }
}

Note: Here i am making use of handler to show the Facebook shimmer android effect for 3 seconds and then show the image.

you need to add an image in drawable folder to show image in ImageView.