Create effects for layout or RecyclerView when loading data

Tram Ho

In many cases, our app must download data from the internet or device’s memory. And in most cases we have to wait a while to load the data. In the meantime, it seems much better if we display the UI pane as Facebook’s load list comment instead of just showing a blank screen. Users will not know if the app is loading or not doing anything.

In this article, we will learn how to display interface frames and effects such as Facebook or LinkedIn for Layout and recyclerView on Android using the AndroidVeil library.

As the example below

Add library to Project

First, you add AndroidVeil to the file build.gradle.

This version may not be the latest version yet. If you want the latest version, you can check it out here .

How to use

Here is a basic example of implementing effects for View or Viewgroup in layout with VeilLayout .

VeilLayout can wrap any view or viewgroup and it will create interface frames based on the view hierarchy and create effects. The basic principle is that VeilLayout will go through the wrapped view hierarchy and then create frames based on the views and the width / height dimensions of the child views.

If you want to use VeilLayout for a resource layout, we can do the following.

And we can change the interface frame color, effect color, alpha, drop Offer and radius of the interface frame using the available properties.

Veil and UnVeil

It is really easy to use. Just call the veil () and unVeil () functions .

We can call the veil () method before requesting the server or before something takes time. After completing that work, we should call the unVeil () method to display the actual interface.

Here is an example of using Glide and VeilLayout in ViewHolder ( RecyclerView ). In this case, every ViewHolder items that have imageView should be downloaded by Glide. And we want to create the effect before loading the image.

Glide provides listener success and failure when downloading images. So we can use it with VeilLayout . Just call the veil () method from the beginning in the onBindViewHolder method. And after we can know the status of the image loaded (success or failure), we call the unVeil () method .

VeilRecyclerFrameView

This is an easier way to implement the shimmering effects for RecyclerView with VeilRecyclerFrameView . It is almost similar to using VeilLayout . We should use VeilRecyclerFameView instead of RecyclerView in XML file.

We bind RecyclerView.Adapter and LayoutManager like VeilRecyclerFameView below.

Our RecyclerView results will be as follows:

Shimmer

This library uses Facebook’s shimmer-android . Below is a detailed instruction for shimmer-instruction or we can refer to the example below.

Share the news now

Source : Viblo