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*