Creating a Custom Progress Bar with Canvas in Jetpack Compose

Creating visually appealing and functional UI components is essential in Android development. In this article, we will explore how to create a custom progress bar using the Canvas API in Jetpack Compose. This tutorial will guide you step-by-step through the process, allowing you to enhance your applications with a unique progress indicator. Setting Up Your Project Before diving into the code, ensure that you have a Jetpack Compose project set up in Android Studio. If you haven't created one yet, start by selecting "New Project" and choosing the "Empty Compose Activity" template. This will provide you with a basic structure to work with. Importing Necessary Libraries To utilize Jetpack Compose's Canvas features, make sure you have the required dependencies in your build.gradle file: groovy dependencies { implementation "androidx.compose.ui:ui:1.0.0" implementation "androidx.compose.material:material:1.0.0" implementation "androidx.compose.ui:ui-tooling:1.0.0" // Add other dependencies as necessary } Sync your project to ensure all dependencies are downloaded. Creating the Custom Progress Bar The custom progress bar will be drawn on a Canvas. We will create a composable function called CustomProgressBar that accepts parameters for the progress value and the maximum value. The Composable Function Here’s how to create the CustomProgressBar function: kotlin @Composable fun CustomProgressBar(progress: Float, max: Float) { Canvas(modifier = Modifier.size(200.dp)) { val strokeWidth = 20f val radius = size.minDimension / 2 - strokeWidth / 2 // Draw background circle drawCircle(color = Color.LightGray, radius = radius) // Calculate the sweep angle based on progress val sweepAngle = (progress / max) 360 // Draw progress arc drawArc( color = Color.Blue, startAngle = -90f, sweepAngle = sweepAngle, useCenter = false, style = Stroke(width = strokeWidth, cap = StrokeCap.Round) ) } } Explanation of the Code 1. Composable Function: The CustomProgressBar function is annotated with @Composable, indicating that it can be used within the Compose UI hierarchy. 2. Canvas: We use the Canvas composable to create a drawing area. Here, we define its size as 200dp using the Modifier.size() modifier. 3. Drawing the Background: A light gray circle is drawn as the background of the progress bar. 4. Calculating the Sweep Angle: The sweep angle for the arc is calculated based on the current progress relative to the maximum value. 5. Drawing the Progress Arc: The drawArc function is used to draw the arc representing the progress. It starts at -90 degrees (pointing upwards) and sweeps in a clockwise direction. Using the Custom Progress Bar To make use of our CustomProgressBar, we can call it within the main content of our application. Here’s a simple example of how to implement it: kotlin @Composable fun MainScreen() { var progress by remember { mutableStateOf(0f) } Column( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center, modifier = Modifier.fillMaxSize() ) { CustomProgressBar(progress = progress, max = 100f) Button(onClick = { if (progress < 100f) progress += 10f }) { Text(text = "Increase Progress") } } } Explanation of the MainScreen Code 1. State Management: A progress variable is created using remember to hold the current progress state. 2. UI Layout: A Column is used to vertically stack the progress bar and a button. 3. Button Click: When the button is clicked, the progress increases by 10, simulating a progression in the task. Previewing the Progress Bar To preview your custom progress bar in Android Studio, you can use the @Preview annotation: kotlin @Preview(showBackground = true) @Composable fun PreviewCustomProgressBar() { CustomProgressBar(progress = 50f, max = 100f) } This will allow you to visualize the progress bar in different states directly from the IDE. Conclusion This tutorial has guided you through the process of creating a custom progress bar using Canvas in Jetpack Compose. By following these steps, you can easily implement a visually appealing and functional progress indicator in your Android applications. For a more comprehensive understanding, you can check out the full video tutorial here: Watch the full tutorial on YouTube(https://www.youtube.com/watch?v=mXodZLVUE4U). With these skills, you can begin to customize your application's UI components further, tailoring them to your design needs. Happy coding!