How to display max and min values on a SeekBar?

Question

What I\'m trying to do:

1. I would like to implement a SeekBar in an Android App and on that SeekBar I would also like to display the

Answer 1

I would like to implement a seekbar in an Android App. But on the seekbar I would also like to display the max and min values. Min value would always be 0 but max value is dependent on clip length. (Example: 0---180)

Is there a way to display the value (on the seek bar itself) that is selected when the user > moves the seekbar?

If you want those values on top of the SeekBar then extend the SeekBar class and override the onDraw method. After calling super.onDraw(canvas) you can then draw your own stuff, like the min/max values at the start and end of the SeekBar or the current progress. Making something that looks good(on all the different looking Seekbars out there) will be something a bit harder as you'll need to carefully calculate where and how you draw the text.

A simpler approach would be to make a custom component wrapping the SeekBar with a TextView on it's left and right(with an optional TextView below for the current progress) and set those with the min/max values(even if the max values is set programmatically, the max TextView could be made to "follow" those changes). The progress can be easily calculated and updated knowing the width of the SeekBar and the current progress.

A small example for the second case:

public static class SeekBarWithValues extends RelativeLayout {

    private int mMax = 100;
    private TextView mMinText;
    private TextView mMaxText;
    private TextView mCurrentText;
    private SeekBar mSeek;

    public SeekBarWithValues(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(getContext()).inflate(
                R.layout.content, this);
        // the minimum value is always 0
        mMinText = (TextView) findViewById(R.id.minValue);
        mMinText.setText("0");
        mMaxText = (TextView) findViewById(R.id.maxValue);
        mCurrentText = (TextView) findViewById(R.id.curentValue);
        mSeek = (SeekBar) findViewById(R.id.seekBar);
        mSeek.setMax(100);
        mMaxText.setText(String.valueOf(mSeek.getMax()));
    }

    /**
     * This needs additional work to make the current progress text stay
     * right under the thumb drawable.
     * 
     * @param newProgress
     *            the new progress for which to place the text
     */
    public void updateCurrentText(int newProgress) {
        mCurrentText.setText(String.valueOf(newProgress));
        final int padding = mMinText.getWidth() + mSeek.getPaddingLeft();
        final int totalSeekWidth = mSeek.getWidth();
        final RelativeLayout.LayoutParams lp = (LayoutParams) mCurrentText
                .getLayoutParams();
        final int seekLocation = (mSeek.getProgress() * totalSeekWidth)
                / mMax - mCurrentText.getWidth() / 2;
        lp.leftMargin = seekLocation + padding;
        mCurrentText.setLayoutParams(lp);
    }

    public SeekBar getSeekBar() {
        return mSeek;
    }

    public void updateSeekMaxValue(int newValue) {
        mMax = newValue;
        mMaxText.setText(mMax);
        mSeek.setMax(mMax);
    }

}

Where the content layout is:

<merge xmlns:android="http://schemas.android.com/apk/res/android" >

<TextView
    android:id="@+id/minValue"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/seekBar"
    android:layout_alignParentLeft="true"
    android:layout_alignTop="@id/seekBar"
    android:gravity="center" />

<TextView
    android:id="@+id/maxValue"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/seekBar"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@id/seekBar"
    android:gravity="center" />

<SeekBar
    android:id="@id/seekBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/maxValue"
    android:layout_toRightOf="@id/minValue" />

<TextView
    android:id="@+id/curentValue"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/seekBar"
    android:gravity="center" />

The current text tends to be offseted more than it should and additional work is required to put it right under the seek handle.