Shimmer Animation in Android using Jetpack Compose

Shimmer Animation was created by Facebook to show the loading screen while images are fetched from the server. Now we see shimmer animation in lots of places. In this article, we will take a look at the implementation of shimmer animation using the all-new Jetpack Compose.

A sample GIF is given below to get an idea about what we are going to do in this article.

Prerequisites

• Basic Knowledge of Kotlin
• Basic knowledge of Jetpack Compose

Step by Step Implementation

Step 1 : Create a New Project

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Note: Select Kotlin as the programming language.

Step 2: Add Colors

Before moving to coding animation, add colors that shimmer animation will require. Open Colors.kt (Present in ui/theme/Colors.kt)

val ShimmerColorShades = listOf(
 Color.LightGray.copy(0.9f),
 Color.LightGray.copy(0.2f),
 Color.LightGray.copy(0.9f)
)

It's a list of background colors of compostable which is going to be animated, notice the color at index 1, this part will change its location, giving the shimmer effect.

Step 3: Working with the MainActivity.kt file

Create a composable function on which the animation will take place. Call the ShimmerItem which is going to animate, and pass the Brush object.

MainActivity.kt:

Output: