Skip to content

ShimmerLayout and RecyclerView

Let us look at how to implement Shimmer effect in your app either as a Layout or in a RecyclerView while loading data. Here are some cool android shimmer libraries and examples.

ShimmerRecyclerView

ShimmerRecyclerView is 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.

Demos

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

  1. 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.

  2. You can achieve the second kind of shimmer effect by adding only one ViewGroup child to the ShimmerLayout with a transparent background. This ViewGroup will have the other views with nontransparent backgrounds on which the effect will be seen.

    You may wonder how can you add background to the root view of the ViewHolder, if you do not have direct access to the ShimmerLayout and the only child has a nontransparent background. The solution for this is to use the shimmer_demo_view_holder_item_background attribute.

Attributes and Methods

Following are the attributes and methods to initialise the demo views.

  • app:shimmer_demo_child_count : setDemoChildCount(int) :Integer value that sets the number of demo views should be present in shimmer adapter.
  • app:shimmer_demo_layout : setDemoLayoutReference(int) : Layout reference to your demo view. Define your my_demo_view.xml and refer the layout reference here.
  • app:shimmer_demo_layout_manager_type : setDemoLayoutManager(LayoutManagerType) : Layout manager of demo view. Can be one among linear_vertical or linear_horizontal or grid.
  • app:shimmer_demo_shimmer_color : - : Color reference or value. It can be used to change the color of the shimmer line.
  • app:shimmer_demo_angle : - : Integer value between 0 and 30 which can modify the angle of the shimmer line. The default value is zero.
  • app:shimmer_demo_mask_width : setDemoShimmerMaskWidth(float) : Float value between 0 and 1 which can modify the width of the shimmer line. The default value is 0.5.
  • app:shimmer_demo_view_holder_item_background : - : Color or an xml drawable for the ViewHolder background if you want to achieve the second type of shimmer effect.
  • app:shimmer_demo_reverse_animation : - : Defines whether the animation should be reversed. If it is true, then the animation starts from the right side of the View. Default value is false.

Step 1: Adding to your project

Add the following configuration in your build.gradle file. Be sure to specify jitpack as a maven url in your project-level build file, under the repositories closure. After that proceed to your app-level build file and declare ShimmerRecyclerView as a dependency.

repositories {
    jcenter()
    maven { url "https://jitpack.io" }
}
dependencies {
    implementation 'com.github.sharish:ShimmerRecyclerView:v1.3'
}

Step 2: Add to Layout

Define your xml as shown.

<com.cooltechworks.views.shimmer.ShimmerRecyclerView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/shimmer_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:shimmer_demo_child_count="10"
        app:shimmer_demo_grid_child_count="2"
        app:shimmer_demo_layout="@layout/layout_demo_grid"
        app:shimmer_demo_layout_manager_type="grid"
        app:shimmer_demo_angle="20"
        />

where @layout/layout_demo_grid refers to your sample layout that should be shown during loading spinner.

Step 3: Show Shimmer

Now on your activity onCreate, initialize the shimmer as below. We reference the ShimmerRecyclerView in this case using the findViewById method, passing in the id. Then invoke the showShimmerAdapter() function to show shimmer effects.

ShimmerRecyclerView shimmerRecycler = (ShimmerRecyclerView) findViewById(R.id.shimmer_recycler_view);
shimmerRecycler.showShimmerAdapter();

Full Example

We will then proceed and create a full example.

Here is a full example:

(a). ItemCard.kt

Create a model class known as ItemCard and initialize 4 properties: title, description and thumbnail url, as well as the summary text. This class will represent a single item in our recyclerview.

class ItemCard {

    var title: String? = null
    var description: String? = null
    var thumbnailUrl: String? = null
    var summaryText: String? = null
}

(b). CardAdapter.kt

We then need a recyclerview adapter defined. An adapter will enable us bind data to our recyclerview. Add imports. Then extend the Adapter from the RecyclerView class. Define a list of item cards and typelist as our private instance fields. Then override our typical recyclerview adapter functions: onCreateViewHolder, onBindViewHolder and getItemCount.

