How to make custom seek bar in android?

Mehul Ranpara picture Mehul Ranpara · Feb 21, 2013 · Viewed 29.1k times · Source

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

Answer

Edward van Raak picture Edward van Raak · Feb 21, 2013

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...