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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.