Set custom rounded scrollbarThumbVertical outside scrollbarTrackVertical android

Question

The three xml files below is my custom scrollbar. I want to set seek_bar_thumboutsite.xml outside scroll.xml.

style.xml

    <style name="scroll">
        <item name="android:scrollbarThumbVertical">@drawable/seek_bar_thumb</item>
        <item name="android:scrollbarTrackVertical">@drawable/scroll</item>
        <item name="android:scrollbarThumbHorizontal">@drawable/scrollbar_handle</item>
        <item name="android:scrollbarTrackHorizontal">@drawable/scrollbar_track</item>
        <item name="android:scrollbarFadeDuration">0</item>
        <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>

    </style>


**scroll.xml**

<?xml version="1.0" encoding="UTF-8"?> 
 <shape xmlns:android="http://schemas.android.com/apk/res/android"> 
 <solid android:color="#E3E3E3"/>    
 <stroke android:width="1dp"
        android:color="#E3E3E3" /><!-- #330000FF #ffffffff -->
 <gradient                             
    android:startColor="#E3E3E3" 
    android:endColor="#E3E3E3" 
    android:angle="90"/> 

 <padding android:left="5dp"
         android:top="5dp"
         android:right="5dp"
         android:bottom="5dp"/> 
 <corners android:bottomRightRadius="7dp"     
         android:bottomLeftRadius="7dp" 
         android:topLeftRadius="7dp"
         android:topRightRadius="7dp"/> 
 </shape>


**seek_bar_thumb**

<?xml version="1.0" encoding="UTF-8"?>
<!--  @author : @alexduhem 
        blog.sakaroz.com
 -->
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="25dip"
        android:height="25dip" />
    <stroke
        android:width="1dip"
        android:color="#ff5da8d4" />
    <gradient
        android:startColor="#ff0e75af"
        android:endColor="#ff1997e1"
        android:angle="270"
        android:type="linear" />
</shape>

I want the thumb to appear like the random round scrollthumbvertical in the progress bar below. The only difference is that the scroll thumb should be vertical

Answer 1

The solution to this is as below:

Your main.xml XML will be like below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.widget.VerticalSeekBar android:id="@+id/vertical_Seekbar"
    android:layout_width="wrap_content"
    android:layout_height="150dip" />

    <TextView  android:id="@+id/vertical_sb_progresstext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"/>


</LinearLayout>

Now create a new package in src of your project and keep this file

VerticalSeekBar.java

package android.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;

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
    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:
                int i=0;
                i=getMax() - (int) (getMax() * event.getY() / getHeight());
                setProgress(i);
                Log.i("Progress",getProgress()+"");
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;

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

}

The launch activity .java file will have the code as below

SampleActivity.java

package com.sample;

import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
import android.widget.VerticalSeekBar;

public class SampleActivity extends Activity {

     VerticalSeekBar verticalSeekBar=null;
     TextView vsProgress=null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        verticalSeekBar=(VerticalSeekBar)findViewById(R.id.vertical_Seekbar);
        vsProgress=(TextView)findViewById(R.id.vertical_sb_progresstext);


        verticalSeekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {


            public void onStopTrackingTouch(SeekBar seekBar) {

            }


            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            public void onProgressChanged(SeekBar seekBar, int progress,
                    boolean fromUser) {
                vsProgress.setText(progress+"");

            }
        });
         }
}

This is the code that will definitely work for you. works for me fine. If you still have any doubt then do ask anytime.