Android Jetpack Compose - Dynamic Progress Bar with Text
Last Updated :
28 Apr, 2025
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
This toolkit offers a wide range of pre-built UI components, allowing developers to easily design interactive and visually appealing apps. Jetpack Compose also embraces a reactive programming model, automatically updating UI elements when underlying data changes, which enhances code maintainability and reduces boilerplate code.
What are we going to build today using Jetpack Compose?
Here we are going to build out a custom progress bar with a gradient background in jetpack compose. These results clearly show that changing the values of the score in the function changes the progress of the bar in output screen. One can check on the multiple values in the function showProgres( ) to observe the changes in the progress bar. In this article i have guided you to create this UI element that you can further use in other applications as well.
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.
Step by Step implementation
Step 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. Compose's approach ensures that your UI automatically updates in response to state changes, making your codebase more maintainable and reducing boilerplate. Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development.
In summary, Jetpack Compose is a powerful framework that empowers Android developers to create modern, efficient, and highly customizable user interfaces for their apps.
Step 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.
Kotlin
@Preview // Preview keyoword is used to observe the changes in the UI in realtime
@Composable
fun showProgress(score: Int = 100) { // passing score as the function parameter
// Code...
}
Step 3: Designing the Custom Progress Bar
Step 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.
Kotlin
val gradient = Brush.linearGradient(
// adding list of two colors to form the
// background gradient of the progress bar
colors = listOf(
Color(0xFFF95075),
Color(0xFFBE6BE5)
)
// you can add any color combination as per your choice
)
Step 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.
Kotlin
// Calculate the progress factor based on the score
val progressFactor by remember(score) {
mutableStateOf(score * 0.005f)
}
Step 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.
Kotlin
// Create the outer row container
Row(
modifier = Modifier
.padding(8.dp) //adding padding to it
.fillMaxWidth().height(45.dp)
.border(
width = 4.dp,
brush = Brush.linearGradient(
colors = listOf(
AppColors.mLightPurple,
AppColors.mLightPurple
)
),
// rounding the corner of the progress bar
shape = RoundedCornerShape(50.dp)
)
.clip(
RoundedCornerShape(
topStartPercent = 50,
topEndPercent = 50,
bottomEndPercent = 50,
bottomStartPercent = 50
)
)
.background(Color.Transparent),
verticalAlignment = Alignment.CenterVertically
) {
// Progress button goes here...
}
Step 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`.
Kotlin
// to full fill the progress bar with
// the color i have used the button
Button(
onClick = { },
modifier = Modifier
.fillMaxWidth(progressFactor) // width will change according to score
.background(brush = gradient),
enabled = false, // clickable should be 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
)
// setting up the entire progress bar
}
Step 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.
Kotlin
// this is the entire code for the custom progress bar as shown in the above in the article
// add all the code snippets to have custom progress bar in jetpack compose
@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)
}
}
}
Output:
Now you can play around test your custom progress bar with different score passing as the parameter in the function.
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.
Similar Reads
Kotlin Tutorial This Kotlin tutorial is designed for beginners as well as professional, which covers basic and advanced concepts of Kotlin programming language. In this Kotlin tutorial, you'll learn various important Kotlin topics, including data types, control flow, functions, object-oriented programming, collecti
4 min read
Kotlin Android Tutorial Kotlin is a cross-platform programming language that may be used as an alternative to Java for Android App Development. Kotlin is an easy language so that you can create powerful applications immediately. Kotlin is much simpler for beginners to try as compared to Java, and this Kotlin Android Tutori
6 min read
Android Jetpack Compose Tutorial Android Jetpack Compose Tutorial encompasses both fundamental and advanced topics will help elevate from beginner to expert, this tutorial allows newcomers to follow a sequential path to master the basics of Android development.In this Android Jetpack Compose Tutorial, you'll explore a new and excit
5 min read
Basics of Jetpack Compose in Android Jetpack Compose is a modern UI toolkit that is designed to simplify UI development in Android. It consists of a reactive programming model with conciseness and ease of Kotlin programming language. It is fully declarative so that you can describe your UI by calling some series of functions that will
5 min read
Retrofit with Kotlin Coroutine in Android Retrofit is a type-safe http client which is used to retrieve, update and delete the data from web services. Nowadays retrofit library is popular among the developers to use the API key. The Kotlin team defines coroutines as “lightweight threadsâ€. They are sort of tasks that the actual threads can e
3 min read
Introduction to Kotlin Kotlin is a statically typed, general-purpose programming language developed by JetBrains, which has built world-class IDEs like IntelliJ IDEA, PhpStorm, Appcode, etc. It was first introduced by JetBrains in 2011 as a new language for the JVM. Kotlin is an object-oriented language, and a better lang
4 min read
Kotlin Data Types The most fundamental data type in Kotlin is the Primitive data type and all others are reference types like array and string. Java needs to use wrappers (java.lang.Integer) for primitive data types to behave like objects but Kotlin already has all data types as objects.There are different data types
3 min read
Kotlin when expression In Kotlin, when replaces the switch operator of other languages like Java. A certain block of code needs to be executed when some condition is fulfilled. The argument of when expression compares with all the branches one by one until some match is found. After the first match is found, it reaches to
6 min read
Kotlin Constructor A constructor is a special member function that is automatically called when an object of a class is created. Its main purpose is to initialize properties or perform setup operations. In Kotlin, constructors are concise, expressive, and provide significant flexibility with features like default para
6 min read
Android RecyclerView in Kotlin In this article, you will know how to implement RecyclerView in Android using Kotlin . Before moving further let us know about RecyclerView. A RecyclerView is an advanced version of ListView with improved performance. When you have a long list of items to show you can use RecyclerView. It has the ab
4 min read