import android.support.v7.widget.RecyclerView
import android.view.ViewGroup
import com.cooltechworks.sample.models.ItemCard
import com.cooltechworks.sample.utils.BaseUtils
import com.cooltechworks.sample.viewholders.ItemHolder
import java.util.*

class CardAdapter : RecyclerView.Adapter<ItemHolder>() {

    private var mCards: List<ItemCard> = ArrayList()
    private var mType = BaseUtils.TYPE_LIST

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemHolder {
        return ItemHolder.newInstance(parent, mType)
    }

    override fun onBindViewHolder(holder: ItemHolder, position: Int) {
        holder.bind(mCards[position])
    }

    override fun getItemCount() = mCards.size


    fun setCards(cards: List<ItemCard>?) {
        if (cards == null) {
            return
        }

        mCards = cards
    }

    fun setType(type: Int) {
        this.mType = type
    }
}

(c). DemoActivity.kt

We then create a DemoActivity. In it define a function to load our Cards. Also set properties defined in our configuration such as theme and the content view. Then set the LayoutManager as well as the Adapter to the RecyclerView.

To show shimmer, invoke showShimmerAdapter().

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.RecyclerView
import com.cooltechworks.sample.adapters.CardAdapter
import com.cooltechworks.sample.utils.BaseUtils
import kotlinx.android.synthetic.main.activity_grid.*


class DemoActivity : AppCompatActivity() {

    private lateinit var mAdapter: CardAdapter

    private val type: Int
        get() = intent.getIntExtra(EXTRA_TYPE, BaseUtils.TYPE_LIST)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val type = type

        val layoutManager: RecyclerView.LayoutManager

        val demoConfiguration = BaseUtils.getDemoConfiguration(type, this)
        setTheme(demoConfiguration!!.styleResource)
        setContentView(demoConfiguration.layoutResource)
        layoutManager = demoConfiguration.layoutManager!!
        setTitle(demoConfiguration.titleResource)

        if (demoConfiguration.itemDecoration != null) {
            shimmer_recycler_view.addItemDecoration(demoConfiguration.itemDecoration)
        }

        mAdapter = CardAdapter()
        mAdapter.setType(type)

        shimmer_recycler_view.layoutManager = layoutManager
        shimmer_recycler_view.adapter = mAdapter
        shimmer_recycler_view.showShimmerAdapter()

        shimmer_recycler_view.postDelayed({ loadCards() }, 3000)
    }

    private fun loadCards() {
        val type = type

        mAdapter.setCards(BaseUtils.getCards(resources, type))
        shimmer_recycler_view.hideShimmerAdapter()
    }

    companion object {
        const val EXTRA_TYPE = "type"
    }
}

(d). MainActivity.kt

Finally we create Our MainActivity. It will be simple. We create two functions: one to create our listener while the other to start our demo by launching the DemoActivity. The createClickListener function will simply set the OnClick listener to our button. It will receive the Button, as well as the demo type as parameters. The start demo method will receive also the demo type. It will then instantiate an Intent targeting the DemoActivity and finally start that activity.

package com.cooltechworks.sample

import android.content.Intent
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.Button
import com.cooltechworks.sample.utils.BaseUtils
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        createClickListener(list_demo_button, BaseUtils.TYPE_LIST)
        createClickListener(grid_demo_button, BaseUtils.TYPE_GRID)
        createClickListener(list_second_demo_button, BaseUtils.TYPE_SECOND_LIST)
        createClickListener(grid_second_demo_button, BaseUtils.TYPE_SECOND_GRID)
    }

    private fun createClickListener(button: Button, demoType: Int) {
        button.setOnClickListener { startDemo(demoType) }
    }

    private fun startDemo(demoType: Int) {
        val intent = Intent(this, DemoActivity::class.java)
        intent.putExtra(DemoActivity.EXTRA_TYPE, demoType)
        startActivity(intent)
    }
}

Find full code here.

Reference

Read more here. Download code here. Follow code author here.

ShimmerLayout

ShimmerLayout can be used to add shimmer effect (like the one used at Facebook or at LinkedIn) to your Android application. Beside memory efficiency even animating a big layout, you can customize the behaviour and look of the animation. Check out the wiki for attributes!

