How to make custom seek bar in android?

Question

I want to make customer seek bar like this image:

enter image description here

i checked this and this. if anyone have any idea about this..please share it.Thank you

check this http://stackoverflow.com/questions/12369519/how-to-set-the-seek-bar-thumb-with-a-layout-or-with-a-textview — Charan Pai, Feb 22 '13 at 06:45

Edward van Raak · Answer 1 · 2013-02-25T08:07:53.373

If I understand correctly you want to create a number value above the actual slider that moves along the orb.

One thing you can do is write a text above the actual image of the slider by "merging" the text directly onto the drawable file of the orb image.

I am assuming you are using the first tutorial you provided in your original question

public class CustomSeekBar extends Activity {
  SeekBar mybar;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_seek_bar);
        mybar = (SeekBar) findViewById(R.id.seekBar1);

        mybar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

      @Override
      public void onStopTrackingTouch(SeekBar seekBar) {

        //add here your implementation
      }

      @Override
      public void onStartTrackingTouch(SeekBar seekBar) {

        //add here your implementation
      }

      @Override
      public void onProgressChanged(SeekBar seekBar, int progress,
          boolean fromUser) {
            int value = seekBar.getProgress(); //this is the value of the progress bar (1-100)
            //value = progress; //this should also work
            String valueString = value + ""; //this is the string that will be put above the slider
            seekBar.setThumb(writeOnDrawable(R.drawable.thumbler_small, value));        
      }
    });
    }

    public BitmapDrawable writeOnDrawable(int drawableId, String text){

    Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);

    Paint paint = new Paint(); 
    paint.setStyle(Style.FILL);  
    paint.setColor(Color.BLACK); //Change this if you want other color of text
    paint.setTextSize(20); //Change this if you want bigger/smaller font

    Canvas canvas = new Canvas(bm);
    canvas.drawText(text, 0, bm.getHeight()/2, paint); //Change the position of the text here

    return new BitmapDrawable(bm);
}
}

This takes a drawable from your resources draws some text on top of it and returns the new drawable. Use seekBar.getProgress(); to get the value needed from your seekbar.

I recommend cleaning up the code a bit because now it creates a new paint object every time you touch the seekbar which is really bad.

You would need to do more stuff to make it work only when you click the orb though...

Actually i am not able to understand this code..That's why i am asking for full code..Thank you.. — Mehul Ranpara, Feb 25 '13 at 06:42
When I use writeOnDrawable() method, the thumb size is getting reduced from the actual size. Any idea on this? — Kameswari, Jun 17 '14 at 08:24

score 6 · Answer 2 · answered May 16 '13 at 11:55

XML code

 <SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:progressDrawable="@drawable/seek_bar"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:thumb="@drawable/thumbler_small"
    android:indeterminate="false" />

seek_bar.xml

 <?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+android:id/SecondaryProgress"
        android:drawable="@drawable/first"/>
    <item
        android:id="@+android:id/progress"
        android:drawable="@drawable/second"/>
</layer-list>

first drawable is empty or shown not color full area.

second drawable is fill or color full area.

this link help your more.

sir I am getting error `error: Error: No resource found that matches the given name (at 'id' with value '@+android:id/ SecondaryProgress').` — Maveňツ, Aug 19 '15 at 07:33
maveň - Those are the progress bar images named **first** and **second** that are stored in the drawable folder. — SChalice, Oct 06 '15 at 03:54

score 6 · Answer 3 · answered Jul 17 '14 at 17:28

Why not write a custom seek bar view.

Here is some sample code for putting text in the middle of the seek bar thumb slider and the text moves with the slider. Should be easy to adapt to print text on top of slider.

public class CustomSeekBar extends SeekBar {

private Paint textPaint;

private Rect textBounds = new Rect();

private String text = "";


public CustomSeekBar(Context context) {
    super(context);
    textPaint = new Paint();
    textPaint.setColor(Color.WHITE);

}

public CustomSeekBar(Context context, AttributeSet attrs) {
    super(context, attrs);
    textPaint = new Paint();
    textPaint.setColor(Color.WHITE);

}

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


    textPaint = new Paint();
    textPaint.setColor(Color.WHITE);
        }

@Override
protected synchronized void onDraw(Canvas canvas) {
    // First draw the regular progress bar, then custom draw our text
    super.onDraw(canvas);

    // Now progress position and convert to text.
    text = Integer.toString(getProgress());

    // Now get size of seek bar.
    float width = getWidth();
    float height = getHeight();

    // Set text size.
    textPaint.setTextSize((height * 3) / 4);
    // Get size of text.
    textPaint.getTextBounds(text, 0, text.length(), textBounds);

    // Calculate where to start printing text.
    float position = (width / getMax()) * getProgress();

    // Get start and end points of where text will be printed.
    float textXStart = position - textBounds.centerX();
    float textXEnd = position + textBounds.centerX();

    // Check does not start drawing outside seek bar.
    if(textXStart < 0) textXStart = 0; 

    if(textXEnd > width)
        textXStart -= (textXEnd - width);

    // Calculate y text print position.
    float yPosition = (height / 2) - textBounds.centerY(); //- (textBounds.bottom / 2);

    canvas.drawText(text, textXStart, yPosition, textPaint);
}

public synchronized void setTextColor(int color) {
    super.drawableStateChanged();
    textPaint.setColor(color);
    drawableStateChanged();
}

}

I hope this is of use to you.

score 1 · Answer 4 · answered Jun 09 '14 at 10:30

If you want to make same look as you showing in image, you will have to provide minHeight and maxHeight both attributes for seekbar in your xml file. For example:

<SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:progressDrawable="@drawable/seek_bar"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:thumb="@drawable/thumbler_small"
    **android:minHeight = "20dp"
    android:maxHeight = "20dp"**   
    android:indeterminate="false" />

Please check attributes in above code highlighted.

score 0 · Answer 5 · answered Jul 09 '15 at 08:29

hi first create an xml file in your drawable folder(if not create a new one)
and paste this code or follow a tutorial to do this quickly as possible

repeatbottombackground.xml

     <bitmap android:dither="true" android:src="@drawable/bottom_bar_repeat" android:tilemode="repeat"      xmlns:android="http://schemas.android.com/apk/res/android">

    </bitmap>

seek_thumb.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:drawable="@drawable/seek_thumb_pressed" android:state_pressed="true" android:state_window_focused="true">

<item android:drawable="@drawable/seek_thumb_pressed" android:state_focused="true" android:state_window_focused="true">
<item android:drawable="@drawable/seek_thumb_pressed" android:state_selected="true" android:state_window_focused="true">
<item android:drawable="@drawable/seek_thumb_normal">
 </item></item></item></item></selector>

i give you a link i hope it can help you

Sorry i dont have to explain more, just follow the tutorial :)

REgards,

How to make custom seek bar in android?

5 Answers5

Linked