Android SeekBar Flipped Horizontally

Question

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!

score 20 · Accepted Answer · edited May 23 '17 at 12:17

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:

score 4 · Answer 2 · answered Jan 07 '14 at 22:43

4

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.

answered Jan 07 '14 at 22:43

DanLBan

81
1
4

2

Except for the fact that the SeekBar would be visually upside-down. – mhenry Jan 21 '14 at 06:37
The default seekbar looks the same on top and bottom so not sure there would be much of a difference. At least I haven't seen any differences in my tests – DanLBan Feb 15 '14 at 00:51
1

You cannot assume the SeeBark will look the same upside-down because OEMs are able to change the look of the native SeekBar view. Adding a simple gradient will throw the look off. It's much better to programmatically override the onDraw() and onTouchEvent() events like in my accepted answer. – mhenry Feb 17 '14 at 17:39

score 2 · Answer 3 · answered Nov 27 '19 at 05:03

2

Have you tried setting this in xml

            android:rotationY="180"

answered Nov 27 '19 at 05:03

Sumit Garai

1,205
8
6

score 1 · Answer 4 · edited May 23 '17 at 12:25

1

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.

edited May 23 '17 at 12:25

Community

1
1

answered Oct 01 '11 at 00:48

adneal

30,484
10
122
151

1

Thank you! I'm new to Android, still getting familiar with it. – mhenry Oct 03 '11 at 17:44

Guiorgy · Answer 5 · 2020-02-20T15:59:31.830

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
    }

}

Welcome to Stackoverflow. Please provide an explanation to your answer, why and how does it solve the problem, etc... — octobus, Feb 20 '20 at 14:33

Android SeekBar Flipped Horizontally

5 Answers5

Linked