ShimmerLayout

Step 1: Install

Get the latest artifact via gradle

implementation 'io.supercharge:shimmerlayout:2.1.0'

Step 2: Add to Layout

Create the layout on which you want to apply the effect and add as a child of a ShimmerLayout

<io.supercharge.shimmerlayout.ShimmerLayout
        android:id="@+id/shimmer_text"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        app:shimmer_animation_duration="1200">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="ShimmerLayout"
            android:textColor="@color/shimmer_background_color"
            android:textSize="26sp"/>
    </io.supercharge.shimmerlayout.ShimmerLayout>

Step 3: Start Shimmer Animation

Last, but not least you have to start it from your Java code

ShimmerLayout shimmerText = (ShimmerLayout) findViewById(R.id.shimmer_text);
shimmerText.startShimmerAnimation();

Full Example

Here is a full example showing how to use ShimmerLayout:

(a). activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <io.supercharge.shimmerlayout.ShimmerLayout
        android:id="@+id/shimmer_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="30dp"
        tools:context="io.supercharge.shimmeringlayout.MainActivity">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <View
                android:id="@+id/shimmer_avatar_1"
                android:layout_width="@dimen/monogram_width"
                android:layout_height="@dimen/monogram_width"
                android:layout_marginRight="11dp"
                android:background="@drawable/avatar_background"/>

            <View
                android:layout_width="130dp"
                android:layout_height="19dp"
                android:layout_alignTop="@+id/shimmer_avatar_1"
                android:layout_toRightOf="@+id/shimmer_avatar_1"
                android:background="@color/shimmer_background_color"/>

            <View
                android:id="@+id/shimmer_description_1"
                android:layout_width="39dp"
                android:layout_height="13dp"
                android:layout_alignBottom="@+id/shimmer_avatar_1"
                android:layout_toRightOf="@+id/shimmer_avatar_1"
                android:background="@color/shimmer_background_color"/>

            <View
                android:layout_width="101dp"
                android:layout_height="17dp"
                android:layout_alignBottom="@+id/shimmer_description_1"
                android:layout_alignParentRight="true"
                android:background="@color/shimmer_background_color"/>

            <View
                android:id="@+id/shimmer_divider_1"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_below="@+id/shimmer_avatar_1"
                android:layout_marginBottom="11dp"
                android:layout_marginTop="11dp"
                android:background="@color/shimmer_background_color"/>

            <View
                android:id="@+id/shimmer_avatar_2"
                android:layout_width="@dimen/monogram_width"
                android:layout_height="@dimen/monogram_width"
                android:layout_below="@+id/shimmer_divider_1"
                android:layout_marginRight="11dp"
                android:background="@drawable/avatar_background"/>

            <View
                android:layout_width="130dp"
                android:layout_height="19dp"
                android:layout_alignTop="@+id/shimmer_avatar_2"
                android:layout_toRightOf="@+id/shimmer_avatar_2"
                android:background="@color/shimmer_background_color"/>

            <View
                android:id="@+id/shimmer_description_2"
                android:layout_width="39dp"
                android:layout_height="13dp"
                android:layout_alignBottom="@+id/shimmer_avatar_2"
                android:layout_toRightOf="@+id/shimmer_avatar_2"
                android:background="@color/shimmer_background_color"/>

            <View
                android:layout_width="101dp"
                android:layout_height="17dp"
                android:layout_alignBottom="@+id/shimmer_description_2"
                android:layout_alignParentRight="true"
                android:background="@color/shimmer_background_color"/>

            <View
                android:id="@+id/shimmer_divider_2"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_below="@+id/shimmer_avatar_2"
                android:layout_marginBottom="11dp"
                android:layout_marginTop="11dp"
                android:background="@color/shimmer_background_color"/>

            <View
                android:id="@+id/shimmer_avatar_3"
                android:layout_width="@dimen/monogram_width"
                android:layout_height="@dimen/monogram_width"
                android:layout_below="@+id/shimmer_divider_2"
                android:layout_marginRight="11dp"
                android:background="@drawable/avatar_background"/>

            <View
                android:layout_width="130dp"
                android:layout_height="19dp"
                android:layout_alignTop="@+id/shimmer_avatar_3"
                android:layout_toRightOf="@+id/shimmer_avatar_3"
                android:background="@color/shimmer_background_color"/>

            <View
                android:id="@+id/shimmer_description_3"
                android:layout_width="39dp"
                android:layout_height="13dp"
                android:layout_alignBottom="@+id/shimmer_avatar_3"
                android:layout_toRightOf="@+id/shimmer_avatar_3"
                android:background="@color/shimmer_background_color"/>

            <View
                android:layout_width="101dp"
                android:layout_height="17dp"
                android:layout_alignBottom="@+id/shimmer_description_3"
                android:layout_alignParentRight="true"
                android:background="@color/shimmer_background_color"/>

            <View
                android:id="@+id/shimmer_divider_3"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_below="@+id/shimmer_avatar_3"
                android:layout_marginBottom="11dp"
                android:layout_marginTop="11dp"
                android:background="@color/shimmer_background_color"/>

            <View
                android:id="@+id/shimmer_avatar_4"
                android:layout_width="@dimen/monogram_width"
                android:layout_height="@dimen/monogram_width"
                android:layout_below="@+id/shimmer_divider_3"
                android:layout_marginRight="11dp"
                android:background="@drawable/avatar_background"/>

            <View
                android:layout_width="130dp"
                android:layout_height="19dp"
                android:layout_alignTop="@+id/shimmer_avatar_4"
                android:layout_toRightOf="@+id/shimmer_avatar_4"
                android:background="@color/shimmer_background_color"/>

            <View
                android:id="@+id/shimmer_description_4"
                android:layout_width="39dp"
                android:layout_height="13dp"
                android:layout_alignBottom="@+id/shimmer_avatar_4"
                android:layout_toRightOf="@+id/shimmer_avatar_4"
                android:background="@color/shimmer_background_color"/>

            <View
                android:layout_width="101dp"
                android:layout_height="17dp"
                android:layout_alignBottom="@+id/shimmer_description_4"
                android:layout_alignParentRight="true"
                android:background="@color/shimmer_background_color"/>

        </RelativeLayout>

    </io.supercharge.shimmerlayout.ShimmerLayout>

    <io.supercharge.shimmerlayout.ShimmerLayout
        android:id="@+id/shimmer_text"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        app:shimmer_animation_duration="1200"
        app:shimmer_auto_start="true">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="ShimmerLayout"
            android:textColor="@color/shimmer_background_color"
            android:textSize="26sp"/>
    </io.supercharge.shimmerlayout.ShimmerLayout>
