Geek Answers Handbook

Create a SeekBar popup in Android

I have a SeekBar in my application, and I want it to behave in such a way that when the user drags the thumb, a pop-up window appears above the thumb (and follows it when you drag the thumb), and pop-ups display the corresponding positon SeekBar (or any other text that a position may represent).

Any suggestions?

+5
source share
5 answers

The solution I found for this popup after the search bar is to put the text image in the relative layout directly above the arrow. Then, in the seekbar onProgressChange, set the corresponding textView field on the left using

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

works great, with some tweaking!

amuses

0
source

Check out the 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)); } }); } }
+1
source

The thumb is drawable, so the solution may be to place the thumb on the drawable, which includes both the thumb and the popup with text. This means that you will need a shortcut / icon for every possible value on your slider and update it every time the value changes. Looking around, I found this, which suggests that others went this way when they needed text in their drawings: Convert String to Drawable

0
source

It should be late, but I did it like that.

getting the borders of the thumb. and setting x text in progressChanged of seekbar mode

  @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); }
0
source

Here is Kotlin version of the selected answer and a bit more detailed

 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 }
0
source

More articles:


All Articles