• techpassmaster@gmail.com

Shimmer Effect Android Kotlin

By Learn Android Most Recent Write a Comment on Shimmer Effect Android Kotlin12 min read

Facebook Shimmer effect is an Android library that provides to add a shimmer effect to the Android Application. It’s very easy to add to any view, it was originally created for Facebook but nowadays we can use it in Android Apps or any website.

Mostly, the shimmer effect is useful as a loading effect. You always noticed an effect in Facebook’s Android App or Website, while the data is loading from the server, this effect will make the UI modern and beautiful and your Android App will look more interesting if you use the shimmer effect while data loading from the server instead of the android progress bar.

In the bellow video, you will see an example :

Implementing Facebook Shimmer Loading Effect in Android Studio

In this post, we will demonstrate how we can use the Facebook Shimmer effect in your Android App using Kotlin. In the post, we will not be using recycler view or we are not facing any data from the server, we will simply apply the shimmer effect to the views.

The next post will use the shimmer effect for the Android recyclerview, this post gives an idea of how you can implement the shimmer effect in the Android App. So without any further discussion let get started!

Follow the below steps to implement the Facebook Shimmer effect to your Android App.

First, we are going to create & set up the Project.

Step 1: Create a Project for shimmer effect

  • Start a new Android Studio Project.
  • Select empty Activity and click Next.
  • Project Name: Facebook Shimmer effect.
  • Choose Language: Kotlin.
  • Now click Finish.
  • Your project is ready now.

Step 2: Add dependencies

Add the following dependencies in your app-level build.gradle, and click sync.

    //    facebook shimmer loading
    implementation "com.facebook.shimmer:shimmer:0.5.0"

Step 3: Enable View Binding

 buildFeatures {
        viewBinding true
    }

Step 4: Add dimension

Create a new dimens.xml file by right-clicking the values folder and choosing the New > Values resource file. Write dimens for the name.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--    dp-->
    <dimen name="dp_0">0dp</dimen>
    <dimen name="dp_2">2dp</dimen>
    <dimen name="dp_4">4dp</dimen>
    <dimen name="dp_8">8dp</dimen>
    <dimen name="dp_12">12dp</dimen>
    <dimen name="dp_14">14dp</dimen>
    <dimen name="dp_16">16dp</dimen>
    <dimen name="dp_24">24dp</dimen>
    <dimen name="dp_138">138dp</dimen>
</resources>

Step 5: Create custom shimmer gradient overlay

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="180"
        android:endColor="#C4C4C4"
        android:startColor="#F6F6F6" />

    <corners android:radius="0dp" />
</shape>

Open Drawable folder and create a custom shimmer gradient overlay

Step 6: Create a layout for the Shimmer effect

