Creating a SeekBar position popup in Android

Question

I have a SeekBar in my application, and I want it to behave so that when the user is dragging the 'thumb', a Popup appears above the thumb (and follows it as the thumb is dragged), and the Popup displays the corresponding positon of the SeekBar (or any other text that position may represent).

Any suggestions?

score 2 · Answer 1 · answered May 27 '15 at 10:09

Check out this blog

@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
   // TODO Auto-generated method stub
        RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(
        RelativeLayout.LayoutParams.WRAP_CONTENT,
        RelativeLayout.LayoutParams.WRAP_CONTENT);
        p.addRule(RelativeLayout.ABOVE, seekBar.getId());
        Rect thumbRect = bar.getSeekBarThumb().getBounds();
        p.setMargins(
        thumbRect.centerX(),0, 0, 0);
        textView.setLayoutParams(p);
        textView.setText(String.valueOf(progress));
    }
  });
 }
}

score 0 · Answer 2 · answered Oct 22 '13 at 07:50

This must be late however i did it like this .

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

It would be useful if you can post a complete answer, e.g. what is `mDistance`, `AppConstants.getDistance()` etc. Thanks! — Tanasis, Feb 23 '19 at 20:02

score 0 · Answer 3 · answered Jun 12 '19 at 23:19

Here's the Kotlin version of the chosen answer and a bit more detail

override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
    txtSeekMonthsPopup.text = progress.toString()
    val params: RelativeLayout.LayoutParams = 
    txtSeekMonthsPopup.layoutParams as RelativeLayout.LayoutParams
    val existingMargin = params.marginStart
    params.marginStart = (seekBar?.thumb?.bounds?.left?: existingMargin) + 20 // 20 makes the text view more centered on the thumb
}

score 0 · Answer 4 · edited May 23 '17 at 11:53

0

The thumb is a drawable, so a solution could be to set the thumb to a drawable that includes both thumb and popup with text. That means you would need a drawable/icon for each possible value on your slider, and update it every time the value changes. Looking around I found this, which suggests that others have gone that way when they needed text in their drawables: Convert String to Drawable

edited May 23 '17 at 11:53

Community

1
1

answered Jun 29 '11 at 19:16

Marmoy

8,009
7
46
74

THat's actually not going to work for my project, because the seek bar corresponds to a position in a book, of which there might be 1000s of different possibilities... – Andrew Jun 29 '11 at 22:07
@Andrew: I see, well, I'm looking forward to see a better answer, it is an interesting question. – Marmoy Jun 30 '11 at 06:23

score 0 · Accepted Answer · answered Jun 30 '11 at 22:07

0

The solution I found for this popup following the seek bar is to put the textview in a relative layout right above the seekbar. Then, in seekbar's onProgressChange, set the textView's left margin accordingly using

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(widht, height)
params.setLeftMargin(margin)

works great, with some tweaking!

cheers

answered Jun 30 '11 at 22:07

Andrew

2,898
4
25
23

How did you wind up calculating the Margin? – JRaymond Apr 04 '12 at 23:48
there is no setLeftMargin method – GOLDEE Oct 16 '13 at 07:23

Creating a SeekBar position popup in Android

5 Answers5