</LinearLayout>

(b). MainActivity.java

package io.supercharge.shimmeringlayout;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import io.supercharge.shimmerlayout.ShimmerLayout;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ShimmerLayout shimmerLayout = findViewById(R.id.shimmer_layout);
        shimmerLayout.startShimmerAnimation();
    }
}

Reference

Read more here. Download code here. Follow code author here.

Shimmer Android by Facebook

An easy, flexible way to add a shimmering effect to any view in an Android app.

It is useful as an unobtrusive loading indicator, and was originally developed for Facebook Home.

Shimmer for Android is implemented as a layout, which means that you can simply nest any view inside a ShimmerFrameLayout tag, and call to start the animation from your code. That's all that is required. The layout will use the values you specify either on the tag (using custom attributes) or programmatically in your code, and generate an animation on the fly. See the API reference for further details.

Here's an example of a composite view, consisting of an image and some text below it, that shows the effect in action:

Shimmer

Install it

To include Shimmer in your project, add the following dependency:

// Gradle dependency on Shimmer for Android
dependencies {
  implementation 'com.facebook.shimmer:shimmer:0.5.0'
}

Or: 

  <!-- Maven dependency on Shimmer for Android -->
<dependency>
  <groupId>com.facebook.shimmer</groupId>
  <artifactId>shimmer</artifactId>
  <version>0.5.0</version>
</dependency>

Note that you cannot use the custom attributes on the tag if you use the Jar file. You can instead download the AAR file and reference that locally in your project.

Building

