[android] Implementing a slider (SeekBar) in Android

I want to implement a slider, which is basically two lines, one vertical and one horizontal, crossing where the screen is touched. I have managed to make one but I have to issues:

  1. The slider is not very smooth, there is a slight delay when I'm moving the finger
  2. If I place two sliders it is not multitouch, and I'd like to use both of them simultaneously

Here is the code:

public class Slider extends View {

    private Controller controller = new Controller();
    private boolean initialisedSlider;
    private int sliderWidth, sliderHeight;
    private Point pointStart;
    private Paint white;
    private int mode;

    final static int VERTICAL = 0, HORIZONTAL = 1, BOTH = 2;

    public Slider(Context context) {
        super(context);
        setFocusable(true);    
        // TODO Auto-generated constructor stub
    }
    public Slider(Context context, AttributeSet attrs) {
        super(context, attrs);     
        setFocusable(true);    
        pointStart = new Point();
        initialisedSlider = false;   
        mode = Slider.BOTH;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if(!initialisedSlider) {
            initialisedSlider = true;
            sliderWidth = getMeasuredWidth();
            sliderHeight = getMeasuredHeight();

            pointStart.x = (int)(sliderWidth/2.0);
            pointStart.y = (int)(sliderHeight/2.0);
            controller = new Controller(pointStart, 3);

            white = new Paint();
            white.setColor(0xFFFFFFFF);
        }

        canvas.drawLine(controller.getCoordX(),0,
                        controller.getCoordX(),sliderHeight, 
                        white);
        canvas.drawLine(0, controller.getCoordY(), 
                        sliderWidth, controller.getCoordY(), 
                        white);

    }

    public boolean onTouchEvent(MotionEvent event) {
        int eventaction = event.getAction();     
        int X = (int)event.getX(); 
        int Y = (int)event.getY(); 
        switch (eventaction) { 
        case MotionEvent.ACTION_DOWN:
            if(isInBounds(X,Y)) {
                updateController(X, Y);
            }
            break;
        case MotionEvent.ACTION_MOVE:
            if(isInBounds(X,Y)) {
                updateController(X, Y);
            }
            break;
        case MotionEvent.ACTION_UP:
            if(isInBounds(X,Y)) {
                updateController(X, Y);
            }
            break;
        }
        invalidate();  
        return true; 
    }

    private boolean isInBounds(int x, int y) {
        return ((x<=(sliderWidth)) && (x>=(0)) 
                 && (y<=(sliderHeight)) && (y>=(0)));
    }
    private void updateController(int x, int y) {
        switch(mode) {
        case Slider.HORIZONTAL:
            controller.setCoordX(x);
            break;
        case Slider.VERTICAL:
            controller.setCoordY(y);
            break;
        case Slider.BOTH:
            controller.setCoordX(x);
            controller.setCoordY(y);
            break;
        }
    }

    private class Controller {
        private int coordX, coordY;
        Controller() {

        }
        Controller(Point point, int width) {
            setCoordX(point.x);
            setCoordY(point.y);
        }
        public void setCoordX(int coordX) {
            this.coordX = coordX;
        }
        public int getCoordX() {
            return coordX;
        }
        public void setCoordY(int coordY) {
            this.coordY = coordY;
        }
        public int getCoordY() {
            return coordY;
        }
    }
}

And the XML file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <com.android.lasttest.Slider 
        android:id="@+id/slider"
        android:layout_width="100dp" 
        android:layout_height="100dp" 
        android:layout_gravity="center_horizontal" 
        android:adjustViewBounds="true"/>
    <com.android.lasttest.Slider 
        android:id="@+id/slider"
        android:layout_width="150dp" 
        android:layout_height="150dp" 
        android:layout_gravity="center_horizontal" 
        android:adjustViewBounds="true"/>
    <com.android.lasttest.Slider 
        android:id="@+id/slider"
        android:layout_width="200dp" 
        android:layout_height="200dp" 
        android:layout_gravity="center_horizontal" 
        android:adjustViewBounds="true"/>

</LinearLayout>

This question is related to android slider touch seekbar

The answer is


For future readers!

Starting from material components android 1.2.0-alpha01, you have slider component

ex:

<com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:valueFrom="20f"
        android:valueTo="70f"
        android:stepSize="10" />


How to implement a SeekBar

enter image description here

Add the SeekBar to your layout

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

    <TextView
        android:id="@+id/textView"
        android:layout_margin="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <SeekBar
        android:id="@+id/seekBar"
        android:max="100"
        android:progress="50"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

Notes

  • max is the highest value that the seek bar can go to. The default is 100. The minimum is 0. The xml min value is only available from API 26, but you can just programmatically convert the 0-100 range to whatever you need for earlier versions.
  • progress is the initial position of the slider dot (called a "thumb").
  • For a vertical SeekBar use android:rotation="270".

Listen for changes in code

public class MainActivity extends AppCompatActivity {

    TextView tvProgressLabel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // set a change listener on the SeekBar
        SeekBar seekBar = findViewById(R.id.seekBar);
        seekBar.setOnSeekBarChangeListener(seekBarChangeListener);

        int progress = seekBar.getProgress();
        tvProgressLabel = findViewById(R.id.textView);
        tvProgressLabel.setText("Progress: " + progress);
    }

    SeekBar.OnSeekBarChangeListener seekBarChangeListener = new SeekBar.OnSeekBarChangeListener() {

        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            // updated continuously as the user slides the thumb
            tvProgressLabel.setText("Progress: " + progress);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
            // called when the user first touches the SeekBar
        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
            // called after the user finishes moving the SeekBar
        }
    };
}

Notes

  • If you don't need to do any updates while the user is moving the seekbar, then you can just update the UI in onStopTrackingTouch.

See also


Examples related to android

Under what circumstances can I call findViewById with an Options Menu / Action Bar item? How to implement a simple scenario the OO way My eclipse won't open, i download the bundle pack it keeps saying error log getting " (1) no such column: _id10 " error java doesn't run if structure inside of onclick listener Cannot retrieve string(s) from preferences (settings) strange error in my Animation Drawable how to put image in a bundle and pass it to another activity FragmentActivity to Fragment A failure occurred while executing com.android.build.gradle.internal.tasks

Examples related to slider

Change the Arrow buttons in Slick slider Touch move getting stuck Ignored attempt to cancel a touchmove Carousel with Thumbnails in Bootstrap 3.0 Very Simple Image Slider/Slideshow with left and right button. No autoplay Implementing a slider (SeekBar) in Android HTML5: Slider with two inputs possible? jQuery issue - #<an Object> has no method How to change Jquery UI Slider handle Is there a simple JavaScript slider?

Examples related to touch

Consider marking event handler as 'passive' to make the page more responsive Touch move getting stuck Ignored attempt to cancel a touchmove How to remove/ignore :hover css style on touch devices Fix CSS hover on iPhone/iPad/iPod How to prevent sticky hover effects for buttons on touch devices Draw in Canvas by finger, Android Disable scrolling when touch moving certain element How to implement swipe gestures for mobile devices? Prevent Android activity dialog from closing on outside touch Media query to detect if device is touchscreen

Examples related to seekbar

Custom seekbar (thumb size, color and background) How to set seekbar min and max value Android SeekBar setOnSeekBarChangeListener Implementing a slider (SeekBar) in Android How to make a vertical SeekBar in Android?