Vertical Seekbar Floating text Issue

Question

I have a view with multiple vertical seekbar. I am drawing text on thumb and I want to display floating text-box above thumb while progress is changing.

We are able to display the text on top of thumb which floats while progress changes. OnStopTracking/on taking finger off from thumb floating text should not be visible.

I have added seekbar dynamically. Please find attached screenshot for how I want to implement.

Take a look at code :

Implementation of multiple seekbar :

  for (int i = 0; i <= undertimearray.length - 1; i++) {
        LayoutInflater layoutInfralte = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        final View inflatedView = layoutInfralte.inflate(R.layout.element_sliderandtext, ll_rightside, false);
        TextView submittedByTextView = (TextView) inflatedView.findViewById(R.id.txt_underseekbar);
        submittedByTextView.setText(undertimearray[i]);
        //rl_seekbarandtext=(RelativeLayout)inflatedView. findViewById(R.id.rl_seekbarandtext);
        myseekbar = (TextThumbSeekBar) inflatedView.findViewById(R.id.myseekbar);
        tvProgress = (TextView) inflatedView.findViewById(R.id.tv_progress);
        myseekbar.setMax(50);
        ll_tempvalues.post(new Runnable() {
            @Override
            public void run() {
                height = ll_tempvalues.getHeight();
             //   Log.e("TAG", "TAG" + "=height=" + height);
            }
        });
        ll_rightside.addView(inflatedView);
    }

Below is what we have tried to achieve displaying floating text above the thumb:

 myseekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            final RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(
                    RelativeLayout.LayoutParams.WRAP_CONTENT,
                    RelativeLayout.LayoutParams.WRAP_CONTENT);
            p.addRule(RelativeLayout.ALIGN_RIGHT, seekBar.getId());
            Rect thumbRect = myseekbar.getSeekBarThumb().getBounds();
            Log.v("TAG", "ThumbRect Region : " + thumbRect.centerX());
            p.setMargins(0, thumbRect.centerY() *12, 0, 0);
           // tvProgress.setPadding(thumbRect.centerY() * 2, 0, 0, 0);
            tvProgress.setVisibility(View.VISIBLE);
            tvProgress.setLayoutParams(p);
            //tvProgress.setY(progress * 10);
            tvProgress.setText(String.valueOf(progress));
            tvProgress.invalidate();
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar)
        {
        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
            tvProgress.setVisibility(View.GONE);
        }
    });

The issue we are facing is onStopTrackingTouch is not being called and due to this the progress text is not hiding. We are also not getting any status in ACTION_CANCEL inside onTouchEvent listener.

I took help of link for thumb and vertical seekbar : [Thumb link and added canvas.rotate(-90); canvas.translate(-getHeight(), 0);] for vertical seekbar1

Answer 1

It seems like you have extended the SeekBar class and created a custom SeekBar, based on the image you have shared. I have faced the same issue once with such requirement.

The solution for this is you can take a boolean flag and draw the text on canvas above thumb by adding some extra value to the value you have passed to the text being drawn on the thumb.

You may toggle the boolean value by adding below function

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
    boolean ret = super.dispatchTouchEvent(event);
    showPopup = event.getAction() != MotionEvent.ACTION_UP;
    return ret;
}

Where showPopup is the boolean value. the onDraw function will be as below

    String progressText = String.valueOf(getProgress() + 60);
    Rect bounds = new Rect();
    mTextPaint.getTextBounds(progressText, 0, progressText.length(), bounds);
    int leftPadding = getPaddingLeft() - getThumbOffset();
    float progressRatio = (float) getProgress() / getMax();
    float thumbOffset = mThumbSize * (.4f - progressRatio);
    float thumbX = progressRatio * getHeight() + leftPadding + thumbOffset;
    float thumbY = getWidth() / 2.05f + bounds.width() / 2.15f;

    canvas.drawText(progressText, thumbX - getResources().getDimension(R.dimen.s_5sp), thumbY + getResources().getDimension(R.dimen.s_5sp), mTextPaint);//Text on thumb
    if (showPopup)//Text above thumb position
        canvas.drawText(progressText, thumbX - getResources().getDimension(R.dimen.s_5sp), (thumbY + getResources().getDimension(R.dimen.s_5sp) - 40), mTextPaint);