Issue with Circular Progress Bar animation based on derived state in Jetpack Compose

Question

I'm building a habit tracking app using Jetpack Compose and I'm facing an issue with animating a Circular Progress Bar based on derived state. The goal is to animate the progress bar based on the ratio of checked habits to total habits, and the progress should update whenever the values change.

Here's what I've tried:

1. I have a ProgressCard composable that calculates the progress using derived state and animateFloatAsState.

2. I'm observing the checkedHabits and totalHabits values from a ViewModel as Flow values using collectAsState.

3. I'm using the derived state approach to calculate the progress and handle NaN values by setting an initial value.

Here is the relevant code.

CircularProgressbar.kt:

package com.shahzaman.habitslog.habitFeature.presentation.components

import android.content.ContentValues.TAG
import android.util.Log
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

@Composable
fun CircularProgressbar(
    progress: Float = 0f,
    size: Dp = 60.dp,
    thickness: Dp = 8.dp,
    animationDuration: Int = 1000,
    animationDelay: Int = 0,
    foregroundIndicatorColor: Color = MaterialTheme.colorScheme.primary,
    backgroundIndicatorColor: Color = foregroundIndicatorColor.copy(alpha = 0.5f),
    extraSizeForegroundIndicator: Dp = 6.dp
) {

    Log.d(TAG, "CircularProgressbar: $progress")
    // It remembers the number value
    var numberR by remember {
        mutableStateOf(-1f)
    }

    // Number Animation
    val animateNumber = animateFloatAsState(
        targetValue = numberR,
        animationSpec = tween(
            durationMillis = animationDuration,
            delayMillis = animationDelay
        ), label = ""
    )

    // This is to start the animation when the activity is opened
    LaunchedEffect(Unit) {
        numberR = progress
    }

    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .size(size = size)
    ) {
        Canvas(
            modifier = Modifier
                .size(size = size)
        ) {

            // Background circle
            drawCircle(
                color = backgroundIndicatorColor,
                radius = size.toPx() / 2,
                style = Stroke(width = thickness.toPx(), cap = StrokeCap.Round)
            )

            val sweepAngle = (animateNumber.value / 100) * 360

            // Foreground circle
            drawArc(
                color = foregroundIndicatorColor,
                startAngle = -90f,
                sweepAngle = sweepAngle,
                useCenter = false,
                style = Stroke(
                    (thickness + extraSizeForegroundIndicator).toPx(),
                    cap = StrokeCap.Butt
                )
            )
        }

        // Text that shows number inside the circle
        Text(
            text = (animateNumber.value).toInt().toString() + "%",
            style = MaterialTheme.typography.titleMedium
        )
    }
}

Preogress card:

package com.shahzaman.habitslog.habitFeature.presentation.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.shahzaman.habitslog.habitFeature.presentation.ui.theme.Patua_One

@Composable
fun ProgressCard(
    modifier: Modifier,
    totalHabits: Int,
    checkedHabits: Int,
) {
    val progress: Float = remember(checkedHabits, totalHabits) {
        val calculatedProgress = (checkedHabits.toFloat() / totalHabits.toFloat()) * 100f
        if (calculatedProgress.isNaN()) {
            0f
        } else {
            calculatedProgress
        }
    }

    Card(
        modifier = modifier
            .fillMaxWidth(),
        shape = MaterialTheme.shapes.large
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column(
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "You are almost there!",
                    style = MaterialTheme.typography.bodyLarge.copy(
                        fontFamily = Patua_One
                    )
                )
                Spacer(modifier = Modifier.height(6.dp))
                Text(
                    text = "${checkedHabits}/${totalHabits} day goals completed",
                    style = MaterialTheme.typography.labelLarge
                )
            }
            CircularProgressbar(
                progress = progress
            )
        }
    }
}

ViewModel:

val totalHabits by viewModel.getTotalHabits().collectAsState(initial = 0)
val checkedHabits by viewModel.getCheckedHabits().collectAsState(initial = 0)

Additional Information:

• I've ensured that the checkedHabits and totalHabits values are correctly updating and reflecting the changes in the ViewModel.
• I've tried using an initial value of 0 for the progress calculation to avoid NaN values, but this doesn't seem to solve the animation issue.
• I've also checked if there's any conflict or issue with other parts of my code that might affect the animation, but I couldn't find any.

Question:

1. Is there a specific way I should structure the ProgressCard composable or the ViewModel to ensure the derived state calculation and animation work seamlessly?
2. Are there any known issues or limitations when using animateFloatAsState in combination with derived state calculations that might be causing this behavior?
3. Could the issue be related to how I'm collecting the Flow values from the ViewModel using collectAsState? Should I use a different approach to observe these values?
4. Are there any best practices for debugging animation-related issues in Jetpack Compose, such as how to log animation progress or troubleshoot possible conflicts?

Any guidance or suggestions to help me resolve this issue and ensure that the Circular Progress Bar animates smoothly based on derived state would be highly appreciated.

Thank you in advance for your assistance!

Answer 1

I have created an example for you. which shows a complete demo. You can customize as per your choice.

Check out the code

import androidx.compose.runtime.Composable
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp


