Mirror (flip) a View / ProgressBar

Question

I have a custom built circular progress bar used for a seconds counter on a clock, which I'd like to flip, so that the clock is counting counter-clockwise.

Searching here for a solution, I found this:

Right to Left ProgressBar?

Which obviously works for a horizontal progress bar, but I can't simply rotate it 180 degrees, since that will just move the clock 180 degrees and it will still be ticking clockwise.

Is there any other way to mirror a ProgressBar, or any View?

Edit:

Just found "android:rotationY" and the programmatic equivalent, but this ideally needs to be for 2.2 and above..

Sigismond

This is not really an answer, but would you consider open sourcing the circular progressbar? I've seen a lot of requests for it. – Lattonia

This is how I originally did it: #12777087 but a lot has changed on it since then. I can put together a sample application on github after the holidays! – Sigismond

Does this answer your question? Android custom circular ProgressBar direction – Boehmer

Answer 1

I was able to flip ProgressBar simply with attribute scaleX in XML:

android:scaleX="-1"

This works for other View as well.

Decelerate

Answer 2

Extend ProgressBar in the same way you would for a horizontal progress bar, but in the onDraw method, flip the canvas rather than rotate it:

public class InverseProgressBar extends ProgressBar {

public InverseProgressBar(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

public InverseProgressBar(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public InverseProgressBar(Context context) {
    super(context);
}

@Override
protected synchronized void onDraw(Canvas canvas) {
    canvas.scale(-1f, 1f, super.getWidth() * 0.5f, super.getHeight() * 0.5f);
    super.onDraw(canvas);
}

}

Sigismond

Answer 3

Yes. In newer versions of material design library, the circular progress bar can be mirrored:

• in the layout with this attribute

  app:indicatorDirectionCircular
  

• or programmatically with this method

  setIndicatorDirection()
  

Refer here for more info.

Boehmer