You can use the included Gradle wrapper to build the Shimmer library and sample application locally as well. Check out the code at github.com/facebook/shimmer-android.

# Install the latest code to your local repository
./gradlew shimmer:installArchives

# Install the sample app
./gradlew sample:installDebug

Step 2: Add to Layout

The following snippet shows how you can use ShimmerFrameLayout

<com.facebook.shimmer.ShimmerFrameLayout
     android:id="@+id/shimmer_view_container"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
>
     ...(your complex view here)...
</com.facebook.shimmer.ShimmerFrameLayout>

And thats it! If you specify auto-start to be false, then you can start the animation in code:

ShimmerFrameLayout container =
  (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.startShimmer(); // If auto-start is set to false

Attributes

You can control the look and pace of the effect using a number of custom attributes on the ShimmerFrameLayout tag. Alternatively, you can set these values on the layout object itself. For a comprehensive list, check out the API reference

Clip to Children : Whether to clip the shimmering effect to the children, or to opaquely draw the shimmer on top of the children. Use this if your overall layout contains transparency.

Colored : Whether you want the shimmer to affect just the alpha or draw colors on-top of the children.

Base Color : If colored is specified, the base color of the content.

Highlight Color : If colored is specified, the shimmer's highlight color.

Base Alpha : If colored is not specified, the alpha used to render the base view i.e. the unhighlighted view over which the highlight is drawn.

Highlight Alpha: If colored is not specified, the alpha of the shimmer highlight.

Auto Start : Whether to automatically start the animation when the view is shown, or not.

Duration : Time it takes for the highlight to move from one end of the layout to the other.

Repeat Count : Number of times of the current animation will repeat.

Repeat Delay : Delay after which the current animation will repeat.

Repeat Mode : What the animation should do after reaching the end, either restart from the beginning or reverse back towards it.

Direction : The travel direction of the shimmer highlight: left to right, top to bottom, right to left or bottom to top.

Dropoff : Controls the size of the fading edge of the highlight.

Intensity : Controls the brightness of the highlight at the center

Shape : Shape of the highlight mask, either with a linear or a circular gradient.

Tilt : Angle at which the highlight is tilted, measured in degrees

Fixed Width, Height : Fixed sized highlight mask, if set, overrides the relative size value

Width, Height ratio : Size of the highlight mask, relative to the layout it is applied to.

Full Example

Here is a full example:

main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/background"
  android:padding="20dp">

  <com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmer_view_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.5"
    app:shimmer_duration="1000">

    <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:orientation="vertical">

      <ImageView
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:src="@drawable/fb_logo" />

      <TextView
        style="@style/thin.white.large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:text="@string/mission_statement" />
    </LinearLayout>
  </com.facebook.shimmer.ShimmerFrameLayout>

  <TextView
    android:id="@+id/preset"
    style="@style/thin.white.small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="20dp"
    android:layout_marginRight="20dp"
    android:text="@string/presets"
    android:textAllCaps="true"
    app:layout_constraintBottom_toBottomOf="@id/preset_scroll_view"
    app:layout_constraintEnd_toStartOf="@id/preset_scroll_view"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@id/preset_scroll_view" />

  <HorizontalScrollView
    android:id="@+id/preset_scroll_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constrainedWidth="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/preset"
    app:layout_constraintTop_toBottomOf="@id/shimmer_view_container">

    <LinearLayout
      android:id="@+id/settings_container"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      android:gravity="center_vertical"
      android:orientation="horizontal">

      <Button
        android:id="@+id/preset_button0"
        style="@style/thin.white.small.button"
        android:gravity="center"
        android:text="1" />

      <Button
        android:id="@+id/preset_button1"
        style="@style/thin.white.small.button"
        android:gravity="center"
        android:text="2" />

      <Button
        android:id="@+id/preset_button2"
        style="@style/thin.white.small.button"
        android:gravity="center"
        android:text="3" />

      <Button
        android:id="@+id/preset_button3"
        style="@style/thin.white.small.button"
        android:gravity="center"
        android:text="4" />

      <Button
        android:id="@+id/preset_button4"
        style="@style/thin.white.small.button"
        android:gravity="center"
        android:text="5" />

      <Button
        android:id="@+id/preset_button5"
        style="@style/thin.white.small.button"
        android:gravity="center"
        android:text="6" />

      <Button
        android:id="@+id/preset_button6"
        style="@style/thin.white.small.button"
        android:gravity="center"
        android:text="Off" />
    </LinearLayout>
  </HorizontalScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

package com.facebook.shimmer.sample

import android.animation.ValueAnimator
import android.app.Activity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.Toast
import com.facebook.shimmer.Shimmer
import com.facebook.shimmer.ShimmerFrameLayout
import kotlinx.android.synthetic.main.main.*

class MainActivity : Activity(), View.OnClickListener {
  private lateinit var shimmerViewContainer: ShimmerFrameLayout
  private lateinit var presetButtons: Array<Button>
  private var currentPreset = -1
  private var toast: Toast? = null

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)
    shimmerViewContainer = shimmer_view_container
    presetButtons =
        arrayOf(
            preset_button0,
            preset_button1,
            preset_button2,
            preset_button3,
            preset_button4,
            preset_button5,
            preset_button6)
    presetButtons.forEach { it.setOnClickListener(this@MainActivity) }
    selectPreset(0, false)
  }

  override fun onClick(v: View) {
    selectPreset(presetButtons.indexOf(v as Button), true)
  }

  public override fun onResume() {
    super.onResume()
    shimmerViewContainer.startShimmer()
  }

  public override fun onPause() {
    shimmerViewContainer.stopShimmer()
    super.onPause()
  }

  private fun selectPreset(preset: Int, showToast: Boolean) {
    if (currentPreset == preset) {
      return
    }

    if (currentPreset >= 0) {
      presetButtons[currentPreset].setBackgroundResource(R.color.preset_button_background)
    }
    currentPreset = preset
    presetButtons[currentPreset].setBackgroundResource(R.color.preset_button_background_selected)

    // If a toast is already showing, hide it
    toast?.cancel()

    val shimmerBuilder = Shimmer.AlphaHighlightBuilder()
    shimmerViewContainer.setShimmer(
        when (preset) {
          1 -> {
            // Slow and reverse
            toast = Toast.makeText(this, "Slow and reverse", Toast.LENGTH_SHORT)
            shimmerBuilder.setDuration(5000L).setRepeatMode(ValueAnimator.REVERSE)
          }
          2 -> {
            // Thin, straight and transparent
            toast = Toast.makeText(this, "Thin, straight and transparent", Toast.LENGTH_SHORT)
            shimmerBuilder.setBaseAlpha(0.1f).setDropoff(0.1f).setTilt(0f)
          }
          3 -> {
            // Sweep angle 90
            toast = Toast.makeText(this, "Sweep angle 90", Toast.LENGTH_SHORT)
            shimmerBuilder.setDirection(Shimmer.Direction.TOP_TO_BOTTOM).setTilt(0f)
          }
          4 -> {
            // Spotlight
            toast = Toast.makeText(this, "Spotlight", Toast.LENGTH_SHORT)
            shimmerBuilder
                .setBaseAlpha(0f)
                .setDuration(2000L)
                .setDropoff(0.1f)
                .setIntensity(0.35f)
                .setShape(Shimmer.Shape.RADIAL)
          }
          5 -> {
            // Spotlight angle 45
            toast = Toast.makeText(this, "Spotlight angle 45", Toast.LENGTH_SHORT)
            shimmerBuilder
                .setBaseAlpha(0f)
                .setDuration(2000L)
                .setDropoff(0.1f)
                .setIntensity(0.35f)
                .setTilt(45f)
                .setShape(Shimmer.Shape.RADIAL)
          }
          6 -> {
            // Off
            toast = Toast.makeText(this, "Off", Toast.LENGTH_SHORT)
            null
          }
          else -> {
            toast = Toast.makeText(this, "Default", Toast.LENGTH_SHORT)
            shimmerBuilder
          }
        }?.build())

    // Show toast describing the chosen preset, if necessary
    if (showToast) {
      toast?.show()
    }
  }
}

Reference

Read more here or here. Download code here. Follow code author here.