Shimmer Effect in Android
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:
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 👋🏻
