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.
Step by Step Implementation
Step 1:Create a New Project (Or use it in the existing Compose project)
To create a new project in the Android Studio Canary version, refer to the article How to Create a new Project in the Android Studio Canary Version with Jetpack Compose.
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(
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
Let’s create the animation. Create a new composable function.
Call the ShimmerItem which is going to animate, and pass the Brush object,
Step 4: Lay down the animated ShimmerItem onto the screen
In class MainActivity
And we are done. This is the final code for MainActivity.kt file.
Get the complete project.