ShimmerLayout in Android with Examples

ShimmerLayout can be used to add a shimmer effect (like the one at Facebook or at 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.

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 build.gradle file and add dependency in the dependencies section. It allows the developer to use the inbuilt function directly.



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

                 
    dependencies {     
          implementation 'io.supercharge:shimmerlayout:2.1.0'
    }          

    chevron_right

    
    

  2. Create circle.xml file in drawable folder and add the following code. This will be used in the ShimmerLayout along with the textview.

    circle.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?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>

    chevron_right

    
    

  3. Add the following code in activity_main.xml file. In this file, add ShimmerLayout and its child view. Add circle.XML in src tag in ImageView.

    activity_main.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  4. Add the following code in MainActivity.java file. In this file, startShimmerAnimation method is used to start the animation on ShimmerLayout.

    MainActivity.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    package org.geeksforgeeks.shimmerLayout;
      
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    import androidx.annotation.Nullable;
    import androidx.appcompat.app.AppCompatActivity;
    import io.supercharge.shimmerlayout.ShimmerLayout;
      
    public class MainActivity
        extends AppCompatActivity {
      
        @Override
        protected void onCreate(
            @Nullable Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
      
            ShimmerLayout layout = findViewById(
                R.id.shimmer_layout);
            layout.startShimmerAnimation();
        }
    }

    chevron_right

    
    

    1. Output:

      Reference: https://github.com/team-supercharge/ShimmerLayout

      Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




      My Personal Notes arrow_drop_up


      If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

      Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


      Article Tags :
      Practice Tags :


      1


      Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.