Shimmer Effect in Android

Yunus Emre Arslan
May 8 · 3 min read

Hello everyone 👋🏻! Today I’m going to show you how to use the “Shimmer Effect” in your Android projects. Before start, for those who don’t know what shimmer is that it’s a more efficient and UX-friendly way to show a loading process to the user. It’s generally preferred for list items as you see below:

Shimmer Effect

Now, let’s see how to implement it with an example, shall we?

We are going to use a 3rd party library for Shimmer which is provided by Facebook.

If you want to check it out, click here.

Firstly, let’s add the related dependency to our app/build.gradle file.

implementation 'com.facebook.shimmer:shimmer:0.5.0'

Our application will make a fake API call and get a list. After that, it will show the list in a RecyclerView. While fetching the list, we will show the Shimmer Effect to the user.

Actually, implementing the shimmer effect is pretty simple. All we have to do is after implementing our list row layout, simply cloning this layout with only a minor difference (giving each child view a darker background color) and that’s all.

Let’s create a really simple row_user_list for our RecyclerView.

This one should serve the purpose. Now let’s create our row_user_list_shimmer.

Here, the background color I use is

<color name="shimmerColor">#C2C2C2</color>

Now, let’s create our screen. Our activity_main.xml file will contain a RecyclerView and ShimmerFrameLayout.

What we do here is that simply add how many shimmer rows we would like to show to ShimmerFrameLayout. We will handle it like an ordinary progressView from now on.

Now, let’s make a fake-API call for getting the users. Here, I am going to use Coroutines for API call effect in order not to exceed the scope of this article.

Now, let’s implement a really basic RecyclerViewAdapter for our list.

We are all set 💪. Let’s see how to set shimmer programmatically. All we have to do is just calling startShimmer() and stopShimmer() where necessary.

In this project, I am using Resource sealed class which is really useful and quite compatible with the MVVM design pattern.

We can now do the related operations while we are observing our LiveData object from MainActivity.

After all is set, our app would look like this 🥳🥳:

That’s all folks. This is the most basic way to show how to use Shimmer Effect. Of course, you can make much better ones just keep going 🙌.

Just in case, you can access the whole source code in the link below:

See you in the next one 👋🏻

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store