android – Right to Left ProgressBar?-ThrowExceptions

Exception or error:

Does anyone know how to make a View reversed, I have a horizontal ProgressBar and I want it to right to left instead of left to right

How to solve:

Make a subclass of the normal progress bar view and implement the onDraw method to rotate the canvas before drawing it:

@Override
protected void onDraw(Canvas canvas) {
    canvas.save();
    canvas.rotate(180,<CenterX>,<CenterY>);
    super.onDraw(canvas);
    canvas.restore();
}

This should do the trick.

###

It’s even easier. You can simply call the following method and then it’s rotated and works just how you wanted.

progressBar.setRotation(180);

An example:
a normal progressbar and a RTL progressbar

###

You can flip a view in xml using scaleX or scaleY attributes

    <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleX="-1"/>

###

 public class inverseSeekBar extends ProgressBar {

public inverseSeekBar(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    // TODO Auto-generated constructor stub
}

public inverseSeekBar(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
}

public inverseSeekBar(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}

@Override
protected synchronized void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
     canvas.save(); 

        //now we change the matrix
        //We need to rotate around the center of our text
        //Otherwise it rotates around the origin, and that's bad. 
        float py = this.getHeight()/2.0f;
        float px = this.getWidth()/2.0f;
        canvas.rotate(180, px, py); 

        //draw the text with the matrix applied. 
        super.onDraw(canvas); 

        //restore the old matrix. 
        canvas.restore(); 
}}
  <com.hlidskialf.android.widget.inverseSeekBar 

       style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="200dip"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="50"
    android:secondaryProgress="75" 

/> 

mypackage: com.test.testProgressBar

###

You don’t need to rotate the entire View.

Just use a single xml attribute in your my_progress_drawable.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/my_background"/>
    <item android:id="@android:id/progress">
        <clip
            android:drawable="@drawable/my_right_to_left_progress"
            android:gravity="right" /> <!-- Clip the image from the RIGHT -->
    </item>

</layer-list>

The documentation tells us that gravity="right" does this:

Put the object at the right edge of its container, not changing its size. When clipOrientation is “horizontal”, clipping occurs at the left side of the drawable.

Don’t override onDraw(). This implementation is more stable across different versions of Android.

Unfortunately, it’s impossible to set the gravity of a ClipDrawable programmatically without invoking its constructor.

###

if you want it in XML there are two properties you can use.
if you want to use android:layoutDirection="rtl" it requires minimum API 17 but if you use android:rotation="180" there is no API limitation

<ProgressBar
        android:progress="20"
        android:rotation="180"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

###

Cos I’m lazy I just add these two lines to the seekbar xml:

android:layoutDirection="rtl"
android:mirrorForRtl="true"

Any downsides to this?

###

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:layout_margin="8dp"
    android:layoutDirection="rtl"
    android:progress="80" />

Leave a Reply

Your email address will not be published. Required fields are marked *