Create Shimmer For Image In Android Using Android Studio

Introduction

 

In this article, we are going to see how to give a shimmer affect to an image in an Android app using Android Studio. There are several libraries for Android, and Shimmer is one of the most widely-used libraries to give shimmer attributes to the image. The shimmer is a Java-based library.

 

Step 1

 

Create a new project in Android Studio.

 

 

Give a name to the project and click "Next". You can choose if you know  C++ or Kotlin.

 

 

Select the "Phone and Tablet" and click "Next".

 

 

Select an empty activity and click "Next".

 

 

At last, give the activity name and click on "Finish".

 

 

Step 2

 

Next, copy the image in which you want to create the shimmer and go to app>>res>>drawable.

 

 

Then, paste the copied image into the drawable folder.

 

 

Step 3

 

Setup the Gradle by just locating the Gradle Scripts>>Build. Gradle

 

 

And type the following dependency in your app's build.gradle.

 

 

Code copy is here,

dependencies
{
   compile 'com.facebook.shimmer:shimmer:0.1.0@aar'
}

Step 4

 

Next, go to app >> res >> layout >> activity_main.xml. Select activity page

 

 

and just type the code as follows.

 

 

Code copy is here, 

<?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:background="#000000" android:layout_width="match_parent" android:gravity="center" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.hari.shimmerapp.MainActivity">
    <com.facebook.shimmer.ShimmerFrameLayout android:id="@+id/shimmer_view_container" android:layout_width="wrap_content" android:layout_height="wrap_content">
        <LinearLayout android:layout_width="wrap_content" android:orientation="vertical" android:gravity="center" android:layout_height="wrap_content">
            <ImageView android:layout_width="150dp" android:layout_height="150dp" android:src="@drawable/ironman" />
            <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tony Stark" android:textColor="#800000" android:textSize="32dp" />
         </LinearLayout>
    </com.facebook.shimmer.ShimmerFrameLayout>
</LinearLayout>

Step 5

 

Give the background color(optional) for your app by typing the following code in activity_main.xml

android:background="#000000"

 

Note

Within the quotation, you have to provide the hexadecimal color code.

 

Step 6

 

To define the gravity of your image you need to type the following code in activity_main.xml,

android:gravity="center"

 

Step 7

 

Next, go to app >> java>>Mainactivity.java. Select Mainactivity page.

 

 

And just type the code as follows,

 

 

Code copy is here,

package com.example.hari.shimmerapp;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.facebook.shimmer.ShimmerFrameLayout;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ShimmerFrameLayout container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
        container.startShimmerAnimation();
    }
}

Step 8

 

Verify the preview.

->After the code is applied, the preview will appear like this.

 

 

Step 9

 

Next, go to Android Studio and deploy the application. Select an Emulator or your Android mobile with USB debugging enabled. Give it a few seconds to make installations and set permissions.

 

 

Run the application in your desired emulator (Shift + F10)

 

 

Explanation of source code

 

The source code provided in this article is just the dependencies of shimmer and the code used in activity_main.xml will add the image to the app and to define its attributes.

 

Summary

 

In this article, we have created an app named shimmer app, then we have inserted a new image and we have learned how to give a shimmer to that image and finally, we have deployed that as output.

 

*Support and Share, Thank You*