📱Dynamic Progress Bar in Jetpack Compose🚀

Introduction
Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android bringing your apps to life with less code, powerful tools, and intuitive Kotlin APIs. It makes building Android UI faster and easier

• Table of Contents
  1. Prerequisites
  2. Setting Up Jetpack Compose
  3. Designing the Custom Progress Bar
  — Defining the Gradient
  — Initializing Progress Factor
  — Styling the Row Container
  — Creating the Progress Button
  4. Putting It All Together
  5. Results
  6. Conclusion

1. Prerequisites
   Before we begin, make sure you have a basic understanding of Kotlin programming and Android development. Familiarity with Jetpack Compose concepts will also be beneficial.

2. Setting Up Jetpack Compose
To get started, create a new Composable function called `showProgress` in your Jetpack Compose project. This function will serve as the foundation for our custom progress bar.

@Preview
@Composable
fun showProgress(score: Int = 100) {
    // Code...
}

3. Designing the Custom Progress Bar

3.1 Defining the Gradient
We’ll begin by defining a gradient that will be used for the progress button’s background. In this example, we’re using a linear gradient with two colors.

val gradient = Brush.linearGradient(
    colors = listOf(
        Color(0xFFF95075),
        Color(0xFFBE6BE5)
    )
)

3.2 Initializing Progress Factor
We’ll use a `mutableStateOf` to track the progress factor, which determines the width of the progress button based on the score.

val progressFactor by remember(score) {
    mutableStateOf(score * 0.005f)
}

3.3 Styling the Row Container
Let’s style the outer row container that holds our progress button. We’ll use a combination of modifiers to achieve the desired appearance.

Row(
    modifier = Modifier
        .padding(8.dp)
        .fillMaxWidth().height(45.dp)
        .border(
            width = 4.dp,
            brush = Brush.linearGradient(
                colors = listOf(
                    AppColors.mLightPurple,
                    AppColors.mLightPurple
                )
            ),
            shape = RoundedCornerShape(50.dp)
        )
        .clip(
            RoundedCornerShape(
                topStartPercent = 50,
                topEndPercent = 50,
                bottomEndPercent = 50,
                bottomStartPercent = 50
            )
        )
        .background(Color.Transparent),
    verticalAlignment = Alignment.CenterVertically
) {
    // Progress button goes here...
}

3.4 Creating the Progress Button
Now, we’ll define the progress button itself. This button represents the progress visually, and its width will be determined by the `progressFactor`.

Button(
    onClick = { },
    modifier = Modifier
        .fillMaxWidth(progressFactor)
        .background(brush = gradient),
    enabled = false,
    elevation = null,
    colors = buttonColors(
        containerColor = Color.Transparent,
        disabledContainerColor = Color.Transparent
    )
) {
    Text(
        text = (score * 10).toString(),
        modifier = Modifier
            .clip(shape = RoundedCornerShape(23.dp))
            .fillMaxHeight(0.87f)
            .fillMaxWidth()
            .padding(7.dp),
        color = AppColors.mOffWhite,
        textAlign = TextAlign.Center
    )
}

4. Putting It All Together
With the code pieces in place, you’ve successfully created a custom progress bar using Jetpack Compose! You can now customize the colors, shapes, and other properties to match your app’s design.

@Preview
@Composable
fun showProgress(score : Int =100){


    val gradient = Brush.linearGradient(listOf(Color(0xFFF95075),
                                                Color(0xFFBE6BE5)))


    val progressFactor by remember(score) {
        mutableStateOf(score*0.005f)
    }

    Row(modifier = Modifier
        .padding(8.dp)
        .fillMaxWidth().height(45.dp).border(
            width = 4.dp,
            brush = Brush.linearGradient(
                colors = listOf(
                    AppColors.mLightPurple,
                    AppColors.mLightPurple
                )
            ) ,
            shape = RoundedCornerShape(50.dp)
        )
        .clip(
            RoundedCornerShape(
                topStartPercent = 50,
                topEndPercent = 50,
                bottomEndPercent = 50,
                bottomStartPercent = 50
            )
        )
        .background(Color.Transparent),
        verticalAlignment = Alignment.CenterVertically
        ) {

        Button(
            contentPadding = PaddingValues(1.dp),
            onClick = { },
        modifier = Modifier
            .fillMaxWidth(progressFactor)
            .background(brush = gradient),
            enabled = false,
        elevation = null,
        colors = buttonColors(
            containerColor = Color.Transparent,
            disabledContainerColor = Color.Transparent
        )) {

            Text(text = (score * 10).toString(),
            modifier = Modifier
                .clip(shape = RoundedCornerShape(23.dp))
                .fillMaxHeight(0.87f)
                .fillMaxWidth()
                .padding(7.dp),
            color=AppColors.mOffWhite,
            textAlign = TextAlign.Center)
        }
    }
}

5.Results

Now you can play around test your custom progress bar with differnt score passing as the parameter in the function.

Score 25: At the lower end of the spectrum, the progress bar represents a minimal progress level.

Score 100: As the score increases, the progress bar dynamically expands, filling the width with vibrant color. This engaging animation provides users with clear feedback on their progress.

Score 180: At higher scores, the progress bar fully extends, delivering a sense of completion.

6. Conclusion

mutableStateOf:

• mutableStateOf is a function that creates a mutable state holder for a value. It provides a way to hold a value that can be modified over time, and Compose automatically recomposes the UI whenever the value changes.

remember:

• remember is a Composable function that allows you to store a value that survives across recompositions.

Here we have created a dynamic custom progress bar in jetpack Compose , by understanding the code in the form of small modules . We have used modifiers and multiple styling options to customise it. We have also added the gradient look to out progress bar to make it more attaractive and appealing.