Custom Progress Bar with Jetpack Compose Canvas API: Tutorial

In this tutorial, you'll learn how to create a custom progress bar with Jetpack Compose Canvas API. The end result looks like the image below. Steps for Creating Custom Progress Bar with Jetpack Compose Canvas API : Declaring a canvas Understanding the drawArc Composable API Drawing an arc for the background Drawing an arc for the foreground Drawing a circle Positioning the circle on the arc Assumptions The radius of the circle is Half of the Height of the Widget. The color for the background arc will be #90A4AE The color for the foreground arc will be #4DB6AC The color for the circle on the custom progress bar will be #FFFFFF Declaring our Canvas Let's start by creating our composable. You will call it CustomProgressBar. Go ahead and add this code to your project. Jetpack Compose provides us with a Composable called Canvas. It takes a lambda called DrawScope. Here is how you would declare it. It is crucial to provide two things to your Canvas at this point. The first is the size and the second is the padding. Go ahead and set the size to 150dp and add 10dp of padding. Understanding the drawArc Composable API Jetpack Compose provides us with a composable function called . This function requires 4 parameters to be declared: drawArc() Color or fill to be applied to the arc brush: Brush Starting angle in degrees. 0 represents 3 o'clock startAngle: Float Size of the arc in degrees that is drawn clockwise relative to sweepAngle: Float startAngle Flag indicating if the arc is to close the center of the bound useCenter: Boolean There are other parameters that offer you more customization, but they are not required, so I will skip over them for now. Drawing an Arc For The Background Go ahead and add the first arc like this As the startAngle's 0 represents 3'o clock, I want to start drawing somewhere close to 7'o clock. That is the reason we use 140 for the . startAngle Drawing an Arc For The Foreground Keeping everything the same, you will just add another arc, with a different color on top of this one. Here is what the preview should look like Drawing a Circle A circle in its simplest form is also an arc, whose sweep angle is 360. So you can use the same drawArc API to draw a circle. However, Jetpack Compose provides us with another convenient API to draw a circle in an intuitive manner. The method is called . It requires only one parameter to draw and that is the color. drawCircle Go ahead and add it to your canvas like this As you can see it added a circle at the center of your canvas and the radius is half the size of your canvas. So now you have to fix both of these things. First, go ahead and set the radius to 5f. Great job resizing the circle! 👏 Now we need to position the circle onto the arc so that it matches your desired design. To achieve this, you have to provide the coordinates of the center of the circle as an object. Go ahead and set this as (0,0) and see what happens. Offset You did not expect that to happen, did you? Do you know why this happened? If you are paying attention, you'd be thinking but why does the circle not appear on the extreme top, left of your canvas? This is because you added 10 dp, padding to your canvas. Try removing the padding modifier and see what happens. Android Studio can even show this is to you, just hover over your composable's design preview and it will show you a bounding box like this In the next session, you'll see the code to position the circle correctly on the arc. Positioning the Circle on The Arc Here is how you can position the circle on the arc. If you'd like to understand in-depth, how I came up with the x and y coordinates, you can read this fun blog post on . How to Find a Point on a Circle in Kotlin The result should look like this Conclusion Kudos on learning how to create a custom progress bar with Jetpack Compose Canvas API. I hope you enjoyed this article. Before you go, let's connect with each other on Twitter!