CODEWITHSUNDEEP
androidseekbar
Bora
Bora

Reputation: 1925

Seekbar with tooltip android

enter image description here

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

Upvotes: 3

Views: 7163

Answers (4)

Farhan
Farhan

Reputation: 3363

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);

Upvotes: 2

Alaa M.
Alaa M.

Reputation: 5273

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

Upvotes: 5

Bora
Bora

Reputation: 1925

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);
}

Upvotes: 19

paulgavrikov
paulgavrikov

Reputation: 1891

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.

Upvotes: 1

Related Questions