Shimmer & Shadow Loading Effect Animation with Jetpack Compose

The article aims to show how to create a shimmer & shadow loading effect animation with native Jetpack Compose for light and dark modes in Android applications. For any concerns about the article, contact me here. 🤝

The story has a GitHub project: https://github.com/canerkaseler/jetpack-compose-shimmer-loading-animation 📂

I will create a basic Android application with only Jetpack Compose in this article. This app will include some general placeholders for some general use cases such as a news image, title, subtitle, user image, etc.

In addition, the app will include two buttons. The first one is to start or stop the shimmer animation. Another one is to show dark mode shimmer loading animation.

Basically, the final output will be this:

The full version of the Shimmer Loading Effect Animation.

If you would like to jump into a specific topic, this is the table of contents:

1. Design of the Application
2. Creating Shimmer Loading Effect Animation for Light and Dark Modes
3. Manage Shimmer Loading Effect Animation and Display Modes

1) Design of the Application

In this section, I do not want to focus too much on design. Generally, we need some placeholders for UI components. That is why I created three major placeholders. For example:

Three example placeholder components.

The target is having image + title + subtitle, placeholder groups. On the code side, I would like to separate them from each other. I created a new Kotlin file as HomeScreen.kt and I am calling it from MainActivity.kt:

// File: MainActivity.kt

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.runtime.Composable

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {…