skydoves/AndroidVeil

:performing_arts: An easy and flexible way to implement loading skeletons and shimmering effects on layouts for Android.

AndroidVeil

An easy, flexible way to implement veil skeletons and shimmering effect for Android.

Download

Gradle

Add the dependency below to your module's build.gradle file:

dependencies {
    implementation("com.github.skydoves:androidveil:1.1.4")
}

Usage

First, add following XML namespace inside your XML layout file:

xmlns:app="http://schemas.android.com/apk/res-auto"

VeilLayout in layout

<com.skydoves.androidveil.VeilLayout
      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 >

      <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="And now here is my secret, a very simple secret"
         android:textColor="@android:color/white"
         android:textSize="22sp"/>

      <!-- Skip -->    

</com.skydoves.androidveil.VeilLayout>

Veil and UnVeil

We can implement veiled skeletons using below methods.

veilLayout.veil()
veilLayout.unVeil()

Implement veils using layout resource

We can implement veiled skeletons using the layout resource.

veilLayout.layout = R.layout.layout_item_test

VeilRecyclerFrameView

VeilRecyclerFrameView implements veiled skeletons for RecyclerView with the shimmer effect.

VeilRecyclerFrameView in layout

<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 
        app:veilFrame_isItemWrapContentHeight="true"  // sets height of list item wrap_content
        app:veilFrame_isItemWrapContentWidth="true"   // sets width of list item wrap_content />

And we should attach our own adapter and LayoutManager.

veilRecyclerView.setAdapter(adapter) // sets your own adapter
veilRecyclerView.setLayoutManager(LinearLayoutManager(this)) // sets LayoutManager
veilRecyclerView.addVeiledItems(15) // add veiled 15 items

VeilRecyclerFrameView with a horizontal carousel

Automatically masking a horizontal layout is not supported yet. Horizontal (carousel) layouts can be used if you specify their shimmer layout yourself in advance (and tell the view to use this prepared layout by setting isPrepared = true). See CarouselActivity for an example

veilRecyclerView.setVeilLayout(
  layout = R.layout.item_prepared_shimmer_carousel,
  isPrepared = true
)
veilRecyclerView.setAdapter(adapter)
veilRecyclerView.setLayoutManager(LinearLayoutManager(this, RecyclerView.HORIZONTAL, false))
addVeiledItems(15)

Veil and UnVeil

We can implement veiled skeletons using below methods.

veilRecyclerView.veil() // shows veil skeletons
veilRecyclerView.unVeil() // disappear veils and shows your own recyclerView

RecyclerView

We can access our Recyclerview and veiledRecyclerView using the below methods.

veilRecyclerView.getRecyclerView() // veilRecyclerView.getRecyclerView().setHasFixedSize(true)
veilRecyclerView.getVeiledRecyclerView()

Shimmer

This library using shimmer-android by Facebook.
Here are the detail shimmer-instruction about shimmer or you can reference below examples.

create using Builder

This is how to create Shimmer's instance using Shimmer.Builder class.

val shimmer = Shimmer.ColorHighlightBuilder()
      .setBaseColor(ContextCompat.getColor(context, R.color.shimmerBase0))
      .setHighlightColor(ContextCompat.getColor(context, R.color.shimmerHighlight0))
      .setBaseAlpha(1f)
      .setHighlightAlpha(1f)
      .build()

veilLayout.shimmer = shimmer // sets shimmer to VeilLayout
veilRecyclerView.shimmer = shimmer // sets shimmer to VeilRecyclerView

create using kotlin dsl

This is how to create Shimmer's instance using kotlin dsl.

val shimmer_alpha = alphaShimmer {
      setBaseAlpha(1.0f)
      setHighlightAlpha(0.5f)
}
val shimmer_color = colorShimmer {
      setBaseAlpha(1.0f)
      setHighlightAlpha(0.5f)
      setBaseColor(ContextCompat.getColor(context, R.color.colorPrimary))
      setHighlightColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))
}

AndroidVeil Attributes

Attributes	Type	Default	Description
veiled	Boolean	false	shows veils initially.
layout	Int	-1	implement veils using the layout resource.
radius	dimension	8dp	sets corner radius to the veil items.
drawable	Drawable	null	sets background drawable to the veil items.
shimmerEnable	Boolean	true	sets shimmer enable.
baseColor	ColorInt	Color.LTGRAY	sets shimmer base color.
highlightColor	ColorInt	Color.DKGRAY	sets shimmer highlight color.
baseAlpha	Float	1.0f	sets shimmer base alpha value.
highlightAlpha	Float	1.0f	sets shimmer highlight alpha value.
dropOff	Float	0.5f	sets how quickly the shimmer's gradient drops-off.
defaultChildVisible	Boolean	false	sets the child view's visibility when called veil and unveil.
isItemWrapContentHeight	Boolean	false	sets height of veiled list item wrap_content
isItemWrapContentWidth	Boolean	false	sets width of veiled list item wrap_content

Find this repository useful? ❤️

Support it by joining stargazers for this repository. ⭐
Also follow me for my next creations! 🤩

License

Copyright 2018 skydoves

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.