Shimmer effect in android

We all have seen shimmer loading effect in most of the apps like facebook,youtube etc. And you might be thinking about how to a similar effect with my applications. There is a straightforward solution for this. Facebook has come up with a library called shimmer, with this library you can show loading view with shimmer effect in your application. I am going to explain how to use this library.

Including Dependency

First, you have to add this library to your build.gradle

dependencies {
  implementation 'com.facebook.shimmer:shimmer:0.5.0'
}

Usage

Now you are ready to use this in your application. Before adding the effect first you have to create a dummy layout that looks similar to your original layout. For example, if you have a recyclerview, Let’s assume below is your item layout of the recyclerview

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout style="@style/MovieListItem">

        <androidx.cardview.widget.CardView
            android:id="@+id/card_item"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/ic_launcher"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent">
            <ImageView
                android:id="@+id/imageView"
                style="@style/ListItemImage"/>
        </androidx.cardview.widget.CardView>

        <TextView
            android:id="@+id/movie_title"
            style="@style/ListItemTitleText"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/card_item" />

        <TextView
            android:id="@+id/movie_year"
            style="@style/ListItemSubTitleText"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/movie_title" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Now next step is to create a shimmer_placeholder with the same views

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="ViewHolder"
            type="com.watchurmovie.movieone.ui.home.adapter.MovieListViewAdapter.MovieListViewHolder" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout style="@style/MovieListItem">

        <androidx.cardview.widget.CardView
            android:id="@+id/card_item"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/ic_launcher"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent">
            <ImageView
                android:id="@+id/imageView"
                style="@style/ListItemImage"/>
        </androidx.cardview.widget.CardView>

        <TextView
            android:id="@+id/movie_title"
            style="@style/ListItemTitleText"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/card_item" />

        <TextView
            android:id="@+id/movie_year"
            style="@style/ListItemSubTitleText"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/movie_title" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Now go to your activity_main.xml

add following code

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <androidx.constraintlayout.widget.ConstraintLayout 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"
        tools:context=".ui.home.MainActivity">
<com.facebook.shimmer.ShimmerFrameLayout
     android:id="@+id/shimmer_view_container"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
>
     <include layout="@layout/shimmer_placeholder" />
     <include layout="@layout/shimmer_placeholder" />     
     <include layout="@layout/shimmer_placeholder" />     
     <include layout="@layout/shimmer_placeholder" /></com.facebook.shimmer.ShimmerFrameLayout>        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/movie_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="@{!viewmodel.networkFailure}"
            app:adapter="@{viewmodel}" />

        <TextView
            style="@style/ErroMessage"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:visibility="@{viewmodel.networkFailure}"
            ></TextView>


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

In your activity

ShimmerFrameLayout container =
  (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.startShimmer();

This can be triggered from layout also by specifying autostart to true.

Now if you run your application you will be able to see youtube,facebook like loading animation

Happy Reading….. Happy Coding….