Create Shimmer For Image In Android Using Android Studio

In this article, we are going to see how to give a shimmer effect to an image in Android app using the Android Studio.

Introduction

In this article, we are going to see how to give a shimmer effect 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. Shimmer is a Java-based library.

Step 1

Create a new project in Android Studio.

Android
 
Give a name to the project and click "Next". You can choose if you know  C++ or Kotlin.
 
Android
 
Select the "Phone and Tablet" and click "Next".
 
Android
 
Select an empty activity and click "Next".
 
Android
 
At last, give the activity name and click on "Finish".
 
Android
 
Step 2

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

Android
 
Then, paste the copied image into the drawable folder.
 
Android
 
Step 3

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

Android
 
And type the following dependency in your app's build.gradle.
 
Android
 
Code copy is here:
  1. dependencies  
  2. {  
  3.    compile 'com.facebook.shimmer:shimmer:0.1.0@aar'  
  4. }  
Step 4

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

Android
 
and just type the code as follows.
 
Android
 
Code copy is here:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <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">  
  3.     <com.facebook.shimmer.ShimmerFrameLayout android:id="@+id/shimmer_view_container" android:layout_width="wrap_content" android:layout_height="wrap_content">  
  4.         <LinearLayout android:layout_width="wrap_content" android:orientation="vertical" android:gravity="center" android:layout_height="wrap_content">  
  5.             <ImageView android:layout_width="150dp" android:layout_height="150dp" android:src="@drawable/ironman" />  
  6.             <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tony Stark" android:textColor="#800000" android:textSize="32dp" />   
  7.          </LinearLayout>  
  8.     </com.facebook.shimmer.ShimmerFrameLayout>  
  9. </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:

Android
 
And just type the code as follows:
 
Android
 
Code copy is here:
  1. package com.example.hari.shimmerapp;  
  2. import android.support.v7.app.AppCompatActivity;  
  3. import android.os.Bundle;  
  4. import com.facebook.shimmer.ShimmerFrameLayout;  
  5. public class MainActivity extends AppCompatActivity {  
  6.     @Override  
  7.     protected void onCreate(Bundle savedInstanceState) {  
  8.         super.onCreate(savedInstanceState);  
  9.         setContentView(R.layout.activity_main);  
  10.         ShimmerFrameLayout container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);  
  11.         container.startShimmerAnimation();  
  12.     }  
  13. }  
Step 8

Verify the preview.

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

Android
 
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.

Android

Run the application in your desired emulator (Shift + F10)
 
Android
 
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*