Shimmer Effect in Android

Posted By : Mohd Anas | 21-Apr-2020

Shimmer effect in Android was made by Facebook to demonstrate a stacking status, so as opposed to utilizing ProgressBar or regular loader use Shimmer for a superior plan and UI. 

They additionally publicly released a library called Shimmer both for Android and iOS with the goal that each developer could utilize it for free. '

'

Great Design is key to get A Lot of Customers.

Steps:

Add Shimmer Library to build.gradle :

 

dependencies {
       implementation 'com.facebook.shimmer:shimmer:0.1.0@aar'
}

colors.xml

 

<color name="background">#dddddd</color>

dimens.xml

 

<dimen name="activityPadding">16dp</dimen>
<dimen name="placeholderImage">60dp</dimen>
<dimen name="placeholderTextHeight">8dp</dimen>
<dimen name="padding_10">10dp</dimen>

Now create a new layout ‘data_placeholder_layout.xml’. This format will go about as a placeholder view until the information isn't stacked from the API. 

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="20dp"
    android:layout_marginLeft="10dp"
    >

    <View
        android:id="@+id/thumbnail"
        android:layout_width="@dimen/placeholderImage"
        android:layout_height="@dimen/placeholderImage"
        android:layout_marginRight="@dimen/activityPadding"
        android:layout_marginTop="@dimen/padding_10"
        android:background="@color/background"
        />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/thumbnail"
        android:layout_marginTop="@dimen/padding_10"
        android:orientation="vertical"
        >
        <View
            android:layout_width="100dp"
            android:layout_height="@dimen/placeholderTextHeight"
            android:background="@color/background" />
        <View
            android:layout_width="30dp"
            android:layout_height="@dimen/placeholderTextHeight"
            android:layout_marginTop="5dp"
            android:background="@color/background" />
    </LinearLayout>
</RelativeLayout>

 

Shortly, as the placeholder design is prepared to add it to the activity layout(activity_data.xml). 

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:shimmer="http://schemas.android.com/apk/res-auto"
    tools:context="com.anuragdhunna.www.shimmer.activities.DataActivity">

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmer_view_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:orientation="vertical"
        shimmer:duration="800">

        <!-- Adding 7 rows of placeholders -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <include layout="@layout/data_placeholder_layout" />
            <include layout="@layout/data_placeholder_layout" />
            <include layout="@layout/data_placeholder_layout" />
            <include layout="@layout/data_placeholder_layout" />
            <include layout="@layout/data_placeholder_layout" />
            <include layout="@layout/data_placeholder_layout" />
            <include layout="@layout/data_placeholder_layout" />
        </LinearLayout>

    </com.facebook.shimmer.ShimmerFrameLayout>
    
    <ListView
        android:id="@+id/playlistDataLV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:paddingBottom="0dp"
        android:divider="#faf8f8"
        android:dividerHeight="2dp"
        android:layout_alignParentStart="true"
        />

</android.support.constraint.ConstraintLayout>

 

In DataActivity.java start the Shimmer effects by calling startShimmerAnimation() function. 

 

package com.anuragdhunna.www.shimmer.activities;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;

import com.anuragdhunna.www.shimmer.R;
import com.anuragdhunna.www.shimmer.models.playlist.Playlist;
import com.anuragdhunna.www.shimmer.utils.ApiServices;
import com.anuragdhunna.www.shimmer.utils.RetrofitClient;
import com.facebook.shimmer.ShimmerFrameLayout;

import java.util.List;

import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;

/**
 * @author anuragdhunna
 */
public class DataActivity extends AppCompatActivity {

    private ShimmerFrameLayout mShimmerViewContainer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_data);

        mShimmerViewContainer = findViewById(R.id.shimmer_view_container);

        //I am using Retrofit Client for fetching information from an API.
        // API Call Using Retrofit Client
        String userId = "XXXX";
        Retrofit retrofit = RetrofitClient.getClient();
        getDataFromServer(userId, retrofit);
    }

    /**
     * Get List of Playlist
     */
    private void getDataFromServer(String user_id, Retrofit retrofit) {

        ApiServices apiServices = retrofit.create(ApiServices.class);
        Call<List<Playlist>> accountPlaylists = apiServices.getAccountPlaylists(user_idd);

        accountPlaylists.enqueue(new Callback<List<Playlist>>() {
            @Override
            public void onResponse(Call<List<Playlist>> call, Response<List<Playlist>> response) {
                if (response.isSuccessful()) {
                    if (response.code() == 200) {
                     
                        //TODO: Set data in ListView 
                    
                    }
                    // Stopping Shimmer Effect's animation after data is loaded to ListView
                    mShimmerViewContainer.stopShimmerAnimation();
                    mShimmerViewContainer.setVisibility(View.GONE);
                }
            }

            @Override
            public void onFailure(Call<List<Playlist>> call, Throwable t) {
                Log.e("TAG", "=======onFailure: " + t.toString());
                t.printStackTrace();
            }
        });
    }

    @Override
    public void onResume() {
        super.onResume();
        mShimmerViewContainer.startShimmerAnimation();
    }

    @Override
    protected void onPause() {
        mShimmerViewContainer.stopShimmerAnimation();
        super.onPause();
    }
}

 

 

OUTPUT

Shimmer effect

 

 

 

About Author

Author Image
Mohd Anas

Anas is working as an Android Developer in Oodles Technologies. He is hard working, Self Motivated and dedicated towards his work. He is also passionate about learning new technologies related to our fields.

Request for Proposal

Name is required

Comment is required

Sending message..