Native Mobile App Development With Java

Shimmer Loading Effect

26-Sep-2024

Shimmer Loading Effect


1/  Create A New Project . and Implement this Library


implementation 'com.facebook.shimmer:shimmer:0.5.0'


2/ Create a new row_userlist xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="8dp"
>


<ImageView
android:id="@+id/image"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:src="@drawable/baseline_person_24"/>



<TextView
android:layout_marginTop="10dp"
android:layout_width="190sp"
android:layout_height="wrap_content"
android:layout_below="@+id/image"
android:layout_centerInParent="true"
android:text="This is a person"
android:textSize="20sp"
android:background="#dddddd"/>


</RelativeLayout>


3/ Another row_user_list_shimmer xml create


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">

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

<include layout="@layout/row_user_list_shimmer"/>
</com.facebook.shimmer.ShimmerFrameLayout>

<LinearLayout
android:id="@+id/linear"
android:layout_width="match_parent"
android:layout_height="match_parent">

<include layout="@layout/row_userlist"/>
</LinearLayout>




</RelativeLayout>


4/ java Activity 


package com.example.shimmerlayout;

import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.LinearLayout;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

import com.facebook.shimmer.ShimmerFrameLayout;

public class MainActivity extends AppCompatActivity {

ShimmerFrameLayout shimmer;
LinearLayout linear;

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

shimmer= findViewById(R.id.shimmer);
linear= findViewById(R.id.linear);

linear.setVisibility(View.INVISIBLE);
shimmer.startShimmer();

Handler handler = new Handler();
handler.postDelayed(()->{

linear.setVisibility(View.VISIBLE);
shimmer.stopShimmer();
shimmer.setVisibility(View.INVISIBLE);
}, 2000); // 2sec delay

}
}


5/  Run and See The Outpot


Comments