Posts

Showing posts with the label Shimmer Effect

Facebook Shimmer Effect Android Example

Image
Shimmer  effect was created by Facebook to show loading status instead of showing ProgressBar. In this article, I’m going to take you through my journey of replacing the ProgressBar with Shimmer  effect. App Intro To replicate the Facebook Shimmer  animation, I built a simple app where we’re gonna execute movies fetching network request. We’re gonna hit an URL  and download Json data and show in a GridView. While application fetching movies instead of showing ProgressBar, we’re gonna show the Shimmering  effect and in successful or in error case stop the effect. Gradle Stuff Facebook Shimmer  effect requires us to add some more stuff to our application modules  build.gradle  file. We start by adding the following dependencies right after the  android  section: Recommended for you // Facebook shimmer effect dependency implementation 'com.facebook.shimmer:shimmer:0.1.0@aar' // Retrofit dependency implementation 'com.sq...

ShimmerRecyclerView

Image
A custom recycler view with shimmer views to indicate that views are loading. The recycler view has a built-in adapter to control the shimmer appearance and provide two methods - showShimmerAdapter() - set up a demo adapter a predefined number of child demo views. hideShimmerAdapter() - restores your adapter to show the actual child elements. Demo Screen There are two kinds of shimmer animation which you can see here: This type of shimmer effect uses the whole ViewHolder item to animate on. List Demo Grid Demo Here the shimmer effect only applied on for those views which background color is nontransparent. List Demo Grid Demo Shimmer effect types As you can see the first demo examples show that the whole ViewHolder item is animated. To achieve the desired effect, the children of the ShimmerLayout should have a nontransparent background. You can achieve the second kind of shimmer effect by adding only one ViewGroup child to the Sh...