2

I want to set a android progressbar that looks like this:

How can I achieve this?

UPDATE - SOLUTION:

In the end I was able to achieve the desired result by using a nine-patch imageView and changing the width of this imageView relative to its container. The container reflects the maxiumum (100%) size of the progressbar.

What I've already tried:

Use Android's skew method

progressBar.matrix.setSkew(1f, 0.5f)

Nothing happens, the progressbar still looks like a standard progressbar. I also tried 

progressBar.matrix.postSkew(1f, 0.5f),

tried to use other values for setSkew and postSkew and tried to 

progressbar.invalidate()

after setting the skew.

Use custom progressBar.progressDrawable

I also considered using a custom progressDrawable, but did not know how to achieve the desired look.

Reason: The Background of the progressbar has to be transparent, so I can't just have overlapping rectangles as considered, for example, here.

Is there a way to make one of the approaches explained above work, or maybe another way to achieve the expected result?

Expected Result:

skewed progressbar

Actual Result:

regular progressbar

heslegend
  • 86
  • 8
  • 1
    `Reason: The Background of the progressbar has to be transparent` What stops you from using a **transparent** PNG? Better, if using a 9 patch? OR even a VectorDrawable? – Phantômaxx Oct 27 '19 at 10:03
  • I tried using a 9 patch and also transparent PNG. They work quite fine, except that the skewed end of the progressbar is not shown until the progress is completed. – heslegend Oct 27 '19 at 12:36
  • Then there's something wrong in the implementation. All the graphical elments should be redrawn continously. Try invalidating the view after drawing onto it, so to refresh it. – Phantômaxx Oct 27 '19 at 14:57
  • I tried invalidating the view, but i still got the same result. I think this is because the android progressbar does not really scale the drawable according to the progress, but instead clips the non-visible part of the drawable. – heslegend Nov 08 '19 at 08:24
  • ... if that wouldn't cut out the non-visible end cap – Phantômaxx Nov 08 '19 at 09:38
  • For me, this is a perfect use case for a 9 patch. But 9 patches require a deep understanding of how they do work. It's very easy, but it must be clearly acquired. Or you will get stretching where you don't want it. – Phantômaxx Nov 08 '19 at 09:41
  • 1
    Your hint with the nine-patch was very valuable, thanks! In my working solution, instead of using it as the drawable of a progressbar, I used it as a regular imageView. I scaled this imageView relative to the width of its container, which represents the maximum possible progress(100%). This worked pretty fine. – heslegend Nov 08 '19 at 13:33
  • Nice to hear that you were able to work it out. – Phantômaxx Nov 08 '19 at 14:04

0 Answers0