Lightning Round: Android Gradient Progress Bar

Been meaning to write this article for quite some time now, but the thing about being an “adult”, is that “adult” stuff keeps coming at you relentlessly, derailing your every effort to pursue more creative endeavors. But, we are here now, and this is supposed to be a Lightning Round so, let’s get at it at once.

I was working on a project some time ago and came across the Material Design’s Circular Progress Indicator. I remembered implementing a simple gradient horizontal Progress Bar on a previous project of mine and thought, hey, maybe I can replace that old thing with a gradient Linear Progress Indicator. To my amazement, there’s apparently no way of creating a gradient Linear Progress Indicator. Weird, right? Do you know of a way? You know what to do in the comments section.

So, I’ll just post here the same gradient Progress Bar I’ve used throughout my projects every time I’ve needed one, and some small tweaks you can make for different effects.

The basic style for your Progress Bar:

The Progress Bar xml code:

The Progress Bar progressDrawable:

What you get so far:

Screenshot from one of my apps, Macro Counter — Track Macronutrient Intake & Goals

It’s looking good, and you can play around with centerY, centerX and angle to see the different results you can get.

Now…as you see, you have rounded corners, and if you set a value that is lower than the maximum value, the edge of the progress bar filling is flat. What if you would like a round edge? You can use scale to get that effect.

Additionally, play around with scaleHeight and scaleGravity and see what happens. You can checkout documentation for scaling here. The result:

Top: Full Progress Bar. Middle: Half-full Progress Bar. Bottom: Half-full Progress Bar using scaleWidth.

But something looks off, can you see what it is? When you use scaleWidth, the gradient is “squeezed” into whatever size the progress bar is. Can you see the dark shade of green as you reach the end of the bar? Hmm, you might not want that to happen. You might want the gradient to be red for higher values, for instance. But it looks like if you choose to have rounded corners, the progress edge will always look red, even if the progress is halfway through. What can you do?

This wouldn’t make sense if we wanted to use the color red to bring attention to higher values.

Well…the only solution I’ve come up with, and because I only had five possible levels to represent, was to have separate drawables for each possible value the Progress Bar would take. Perhaps there’s a way more elegant way of doing it by creating a GradientDrawable programmatically with whatever values you need. Can you do that? Do you know of a way?

Have you found this useful? A lot? Nothing at all? I hope at least, some!

Cheers, and till we meet again!