Jetpack Compose Loading Animation

Jetpack Compose Loading Animation 1 (with Source Code)

by
Jetpack Compose Loading Animation

This is a Jetpack Compose loading animation. It consists of a circle with a border. The circle is made with the Box layout. Its border is set with Modifier.border() method. The border’s alpha value and the circle’s scale is animated. The source code is available for free below.

The animation utilizes several Jetpack Compose APIs like animateFloatAsState, infiniteRepeatable, tween, etc. The circleScale variable is used to manage the state of the circle’s scale value. Initially, its value is 0f. When the app is launched, its value will be changed to 1f. The circleScaleAnimate is for animating the box. It is an infinite animation. It lasts forever.

The Jetpack Compose loading animation takes 2 arguments – circleColor and animationDelay. The circleColor is for the box’s border and animationDelay is the animation duration. You can change them according to your requirements.

I’m using the infiniteRepeatable to create the infinite animation. It takes animation spec. I’m passing the tween method. It accepts durationMillis which is the animation duration. The circle that actually gets animated is made with the Box layout. Its scale and alpha (opacity) values are updated every single frame.

Before using the code, make sure that you are using the latest Android Studio. Jetpack Compose doesn’t work in the older versions.

Final Output:

If the video isn’t working, watch it on the YouTube.

Helpful Links to Understand the Code:

Resources Used in the Project:

Here are the Gradle files used in the project.

Jetpack Compose Loading Animation Source Code:

MainActivity.kt:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.*
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

/*
You can use the following code for commercial purposes with some restrictions.
Read the full license here: https://semicolonspace.com/semicolonspace-license/
For more designs with source code, visit:
https://semicolonspace.com/jetpack-compose-samples/
 */
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme(darkTheme = false) {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    LoadingAnimation1()
                }
            }
        }
    }
}

@Composable
fun LoadingAnimation1(
    circleColor: Color = Color.Magenta,
    animationDelay: Int = 1000
) {

    // circle's scale state
    var circleScale by remember {
        mutableStateOf(0f)
    }

    // animation
    val circleScaleAnimate = animateFloatAsState(
        targetValue = circleScale,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = animationDelay
            )
        )
    )

    // This is called when the app is launched
    LaunchedEffect(Unit) {
        circleScale = 1f
    }

    // animating circle
    Box(
        modifier = Modifier
            .size(size = 64.dp)
            .scale(scale = circleScaleAnimate.value)
            .border(
                width = 4.dp,
                color = circleColor.copy(alpha = 1 - circleScaleAnimate.value),
                shape = CircleShape
            )
    ) {

    }
}

Related:

Leave a Comment