Create a new XML file in the layout folder name as shimmer_effect_placeholder_layout.xml that is used for the shimmer effect for that add the below code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E0E0E0"
    android:padding="@dimen/dp_16">

    <androidx.cardview.widget.CardView
        android:id="@+id/myBookingCard1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="@dimen/dp_4"
        app:cardCornerRadius="@dimen/dp_4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/dp_16">

            <View
                android:id="@+id/myBookingView1"
                android:layout_width="@dimen/dp_138"
                android:layout_height="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <View
                android:id="@+id/myBookingView2"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_28"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView1" />

            <View
                android:id="@+id/myBookingView3"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView2" />

            <View
                android:id="@+id/myBookingView4"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView3" />

            <View
                android:id="@+id/myBookingView5"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView4" />

            <View
                android:id="@+id/myBookingView6"
                android:layout_width="0dp"
                android:layout_height="@dimen/dp_48"
                android:layout_marginTop="@dimen/dp_16"
                android:layout_marginEnd="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toStartOf="@+id/guideline1"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView5" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guideline1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.50" />

            <View
                android:id="@+id/myBookingView7"
                android:layout_width="0dp"
                android:layout_height="@dimen/dp_48"
                android:layout_marginStart="@dimen/dp_16"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@+id/guideline1"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView5" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/myBookingCard2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_16"
        android:elevation="@dimen/dp_4"
        app:cardCornerRadius="@dimen/dp_4"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/myBookingCard1">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/dp_16">

            <View
                android:id="@+id/myBookingView8"
                android:layout_width="@dimen/dp_138"
                android:layout_height="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <View
                android:id="@+id/myBookingView9"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_28"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView8" />

            <View
                android:id="@+id/myBookingView10"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView9" />

            <View
                android:id="@+id/myBookingView11"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView10" />

            <View
                android:id="@+id/myBookingView12"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView11" />

            <View
                android:id="@+id/myBookingView13"
                android:layout_width="0dp"
                android:layout_height="@dimen/dp_48"
                android:layout_marginTop="@dimen/dp_16"
                android:layout_marginEnd="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toStartOf="@+id/guideline2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView12" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guideline2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.5039578" />

            <View
                android:id="@+id/myBookingView14"
                android:layout_width="0dp"
                android:layout_height="@dimen/dp_48"
                android:layout_marginStart="@dimen/dp_16"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@+id/guideline2"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView12" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/myBookingCard3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_16"
        android:elevation="@dimen/dp_4"
        app:cardCornerRadius="@dimen/dp_4"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/myBookingCard2">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/dp_16">

            <View
                android:id="@+id/myBookingView15"
                android:layout_width="@dimen/dp_138"
                android:layout_height="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <View
                android:id="@+id/myBookingView16"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_28"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView15" />

            <View
                android:id="@+id/myBookingView17"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView16" />

            <View
                android:id="@+id/myBookingView18"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView17" />

            <View
                android:id="@+id/myBookingView19"
                android:layout_width="@dimen/dp_0"
                android:layout_height="@dimen/dp_8"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView18" />

            <View
                android:id="@+id/myBookingView20"
                android:layout_width="0dp"
                android:layout_height="@dimen/dp_48"
                android:layout_marginTop="@dimen/dp_16"
                android:layout_marginEnd="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toStartOf="@+id/guideline3"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView19" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guideline3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.5039578" />

            <View
                android:id="@+id/myBookingView21"
                android:layout_width="0dp"
                android:layout_height="@dimen/dp_48"
                android:layout_marginStart="@dimen/dp_16"
                android:layout_marginTop="@dimen/dp_16"
                android:background="@drawable/shimmer_gradient_overlay"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@+id/guideline3"
                app:layout_constraintTop_toBottomOf="@+id/myBookingView19" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Step 7: Open main layout

Now open activity_main.xml and add the below code. In this layout we’ll apply the shimmer effect, add the below code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:shimmer="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/main_fbShimmer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        shimmer:duration="800">

        <!-- Adding placeholders -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include
                android:id="@+id/fbShimmerPlaceholder"
                layout="@layout/shimmer_effect_placeholder_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <include
                android:id="@+id/fbShimmerPlaceholder2"
                layout="@layout/shimmer_effect_placeholder_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/fbShimmerPlaceholder"
                android:layout_marginTop="@dimen/dp_12" />

            <include
                android:id="@+id/fbShimmerPlaceholder3"
                layout="@layout/shimmer_effect_placeholder_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/fbShimmerPlaceholder2"
                android:layout_marginTop="@dimen/dp_12" />

            <include
                android:id="@+id/fbShimmerPlaceholder4"
                layout="@layout/shimmer_effect_placeholder_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/fbShimmerPlaceholder3"
                android:layout_marginTop="@dimen/dp_12" />
        </RelativeLayout>
    </com.facebook.shimmer.ShimmerFrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Step 8: Open Main Activity

Now open MainActivity.kt. and add the below code. In this activity, we’ll write the code for the loading shimmer effect.

package com.techpassmaster.facebookshimmerandroid

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import com.techpassmaster.facebookshimmerandroid.databinding.ActivityMainBinding

/**
 * Created by Techpass Master on 1-OCT-21.
 * Website - https://techpassmaster.com/
 * connect - techpassmaster@gmail.com
 */

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)

        startShimmerEffect()
    }

    /*
 * this method to used for start Shimmer Effect
 * */
    private fun startShimmerEffect() {
        binding.mainFbShimmer.visibility = View.VISIBLE
        binding.mainFbShimmer.startShimmer()

    }

    /*
     * this method to used for stop Shimmer Effect
     * */
    private fun stopShimmerEffect() {
        binding.mainFbShimmer.visibility = View.GONE

        if (binding.mainFbShimmer.isShimmerStarted) {
            binding.mainFbShimmer.stopShimmer()
        }
    }
}
You May Also Like:

I hope you liked the post. If you have any questions regarding this post. Feel free to comment and share the post with other developers.

Happy Learning🙂

Post Views: 2,012

Techpass Master

Techpass Master is a website for free Android App Development, Java, Kotlin, Jetpack Compose, Firebase, & other tech tips & tricks tutorials. We focus on posting the article at Android App Development. Apart from App development tutorials, we also occasionally post other technology tips and tricks, which can be very helpful for you. Stay tuned with Techpass Master for more updates.
View All Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

We use cookies on our website to give you the most relevant experience. By continuing to use the site, you agree to the use of cookies.