@Composable
fun Ex14() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {

        val currentIndex = remember { mutableStateOf(0) }
        val totalIndex = remember { mutableStateOf(5) }
        val bigTextSuffix = remember { mutableStateOf("0/5") }
        val status = remember { mutableStateOf("Remaining") }

        CustomComponent(
            indicatorValue = currentIndex.value * 20,
            maxIndicatorValue = 100,
            bigTextSuffix = bigTextSuffix.value,
            smallText = status.value
        )
        if (currentIndex.value == totalIndex.value) {
            status.value = "Done"
        }

        Button(onClick = {
            if (currentIndex.value < totalIndex.value) {
                currentIndex.value = currentIndex.value + 1
                bigTextSuffix.value = "${currentIndex.value}/${totalIndex.value}"
            }
        }) {
            Text("Click")
        }

    }
}


@Composable
fun CustomComponent(
    canvasSize: Dp = 300.dp,
    indicatorValue: Int = 0,
    maxIndicatorValue: Int = 100,
    backgroundIndicatorColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.1f),
    backgroundIndicatorStrokeWidth: Float = 10f,
    foregroundIndicatorColor: Color = MaterialTheme.colors.primary,
    foregroundIndicatorStrokeWidth: Float = 10f,
    bigTextFontSize: TextUnit = MaterialTheme.typography.h3.fontSize,
    bigTextColor: Color = MaterialTheme.colors.onSurface,
    bigTextSuffix: String = "0/0",
    smallText: String = "Remaining",
    smallTextFontSize: TextUnit = MaterialTheme.typography.h6.fontSize,
    smallTextColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.3f)
) {
    var allowedIndicatorValue by remember {
        mutableStateOf(maxIndicatorValue)
    }
    allowedIndicatorValue = if (indicatorValue <= maxIndicatorValue) {
        indicatorValue
    } else {
        maxIndicatorValue
    }

    var animatedIndicatorValue by remember { mutableStateOf(0f) }
    LaunchedEffect(key1 = allowedIndicatorValue) {
        animatedIndicatorValue = allowedIndicatorValue.toFloat()
    }

    val percentage =
        (animatedIndicatorValue / maxIndicatorValue) * 100

    val sweepAngle by animateFloatAsState(
        targetValue = (3.6 * percentage).toFloat(),
        animationSpec = tween(1000), label = "sweep"
    )

    val animatedBigTextColor by animateColorAsState(
        targetValue = if (allowedIndicatorValue == 0)
            MaterialTheme.colors.onSurface.copy(alpha = 0.3f)
        else
            bigTextColor,
        animationSpec = tween(1000)
    )

    Column(
        modifier = Modifier
            .size(canvasSize)
            .drawBehind {
                val componentSize = size / 1.25f
                backgroundIndicator(
                    componentSize = componentSize,
                    indicatorColor = backgroundIndicatorColor,
                    indicatorStrokeWidth = backgroundIndicatorStrokeWidth,
                )
                foregroundIndicator(
                    sweepAngle = sweepAngle,
                    componentSize = componentSize,
                    indicatorColor = foregroundIndicatorColor,
                    indicatorStrokeWidth = foregroundIndicatorStrokeWidth,
                )
            },
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        EmbeddedElements(
            bigText = bigTextSuffix,
            bigTextFontSize = bigTextFontSize,
            bigTextColor = animatedBigTextColor,
            smallText = smallText,
            smallTextColor = smallTextColor,
            smallTextFontSize = smallTextFontSize
        )
    }
}

fun DrawScope.backgroundIndicator(
    componentSize: Size,
    indicatorColor: Color,
    indicatorStrokeWidth: Float,
) {
    drawArc(
        size = componentSize,
        color = indicatorColor,
        startAngle = 0f,
        sweepAngle = 360f,
        useCenter = false,
        style = Stroke(
            width = indicatorStrokeWidth,
            cap = StrokeCap.Round
        ),
        topLeft = Offset(
            x = (size.width - componentSize.width) / 2f,
            y = (size.height - componentSize.height) / 2f
        )
    )
}

fun DrawScope.foregroundIndicator(
    sweepAngle: Float,
    componentSize: Size,
    indicatorColor: Color,
    indicatorStrokeWidth: Float,
) {
    drawArc(
        size = componentSize,
        color = indicatorColor,
        startAngle = 0f,
        sweepAngle = sweepAngle,
        useCenter = false,
        style = Stroke(
            width = indicatorStrokeWidth,
            cap = StrokeCap.Round
        ),
        topLeft = Offset(
            x = (size.width - componentSize.width) / 2f,
            y = (size.height - componentSize.height) / 2f
        )
    )
}

@Composable
fun EmbeddedElements(
    bigText: String,
    bigTextFontSize: TextUnit,
    bigTextColor: Color,
    smallText: String,
    smallTextColor: Color,
    smallTextFontSize: TextUnit
) {
    Text(
        text = smallText,
        color = smallTextColor,
        fontSize = smallTextFontSize,
        textAlign = TextAlign.Center
    )
    Text(
        text = "$bigText",
        color = bigTextColor,
        fontSize = bigTextFontSize,
        textAlign = TextAlign.Center,
        fontWeight = FontWeight.Bold
    )
}

Outputs

Hope It Solves Your Problem !!