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.
1 2 3 4 | dependencies <span class="token punctuation">{</span> implementation “com <span class="token punctuation">.</span> github <span class="token punctuation">.</span> skydoves <span class="token operator">:</span> androidveil <span class="token operator">:</span> <span class="token number">1.0</span> <span class="token punctuation">.</span> <span class="token number">8</span> ” <span class="token punctuation">}</span> |
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 .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <com.skydoves.androidveil.VeilLayout xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/veilLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:veilLayout_veiled="true" // shows veils initially app:veilLayout_shimmerEnable="true" // sets shimmer enable app:veilLayout_baseColor="@android:color/holo_green_dark" // sets shimmer base color app:veilLayout_highlightColor="@android:color/holo_green_light" // sets shimmer highlight color app:veilLayout_baseAlpha="0.6" // sets shimmer base alpha value app:veilLayout_highlightAlpha="1.0" // sets shimmer highlight alpha value app:veilLayout_dropOff="0.5"// sets how quickly the shimmer`s gradient drops-off app:veilLayout_radius="6dp" // sets a corner radius of the whole veiled items > <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> TextView</span> <span class="token attr-name"><span class="token namespace">android:</span> layout_width</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> match_parent <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span> layout_height</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> wrap_content <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span> text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> And now here is my secret, a very simple secret <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span> textColor</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> @android:color/white <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span> textSize</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 22sp <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token comment"><!-- Any Views or ViewGroups --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> com.skydoves.androidveil.VeilLayout</span> <span class="token punctuation">></span></span> |
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.
1 2 | veilLayout <span class="token punctuation">.</span> <span class="token function">setLayout</span> <span class="token punctuation">(</span> R <span class="token punctuation">.</span> layout <span class="token punctuation">.</span> layout_item_test <span class="token punctuation">)</span> |
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 .
1 2 3 | veilLayout <span class="token punctuation">.</span> <span class="token function">veil</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> veilLayout <span class="token punctuation">.</span> <span class="token function">unVeil</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | itemView <span class="token punctuation">.</span> <span class="token function">run</span> <span class="token punctuation">{</span> item_user_veilLayout <span class="token punctuation">.</span> <span class="token function">veil</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> Glide <span class="token punctuation">.</span> <span class="token function">with</span> <span class="token punctuation">(</span> context <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">load</span> <span class="token punctuation">(</span> githubUser <span class="token punctuation">.</span> avatar_url <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">apply</span> <span class="token punctuation">(</span> <span class="token function">RequestOptions</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">circleCrop</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">override</span> <span class="token punctuation">(</span> <span class="token number">100</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">placeholder</span> <span class="token punctuation">(</span> R <span class="token punctuation">.</span> drawable <span class="token punctuation">.</span> ic_account <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">listener</span> <span class="token punctuation">(</span> <span class="token keyword">object</span> <span class="token operator">:</span> RequestListener <span class="token operator"><</span> Drawable <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onLoadFailed</span> <span class="token punctuation">(</span> e <span class="token operator">:</span> GlideException <span class="token operator">?</span> <span class="token punctuation">,</span> model <span class="token operator">:</span> Any <span class="token operator">?</span> <span class="token punctuation">,</span> target <span class="token operator">:</span> Target <span class="token operator"><</span> Drawable <span class="token operator">></span> <span class="token operator">?</span> <span class="token punctuation">,</span> isFirstResource <span class="token operator">:</span> Boolean <span class="token punctuation">)</span> <span class="token operator">:</span> Boolean <span class="token punctuation">{</span> item_user_veilLayout <span class="token punctuation">.</span> <span class="token function">unVeil</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onResourceReady</span> <span class="token punctuation">(</span> resource <span class="token operator">:</span> Drawable <span class="token operator">?</span> <span class="token punctuation">,</span> model <span class="token operator">:</span> Any <span class="token operator">?</span> <span class="token punctuation">,</span> target <span class="token operator">:</span> Target <span class="token operator"><</span> Drawable <span class="token operator">></span> <span class="token operator">?</span> <span class="token punctuation">,</span> dataSource <span class="token operator">:</span> DataSource <span class="token operator">?</span> <span class="token punctuation">,</span> isFirstResource <span class="token operator">:</span> Boolean <span class="token punctuation">)</span> <span class="token operator">:</span> Boolean <span class="token punctuation">{</span> item_user_veilLayout <span class="token punctuation">.</span> <span class="token function">unVeil</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">into</span> <span class="token punctuation">(</span> item_user_avatar <span class="token punctuation">)</span> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <com.skydoves.androidveil.VeilRecyclerFrameView android:id="@+id/veilRecyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:veilFrame_layout="@layout/item_profile" // sets to make veiling target layout app:veilFrame_veiled="true" // shows veils initially app:veilFrame_shimmerEnable="true" // sets shimmer enable app:veilFrame_baseColor="@android:color/holo_green_dark" // sets shimmer base color app:veilFrame_highlightColor="@android:color/holo_green_light" // sets shimmer highlight color app:veilFrame_baseAlpha="0.6" // sets shimmer base alpha value app:veilFrame_highlightAlpha="1.0" // sets shimmer highlight alpha value app:veilFrame_radius="8dp" // sets a corner radius of the whole veiled items /> |
We bind RecyclerView.Adapter and LayoutManager like VeilRecyclerFameView below.
1 2 3 | veilRecyclerView <span class="token punctuation">.</span> <span class="token function">setAdapter</span> <span class="token punctuation">(</span> adapter <span class="token punctuation">)</span> <span class="token comment">// sets your own adapter</span> veilRecyclerView <span class="token punctuation">.</span> <span class="token function">setLayoutManager</span> <span class="token punctuation">(</span> <span class="token function">LinearLayoutManager</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token comment">// sets LayoutManager</span> |
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.
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">val</span> shimmer <span class="token operator">=</span> Shimmer <span class="token punctuation">.</span> <span class="token function">ColorHighlightBuilder</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">setBaseColor</span> <span class="token punctuation">(</span> ContextCompat <span class="token punctuation">.</span> <span class="token function">getColor</span> <span class="token punctuation">(</span> context <span class="token punctuation">,</span> R <span class="token punctuation">.</span> color <span class="token punctuation">.</span> shimmerBase0 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">setHighlightColor</span> <span class="token punctuation">(</span> ContextCompat <span class="token punctuation">.</span> <span class="token function">getColor</span> <span class="token punctuation">(</span> context <span class="token punctuation">,</span> R <span class="token punctuation">.</span> color <span class="token punctuation">.</span> shimmerHighlight0 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">setBaseAlpha</span> <span class="token punctuation">(</span> <span class="token number">1f</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">setHighlightAlpha</span> <span class="token punctuation">(</span> <span class="token number">1f</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">build</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> veilLayout <span class="token punctuation">.</span> shimmer <span class="token operator">=</span> shimmer <span class="token comment">// sets shimmer to VeilLayout</span> veilRecyclerView <span class="token punctuation">.</span> shimmer <span class="token operator">=</span> shimmer <span class="token comment">// sets shimmer to VeilRecyclerView</span> |