How to implement a shimmer effect in Android Studio ।। RSM Developer

 

Step 1: Creating a new project

• Open a new project.

• We will be working on Empty Activity with language as Java. Leave all other options unchanged.

• You can change the name of the project at your convenience.

• There will be two default files named activity_main.xml and MainActivity.java.

Step 2: Navigate to Build scripts > build.gradle(module) file and add the following dependency to it and Syne Now

//Shimmer Effect
implementation 'com.facebook.shimmer:shimmer:0.5.0'
And
targetSdk 33
compileSdk 33
Or
implementation 'androidx.appcompat:appcompat:1.5.1'

Step 3: Open res -> layout ->activity_main.xml (or) main.xml and add following code:
In this step we open an XML file and add the code :-
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/purple_200"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Shimmer Effect"
        android:textSize="25dp"
        android:textStyle="bold"
        android:textColor="@color/black"
        android:layout_marginTop="50dp"
        />


    <!--Shimmer Effect-->

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

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">


            <ImageView
                android:layout_width="180dp"
                android:layout_height="180dp"
                android:src="@drawable/se" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Shimmer Effect"
                android:textSize="25dp"
                android:textStyle="bold"
                android:textColor="#000000"
                android:layout_marginTop="20dp"
                />

        </LinearLayout>

    </com.facebook.shimmer.ShimmerFrameLayout>


</LinearLayout>

Step 4: Open Java -> package – > MainActivity.Java and add following code:
In this step we open an Java file and add the code :-
package com.rsmdeveloper.shimmereffect;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import com.facebook.shimmer.ShimmerFrameLayout;

/**
 * Created by RSM Developer on 04-04-2023.
 * Follow Facebook : https://www.facebook.com/RSMDeveloper
 * Subscribe YouTube : https://www.youtube.com/@RSMDeveloper
 * Visit Website : https://rsmdeveloper.blogspot.com/
 * Developed Your Creativity With RSM Developer
 **/

public class MainActivity extends AppCompatActivity {

    ShimmerFrameLayout shimmerFrameLayout;

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

        shimmerFrameLayout = findViewById(R.id.shimmer_container);
        shimmerFrameLayout.startShimmer();

    }
}

Output:
Now run the App and you will see main topics and sub-topics listed.....

Watch this video