Seekbar with tooltip android

Question

Hi All,

I am trying to customize android seekbar with tooltip, like the given image. Is there any way to add the textview with the thumb in seekbar. or any other idea

Thanks

Answer 1

We can do it by getting the bounds of thumb. and setting the x of textview in on progressChanged of seekbar

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
        boolean fromUser) {

    mDistance.setText("" + AppConstants.getDistance() + " miles");
    //Get the thumb bound and get its left value
    int x = mSeekBar.getThumb().getBounds().left;
             //set the left value to textview x value
    mDistance.setX(x);
}

Answer 2

Some optimizations on Bora's (great) answer:

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
        boolean fromUser) {

    mDistance.setText("" + AppConstants.getDistance() + " miles");
    float x = seekBarX
            + mSeekBar.getThumb().getBounds().left
            - toolTipTextView.getWidth()/2
            + seekBarLayoutParams.leftMargin;
    mDistance.setX(x);
}

and declare:

private RelativeLayout.LayoutParams seekBarLayoutParams;
seekBarLayoutParams = (RelativeLayout.LayoutParams) seekbar.getLayoutParams();
//or `LinearLayout` if you're using `LinearLayout`.

private float seekBarX;
int[] location = new int[2];
seekBarX = location[0];

This puts it exactly in the middle of the thumb, even if your SeekBar has a margin.

Though, it doesn't deal with Y position. To solve this, if your SeekBar has a marginTop, remove it and just add marginBottom to the element above it (in xml).

Answer 3

It was already asked. They use a TextView for this, you could use a ImageView or a custom View to fit your purpose. Check here.

Answer 4

See this example,You may get idea from this,

http://www.androidviews.net/2012/12/range-seekbar/

Answer 5

Following calculation worked for me. Pretty simple and logical.

    ViewGroup.MarginLayoutParams seekBarParams = (ViewGroup.MarginLayoutParams) seekBar.getLayoutParams();
    // Calculate x position
    float x = seekBarParams.leftMargin + seekBar.getPaddingLeft() + seekBar.getThumb().getBounds().left - tvValue.getWidth()/2;
    tvValue.setX(x);
    // Calculate y position
    float y = seekBarParams.topMargin + seekBar.getPaddingTop() - tvValue.getHeight();
    tvValue.setY(y);