Facebook Shimmerlayout effect for Android

[Repository](https://github.com/facebook/shimmer-android)

What Will I Learn?

• You will learn how you can make your android app design beautiful by adding Shimmer Effect.
• You will learn how can use the Shimmer Android library developed by Facebook to achieve this effect.

Requirements

• Average knowledge of Java, and XML.
• Android Studio installed on your operating system of choice.
• A device to run the application within, can be a physical device, or a VM like the one included in Android Studio's 'Device Manager' (Emulator).

Difficulty

Basic

Tutorial Contents

Introduction

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. 

Get the latest artifact via gradle in app level file

implementation 'io.supercharge:shimmerlayout:2.1.0'

Make following changes in respective files.

In activity_main.xml

<io.supercharge.shimmerlayout.ShimmerLayout

        android:id="@+id/shimmer_layout"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingLeft="10dp"

        android:paddingRight="10dp"

        android:paddingTop="30dp"

        tools:context="com.shimmer.example.MainActivity">

        <RelativeLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content">

            <View

                android:id="@+id/shimmer_avatar_1"

                android:layout_width="@dimen/monogram_width"

                android:layout_height="@dimen/monogram_width"

                android:layout_marginRight="11dp"

                android:background="@drawable/avatar_background"/>

            <View

                ----------------------/>

        </RelativeLayout>

  </io.supercharge.shimmerlayout.ShimmerLayout>

In MainActivity.java

@Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        ShimmerLayout shimmerLayout = (ShimmerLayout) findViewById(R.id.shimmer_layout);

        //animate

        shimmerLayout.startShimmerAnimation();

    }

In colors.xml

<resources>

    <color name="shimmer_background_color">#b1b1b1</color>

</resources>

Create drawable/avatar_background.xml inside res folder and following code into that

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"

       android:shape="oval">

    <solid

        android:color="@color/shimmer_background_color"/>

</shape>

In dimens.xml

<dimen name="monogram_width">40dp</dimen>

Demo

             

Proof of Work Done

https://github.com/santoshhiremani/Shimmerlayout-android