Seekbar for two values [-50, 0, 50]

Question

I need to place "start point" in center of seek bar.
How can i do like this?

Answer 1

I faced the same problem. Thanks to Commonsware to point to right direction. I wrote a class inspired by code.google.com/p/range-seek-bar) to get the solution.

https://github.com/vashisthg/StartPointSeekBar

Answer 2

As Above all said, it can be achieved my implementing our own custom seekbar.

I tried in the following way and it worked out for me.

activity_main.xml

 <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context=".MainActivity" 
  android:layout_margin="20dp">

 <com.example.customseekbar.CustomSeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"        
    android:max="100"
    android:progress="50"
    android:progressDrawable="@android:color/transparent"
    android:id="@+id/customSeekBar"
 />

</RelativeLayout>

MainActivity.java

package com.example.customseekbar;

import com.example.suricustomseekbar.R;
import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;

public class MainActivity extends Activity {

SeekBar mseekBar;

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

    mseekBar = (SeekBar) findViewById(R.id.customSeekBar);
    mseekBar.setProgress(50);
     }
  }

CustomSeekBar.java

package com.example.customseekbar;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.SeekBar;

  public class CustomSeekBar extends SeekBar {

private Rect rect;
private Paint paint ;
private int seekbar_height; 

public CustomSeekBar(Context context) {
    super(context);

}

public CustomSeekBar(Context context, AttributeSet attrs) {

    super(context, attrs);
    rect = new Rect();
    paint = new Paint();
    seekbar_height = 6;
}

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

@Override
protected synchronized void onDraw(Canvas canvas) {

    rect.set(0 + getThumbOffset(), 
            (getHeight() / 2) - (seekbar_height/2), 
            getWidth()- getThumbOffset(), 
            (getHeight() / 2) + (seekbar_height/2));

    paint.setColor(Color.GRAY);

    canvas.drawRect(rect, paint);



    if (this.getProgress() > 50) {


        rect.set(getWidth() / 2,
                (getHeight() / 2) - (seekbar_height/2), 
                getWidth() / 2 + (getWidth() / 100) * (getProgress() - 50),
                getHeight() / 2 + (seekbar_height/2));

        paint.setColor(Color.CYAN);
        canvas.drawRect(rect, paint);

    }

    if (this.getProgress() < 50) {

        rect.set(getWidth() / 2 - ((getWidth() / 100) * (50 - getProgress())),
                (getHeight() / 2) - (seekbar_height/2),
                 getWidth() / 2,
                 getHeight() / 2 + (seekbar_height/2));

        paint.setColor(Color.CYAN);
        canvas.drawRect(rect, paint);

    }

    super.onDraw(canvas);
    }
}

Answer 3

To start in the middle, you can call setProgress() with a value that is half of your total range.

To have the SeekBar start in the middle and go to an end (i.e., your blue line runs from middle to the left or from middle to the right), you would need to create your own replacement for SeekBar, or find somebody else who has done this, as this is not supported by SeekBar itself.

Answer 4

I just made this by Kotlin, perhaps someone likes it. check this gif

First: Create class with any name to customize seek bar like this:

class CustomSeekBar(
    context: Context,
    attrs: AttributeSet
) : AppCompatSeekBar(context, attrs) {

    private var rect: Rect = Rect()
    private var paint: Paint = Paint()
    private var seekbarHeight: Int = 6

    @Synchronized
    override fun onDraw(canvas: Canvas) {
        // for seek bar line
        rect[0, height / 2 - seekbarHeight / 2, width] = height / 2 + seekbarHeight / 2
        paint.color = ContextCompat.getColor(context, R.color.black_30)
        canvas.drawRect(rect, paint)

        //for right side
        if (this.progress > 0) {
            rect[width / 2, height / 2 - seekbarHeight / 2, width / 2 + width / 200 * (progress)] =
                height / 2 + seekbarHeight / 2

            paint.color = ContextCompat.getColor(context, R.color.green)
            canvas.drawRect(rect, paint)
        }

        //for left side
        if (this.progress < 0) {
            rect[width / 2 - width / 200 * (-progress), height / 2 - seekbarHeight / 2, width / 2] =
                height / 2 + seekbarHeight / 2

            paint.color = ContextCompat.getColor(context, R.color.red)
            canvas.drawRect(rect, paint)
        }
        super.onDraw(canvas)
    }
}

Second Go to the xml and put this tag

 <com.YOUR_PACKAGE.CustomSeekBar
        android:id="@+id/seek_habit_point"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/spacing_medium"
        android:max="100"
        android:min="-100"
        android:paddingStart="@dimen/spacing_small"
        android:paddingEnd="@dimen/spacing_small
        android:progressDrawable="@android:color/transparent"
        android:thumb="@drawable/seek_bar_custom_thumb"
        app:layout_constraintEnd_toEndOf="@+id/text_seek_bar_point"
        app:layout_constraintStart_toStartOf="@+id/text_point_part"
        app:layout_constraintTop_toBottomOf="@+id/text_point_part"
        tools:targetApi="o" />

and that is.