Shimmer effect in Android provides an elegant solution to the loading screen. With the deprecation of Android ProgressDialog in APIv26, Google discouraged the usage of UI blocking loading widgets which prevent the user from interacting with the app, e.g. navigating back, while its content is loading. As alternatives, they suggested the usage of ProgressBar and Notification. But, Notification message is displayed outside your app’s UI and ProgressBar does not always match your app’s native design or UI and has to be customized a lot.
To enhance the user experience Facebook built an Android library named Shimmer, that provides an easy way to add a shimmering effect to your UI while the content is being loaded. You can see this effect almost everywhere as it has become a standard among UI designers.
Without Shimmer
With Shimmer
In this post we will see how we can elegantly handle the content loading using Shimmer library. So, let’s dive into the code:
Add the following dependency in your project to include Shimmer
// Gradle dependency on Shimmer for Android
dependencies {
implementation 'com.facebook.shimmer:shimmer:0.5.0'
}
!-- Maven dependency on Shimmer for Android --
<dependency>
<groupId>com.facebook.shimmer</groupId>
<artifactId>shimmer</artifactId>
<version>0.5.0</version>
</dependency>
Add the following color in you colors.xml file
<color name="shimmer_item_color">#808080</color>
Add the following dimens in your dimens.xml
<dimen name="imageWidth">74dp</dimen>
<dimen name="imageHeight">74dp</dimen>
<dimen name="marginStandard">12dp</dimen>
<dimen name="paddingStandard">8dp</dimen>
<dimen name="textSizeHeading">12sp</dimen>
<dimen name="textSizeDescription">10sp</dimen>
<dimen name="shimmerItemHeight">90dp</dimen>
<?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="@dimen/_90sdp">
<ImageView
android:id="@+id/iv"
android:layout_width="@dimen/imageWidth"
android:layout_height="@dimen/imageWidth"
android:layout_marginStart="@dimen/marginStandard"
android:layout_marginEnd="@dimen/marginStandard"
android:background="@color/shimmer_item_color"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/titleTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/paddingStandard"
android:layout_marginEnd="@dimen/paddingStandard"
android:background="@color/shimmer_item_color"
android:textSize="@dimen/textSizeHeading"
app:layout_constraintBottom_toTopOf="@id/desTv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/iv"
app:layout_constraintTop_toTopOf="@id/iv" />
<TextView
android:id="@+id/desTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@color/shimmer_item_color"
android:lines="2"
android:textSize="@dimen/textSizeDescription"
app:layout_constraintBottom_toBottomOf="@id/iv"
app:layout_constraintEnd_toEndOf="@id/titleTv"
app:layout_constraintStart_toStartOf="@id/titleTv"
app:layout_constraintTop_toBottomOf="@id/titleTv" />
</androidx.constraintlayout.widget.ConstraintLayout>
In your layout file, where you want to show the shimmer effect, add the following code at the very bottom:
<com.facebook.shimmer.ShimmerFrameLayout
android:id="@+id/shimmerLoadingView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
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/shimmer" />
<include layout="@layout/shimmer" />
<include layout="@layout/shimmer" />
<include layout="@layout/shimmer" />
<include layout="@layout/shimmer" />
<include layout="@layout/shimmer" />
<include layout="@layout/shimmer" />
</LinearLayout>
</com.facebook.shimmer.ShimmerFrameLayout>
In your Java file, where the above mentioned layout file is set as content view, add the following code:
pirvate ShimmerFrameLayout shimmerLoadingView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_file_name);
shimmerLoadingView = findViewById(R.id.shimmerLoadingView);
loadData();
}
@Override
public void onDataAvailable(Data data) {
shimmerLoadingView.stopShimmerAnimation();
shimmerLoadingView.setVisibility(View.GONE);
//handle/load your data into your UI components
@Override
public void onResume() {
super.onResume();
shimmerLoadingView.startShimmerAnimation();
}
@Override
protected void onPause() {
shimmerLoadingView.stopShimmerAnimation();
super.onPause();
}
All our apps come with Shimmer effect built in. Don’t hesitate to discuss your app project.
Our support staff is available 24/7 to take support calls and messages from clients.
We involve client in all stages of software development to deliver satisfaction and peace of mind.
We hire developers that are technically strong and discuss the project thoroughly before starting.
If you are not happy with the quality of work or we fail to achieve final technical goal, we’ll not take your money.
We have worked with some clients for over 7 years. Our commitment and dedication is a matter of pride for us.
We care about your investment. We will tell it straight if you are making a bad decision.
NDA implied. No spam. Privacy guaranteed.
Best web, app, eCommerce and custom software development company. We provide services to more than 100 clients world-wide.
Contact The Right Software today to discuss the your next big idea.