Set thumb focus & pressed drawable on custom seekbar programmatically

Question

I am creating a vertical seekbar using the following class

public class VerticalSeekBar extends SeekBar {

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

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

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

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(h, w, oldh, oldw);
    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec,
            int heightMeasureSpec) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec);
        setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
    }

    @Override
    protected void onDraw(Canvas c) {
        c.rotate(-90);
        c.translate(-getHeight(), 0);
        super.onDraw(c);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isEnabled()) {
            return false;
        }

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_MOVE:
        case MotionEvent.ACTION_UP:
            setProgress(getMax()
                    - (int) (getMax() * event.getY() / getHeight()));
            onSizeChanged(getWidth(), getHeight(), 0, 0);
            break;

        case MotionEvent.ACTION_CANCEL:
            break;
        }
        return true;
    }
}

And then create the seekbar in the activity using

VerticalSeekBar myZoomBar = new VerticalSeekBar(this);
Drawable drawable = getResources().getDrawable(R.drawable.green_bar);
ClipDrawable clip = new ClipDrawable(drawable, Gravity.LEFT,ClipDrawable.HORIZONTAL);
Drawable drawable2 = getResources().getDrawable(R.drawable.white_bar);
InsetDrawable d1 = new InsetDrawable(drawable2, 5, 5, 5, 5);
myZoomBar.setThumb(getResources().getDrawable(R.drawable.whitecircle));
LayerDrawable mylayer = new LayerDrawable(new Drawable[] { d1, clip });
myZoomBar.setProgressDrawable(mylayer);
myZoomBar.setMax(100);
myZoomBar.setProgress(50);
LinearLayout.LayoutParams zoomBarParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
zoomBarParams.gravity = Gravity.CENTER_HORIZONTAL;
LinearLayout zoomLayout = new LinearLayout(this);
zoomLayout.addView(myZoomBar, zoomBarParams);
FrameLayout.LayoutParams frameLayoutParams = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT,Gravity.CENTER);
addContentView(zoomLayout, frameLayoutParams);

The question is how do I set thumb pressed and focused drawable from the code?

I saw your edit to my answer. By the time I was going to accept it, someone else rejected it. By the way, since we are changing the thumb drawable to pressed_state on ACTION_DOWN, shouldn't it stay that way until ACTION_UP is encountered? If ACTION_MOVE is detected, it will only after ACTION_DOWN has already been called(and the thumb drawable has been set). I am assuming the flow of events while drag is always: ACTION_DOWN >> ACTION_MOVE >> ACTION_UP. Am I wrong here? — Vikram, Sep 10 '13 at 05:38
Yes, but I am using custom class to draw a vertical seekbar as you can see above, so I had to include that :) — Sunil Mishra, Sep 10 '13 at 07:11

score 4 · Accepted Answer · answered Sep 07 '13 at 09:59

Adding a OnTouchListener to myZoomBar should solve your problem. Set its behavior like this:

myZoomBar.setOnTouchListener(new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {

        switch(event.getAction()) {

        case MotionEvent.ACTION_DOWN:
            // Pressed state
            myZoomBar.setThumb(getResources().getDrawable(
                          R.drawable.pressed_state));
            break;

        case MotionEvent.ACTION_UP:
            myZoomBar.setThumb(getResources().getDrawable(
                          R.drawable.));
            break;
        }

        return false;
    }
});

You can use a OnFocusChangeListener to handle change in focus, but if all you need is to change the thumb when a position on the SeekBar is pressed, OnTouchListener will be enough.

State selector drawable might not work well in this case. Because, user may want to jump to a position by clicking on it(rather than sliding there). And I don't think the thumb can handle state changes. I tried using StateListDrawable to create a drawable with states, but using it with myZoomBar.setThumb(stateDrawable) did not work.

score 1 · Answer 2 · edited Dec 17 '22 at 10:14

Create Drawable from resources or programmatically and after when you done it use

setThumb(your_drawable);

I don't know if there is possible to create drawable with states (focused and selected) programmatically but from xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/state_focused" android:state_focused="true" />
    <item android:drawable="@drawable/state_selected" android:state_selected="true" />
    <item android:drawable="@drawable/state_normal" />
</selector>

and

getResources().getDrawable(R.drawable.your_drawable_id);

Here is something interesting [link](http://stackoverflow.com/questions/16163215/android-styling-seek-bar) — Dariusz Mazur, Sep 06 '13 at 14:13

Set thumb focus & pressed drawable on custom seekbar programmatically

2 Answers2