Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Shimmer
2.1.
Need
2.2.
Ways
3.
Example
4.
FAQs
5.
Key Takeaways 
Last Updated: Mar 27, 2024
Easy

Android Shimmer Layout

Author Akshit Pant
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Most of us have already seen the working of Shimmer layout in Facebook/LinkedIn. The motive of using the Shimmer layout is to inform the user that the structure is currently loading.

Before jumping directly on how Android Studio does this, first knowing the basic knowledge of Kotlin and how to use it is strongly recommended.

So, let us start reading about how the Shimmer layout works in Android.

Shimmer

Shimmer is a library for Android that makes it simple to apply a shimmer affect to any view in our app. It was created for Facebook Home and is useful as an unobtrusive loading indication.

Need

When presenting data (that too, especially from a remote server), there could be a possibility that the information may not appear on your application's screen right away. As professional developers, We don't want to provide the user with a blank screen to look at while our app requests data from the Internet. Our application should inform the user that it is talking with the required data servers.

As a result, we'll need to figure out how to tell a user that data is being obtained and will be displayed soon. This created the need for a Shimer layout.

Ways

The loading progress of your remote data can be implemented in a variety of ways. The following are a few examples of such frequent methods:

  • Progress bars
  • Shimmer
  • Spinner loader

In this blog, we will cover how to tackle the loading process with the Shimmer layout. ShimmerLayout saves a lot of memory(comparatively with other ways), and It can be personalized to the application's requirements. As the data is requested from the server, the Shimmer layout overrides the application's main screen. After the data is loaded, the dummy skeleton screen is replaced by the main screen views.

Many big companies like Youtube, Linkedin, Facebook are already using Shimmer. Let's see what the Shimmer layout looks like with a working example given below.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Example

Open Android Studio, start an empty activity, give a name to your app(Kotlin Shimmer layout CN in our case), and let Android do the Gradle syncing.

Now add dependency of Shimmer layout in build.Gradle (:app), this will allow us to use inbuilt Shimmer layout methods and start Shimmer animation.

Code:

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

Now make the activity_main.xml file as per the need of your desired layout.

Code:

<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=".MainActivity">

    <io.supercharge.shimmerlayout.ShimmerLayout
        android:id="@+id/shimmer_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:shimmer_animation_duration="1500">

        <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="5dp"
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="10dp"
                />
            <TextView
                android:layout_marginEnd="5dp"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:gravity="center"
                android:background="#918F8F"
                android:textSize="26sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <ImageView
                android:layout_marginStart="5dp"
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"
                />
            <ImageView
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"/>

            <ImageView
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"/>

            <ImageView
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"/>

            <ImageView
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"/>

            <ImageView
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"/>

            <ImageView
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"/>

            <ImageView
                android:src="@drawable/circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"/>

        </LinearLayout>

            <LinearLayout
                android:layout_marginTop="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <ImageView
                    android:layout_marginStart="5dp"
                    android:src="@drawable/meme"
                    android:layout_width="match_parent"
                    android:layout_height="500dp"
                    android:layout_marginEnd="5dp"
                    />

            </LinearLayout>

            <LinearLayout
                android:layout_marginTop="50dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <ImageView
                    android:layout_marginStart="5dp"
                    android:src="@drawable/meme"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:layout_marginEnd="5dp"
                    />


            </LinearLayout>

        </LinearLayout>

    </io.supercharge.shimmerlayout.ShimmerLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Since we have used circle and meme in our XML file layout, create circle.xml and meme.xml in res -> drawable.

                                    

 

Add this code to your circle and meme XML files.

Code:

circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size
        android:height="35dp"
        android:width="35dp"/>
    <corners android:radius="25dp"/>
    <solid android:color="#918F8F"/>
</shape>


meme.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#918F8F"/>
</shape>

Now in MainActivity.kt call your Shimmer layout from activity_main.xml using.

Code:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import io.supercharge.shimmerlayout.ShimmerLayout

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val my_layout = findViewById<ShimmerLayout>(R.id.shimmer_layout)
        my_layout.startShimmerAnimation()
    }
}

 

Output:

 

Here, we have added the Shimmer animation effect of the loading process using the layout.startShimmerAnimation() method so that the user will see some loading animation instead of a blank screen till the data fetching completes.

FAQs


1. What exactly is the shimmer effect?
Ans: Facebook invented the Shimmer effect to display a loading state, so instead of utilizing the ProgressBar or a standard loader, we can use Shimmer for a better design and user interface.
 

2. In Recyclerview, how can we apply Shimmer?
Ans: Starting with creating a placeholder layout for Shimmer, then Gathering information for the recycler view, which is followed by making the shimmer placeholder visible and at last Showcase the original.
 

3. When Shall we use Progress bars and Spinners?
Ans: For a short loading process that takes less than 4 seconds, we shall use Spinners, but for processes with more than 4 seconds of loading time, we shall use Progress bars. 

Key Takeaways 

In this article, we learned about the Shimmer layout and its implementation. We also infer from this article how using the Shimmer effect is better than Progress bars and Spinners.
You can head over to our Android Development Course on the Coding Ninjas Website to dive deep into Android Development and build future applications.

We hope this article has helped you enhance your knowledge of the Android UI Shimmer layout. If you want to learn more, check out our Programming Fundamentals and Competitive Programming articles. Do upvote this article to help other ninjas grow.

Previous article
Android Relative Layout
Next article
Landscape Layout
Live masterclass