ShimmerLayout can be used to add a Shimmer Effect (like the one on Facebook or LinkedIn) to the Android Application. This layout is mainly used when an app fetched data from API but the task is a long-running task. Therefore it is better to add ShimmerLayout rather than showing the blank screen as it notifies the user that the layout is in the loading state. The code has been given in both Java and Kotlin Programming Language for Android.
Advantages:
- ShimmerLayout is memory efficient.
- It can be customized according to the need of the application.
Disadvantage:
- It is deprecated.
Approach:
1. Add the support library in the App-level build.gradle file and add dependency in the dependencies section. It allows the developer to use the inbuilt function directly.
dependencies {
implementation 'io.supercharge:shimmerlayout:2.1.0'
}
2. Create circle.xml file in the drawable folder and add the following code. This will be used in the ShimmerLayout along with the text view.
XML
<?xml version="1.0" encoding="utf-8"?> android:shape="rectangle"> <size android:height="40dp" android:width="40dp"/> <corners android:radius="20dp"/> <solid android:color="#D3D3D3"/></shape> |
3. Add the following code in the activity_main.xml file. In this file, add ShimmerLayout and its child view. Add circle.XML in the src tag in ImageView.
XML
<io.supercharge.shimmerlayout.ShimmerLayout android:id="@+id/shimmer_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:shimmer_animation_duration="2000" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_marginTop="5dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:layout_marginStart="10dp" android:src="@drawable/circle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="10dp" /> <TextView android:layout_marginEnd="10dp" android:layout_width="match_parent" android:layout_height="40dp" android:gravity="center" android:background="#D3D3D3" android:textSize="26sp" /> </LinearLayout> <LinearLayout android:layout_marginTop="10dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:layout_marginStart="10dp" android:src="@drawable/circle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="10dp" /> <TextView android:layout_marginEnd="10dp" android:layout_width="match_parent" android:layout_height="40dp" android:gravity="center" android:background="#D3D3D3" android:textSize="26sp" /> </LinearLayout> <LinearLayout android:layout_marginTop="10dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:layout_marginStart="10dp" android:src="@drawable/circle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="10dp" /> <TextView android:layout_marginEnd="10dp" android:layout_width="match_parent" android:layout_height="40dp" android:gravity="center" android:background="#D3D3D3" android:textSize="26sp" /> </LinearLayout> </LinearLayout></io.supercharge.shimmerlayout.ShimmerLayout> |
4. Add the following code to the MainActivity File. In this file, the startShimmerAnimation method is used to start the animation on ShimmerLayout.
Java
import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import io.supercharge.shimmerlayout.ShimmerLayout; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ShimmerLayout layout = findViewById(R.id.shimmer_layout); layout.startShimmerAnimation(); }} |
Kotlin
import android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport io.supercharge.shimmerlayout.ShimmerLayout class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val layout: ShimmerLayout = findViewById(R.id.shimmer_layout) layout.startShimmerAnimation() }} |