Home » Android » Android SeekBar Flipped Horizontally

Android SeekBar Flipped Horizontally

Posted by: admin June 15, 2020 Leave a comment

Questions:

With the Android SeekBar, you can normally drag the thumb to the left or to the right and the yellow progress color is to the left of the thumb. I want the exact opposite, essentially flipping the yellow progress color to the right of the thumb and flipping the entire SeekBar on the y-axis.

Can anyone point me in the right direction? Thanks!

How to&Answers:

After fiddling around with some code this is what I got and it seems to work pretty well. Hopefully it will help someone else in the future.

public class ReversedSeekBar extends SeekBar {

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

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        float px = this.getWidth() / 2.0f;
        float py = this.getHeight() / 2.0f;

        canvas.scale(-1, 1, px, py);

        super.onDraw(canvas);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        event.setLocation(this.getWidth() - event.getX(), event.getY());

        return super.onTouchEvent(event);
    }
}

This was thrown together with the help of these two questions:

  1. How can you display upside down text with a textview in Android?
  2. How can I get a working vertical SeekBar in Android?

Answer:

Have you tried seekbar.setRotation( 180 )? It flips the seekbar 180 degrees and is upside down, meaning left side is max, right side is 0 with the color on the right of the thumb. No need to create a custom seekbar this way.

Answer:

You should look into making a custom progress bar. Considering what you want to do, you already have the images you need in the Android SDK. I’d extract them and edit them accordingly. Here’s a tutorial to help get you started.

Answer:

Have you tried setting this in xml

            android:rotationY="180"

Answer:

This should fix a few issues with @mhenry answer

class ReverseSeekBar : SeekBar {
    constructor(context: Context) : super(context) {
        init()
    }
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        init()
    }
    constructor(context: Context, attrs: AttributeSet?, defStyle: Int) : super(context, attrs, defStyle) {
        init()
    }

    var first = true

    override fun onTouchEvent(event: MotionEvent): Boolean {
        event.setLocation(this.width - event.x, event.y)
        return super.onTouchEvent(event)
    }

    override fun getProgress(): Int {
        return max - super.getProgress() + min
    }

    override fun setProgress(progress: Int) {
        super.setProgress(max - progress + min)
    }

    override fun onDraw(canvas: Canvas?) {
        if (first) {
            first = false
            val old = progress
            progress = min + max - progress
            super.onDraw(canvas)
            progress = old
        } else
            super.onDraw(canvas)
    }

    private fun init() {
        rotation = 180f
    }

}