ObAt ObAt - 6 months ago 29
Android Question

Create a wider SeekBar

I am creating an Android application which controls a radio via tcp/ip commands. I am using a SeekBar to display and control the volume. I rotated the SeekBar 90 degrees so it is now vertical.

public class VerticalSeekBar extends SeekBar {

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

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

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

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());
}

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

super.onDraw(c);
}

@Override
public void setProgress(int progress) {
super.setProgress(progress);
onSizeChanged(getWidth(), getHeight(), 0, 0);
}

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

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


Everything works but there is one graphical issue. The width of the SeekBar is pretty small (just like every standard SeekBar). I would like to create a wider SeekBar, is this possible?

Answer

To my knowledge about SeekBar, you should customize drawables of a SeekBar to achieve your goal. I have done this and the result is here:

Create a XML drawable file and name it my_seekbar_progress_drawable.xml (This name is optional you can change it). And then copy and paste this code into that file.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <gradient
                android:startColor="#ffe9e9e9"
                android:centerColor="#ffc6c6c6"
                android:centerY="0.75"
                android:endColor="#ffe9e9e9"
                android:angle="270"/>

        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:startColor="#ffe9e9e9"
                    android:endColor="#ff2165ca"
                    android:angle="270" />
            </shape>
        </clip>
    </item>
</layer-list>

In your layout file where you define your vertical SeekBar you should specify a width for it. If you write wrap_content, minimum width will be chosen.

<com.example.myapp.VerticalSeekBar
    android:layout_width="20dp"
    android:progress="50"
    android:progressDrawable="@drawable/my_seekbar_progress_drawable"
    android:layout_height="200dp" />

See the result here:
enter image description here enter image description here enter image description here

You can play with values in drawable XML file as your wish.