CODEWITHSUNDEEP
android
ravi
ravi

Reputation: 2782

Android vertical Seekbar thumb alignment is not proper

I have a LinearLayout with vertical seekbars in it. For vertical seek bar I am using custom class. While using android:layout_weight="1" seekbar thumb alignment is not proper.

verticalseekbar.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <com.example.verticalseekbardemo.VerticalSeekBar
        android:id="@+id/seekBar1"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:progress="50" />

    <com.example.verticalseekbardemo.VerticalSeekBar
        android:id="@+id/seekBar2"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:progress="30" />

    <com.example.verticalseekbardemo.VerticalSeekBar
        android:id="@+id/seekBar3"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:progress="10" />

    <com.example.verticalseekbardemo.VerticalSeekBar
        android:id="@+id/seekBar4"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_weight="1" />

    <com.example.verticalseekbardemo.VerticalSeekBar
        android:id="@+id/seekBar5"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:progress="80" />

</LinearLayout>

VerticalSeekBar.java   

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

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

    @Override
    public synchronized void setProgress(int progress) // it is necessary for
                                                        // calling setProgress
                                                        // on click of a button
    {
        super.setProgress(progress);
        onSizeChanged(getWidth(), getHeight(), 0, 0);
    }

    @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 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;
    }
}

Thumb is not aligned properly

Did anyone encounter this kind of issue.

Thanks.

Upvotes: 1

Views: 2859

Answers (5)

Rahul
Rahul

Reputation: 239

i have same issue and i solve this by adding

android:maxHeight="300dp"

to seekbar in layout file.

Hope this help you.

Upvotes: 0

Tim Kist
Tim Kist

Reputation: 1182

If you'd like to use your custom VerticalSeekBar, I think the issue is that the Canvas needs to be rotated in the center to get the desired effect, although I could be wrong.

int centerX;
int centerY;

protected void onDraw(Canvas c) {
    c.translate(centerY, centerX);
    c.rotate(-90);

    super.onDraw(c);
}

@Override
protected void onSizeChanged(int width, int height, int oldw, int oldh) {
    super.onSizeChanged(width, height, oldw, oldh);

    centerX = width / 2;
    centerY = height / 2;
}

Upvotes: 0

Aniket
Aniket

Reputation: 401

Instead of using vertical seekbar add android:rotation="90" in your normal seekbar code. Ex:-

<SeekBar
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:max="50"
        android:id="@+id/rightturn"
        android:layout_marginTop="80dp"
        **android:rotation="90"**
        />

Upvotes: 0

Nouman Shah
Nouman Shah

Reputation: 534

Here is an example 

<LinearLayout
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:orientation="horizontal"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:background="#ffffff">
 <com.example.yourpackgename_where_VerticalSeekbar_is_define.VerticalSeekBar
              android:id="@+id/first_seekbar"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:progress="50" />
</LinearLayout>

To add the 5 seek bar i would suggest make a LinearLayout with horizontal orientation with weight sum of 5 and then inside the layout copy the above code 5 time with different ids

Upvotes: 2

Arubu
Arubu

Reputation: 445

I had the same issue. The only way to solve it, was putting each seekbar into a FrameLayout, like this:

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <com.example.verticalseekbardemo.VerticalSeekBar
              android:id="@+id/seekBar1"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:progress="50" />
 </FrameLayout>

I hope help you.

Upvotes: 2

Related Questions