How to make custom seek bar in android?

Question

I want to make customer seek bar like this image:

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

Answer 1

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.

Answer 2

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.