barra de búsqueda de Android con pulgar personalizado que tiene texto dinámico en su interior

Question

Quiero crear Android personalizado SeekBar teniendo pulgar con el texto dentro de él para mostrar la posición de búsqueda actual.

Aquí está mi código:

SeekBar sb; 

@Override 
public void onCreate(Bundle savedInstanceState){ 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.custom_seek_bar_activity); 

    sb = (SeekBar)findViewById(R.id.slider); 
    sb.setMax(100); 
    sb.setProgress(10); 
    BitmapDrawable bd = writeOnDrawable(R.drawable.star2, Double.toString(50)); 

    sb.setThumb(bd); 

    sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener(){ 
     @Override 
     public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) 
     { 
      int pos = sb.getProgress(); 
      double star = pos/(20.0); 
      TextView tv = (TextView)findViewById(R.id.percent); 
      tv.setText(Double.toString(star)+"%"); 
      BitmapDrawable bd = writeOnDrawable(R.drawable.star2, Double.toString(star)); 
      bd.setBounds(new Rect(0,0, 
       bd.getIntrinsicWidth(), 
       bd.getIntrinsicHeight() 
      )); 
      seekBar.setThumb(bd); 
     } 

     @Override 
     public void onStartTrackingTouch(SeekBar arg0) { 
      // TODO Auto-generated method stub 

     } 

     @Override 
     public void onStopTrackingTouch(SeekBar arg0) { 
      // TODO Auto-generated method stub 

     } 
    }); 

} 

public BitmapDrawable writeOnDrawable(int drawableId, String text){ 

    Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true); 

    Paint paint = new Paint(); 
    paint.setStyle(Style.FILL); 
    paint.setColor(Color.BLACK); 
    paint.setTextSize(10); 

    Canvas canvas = new Canvas(bm); 
    canvas.drawText(text, 0, bm.getHeight()/2, paint); 

    return new BitmapDrawable(bm); 
} 

pero cuando muevo el pulgar se sitúa al comienzo de la barra de búsqueda. ¿Alguien tiene solución para mover el pulgar personalizado con la posición de la barra de búsqueda?

Answer 1

Obtuve la solución ahora, en el método setBound() Estaba pasando arriba a la izquierda como 0, es por eso que está mostrando la barra de búsqueda al principio. Después de hacer el siguiente cambio, conseguí que funcionara.

llamada setThumbPos() método en el caso onProgressChanged()

public void setThumbPosition(SeekBar seekBar){ 
    int max = seekBar.getMax(); 

    int available = seekBar.getWidth() - seekBar.getPaddingLeft() - seekBar.getPaddingRight(); 
    float scale = max > 0 ? (float) seekBar.getProgress()/(float) max : 0; 

    //scale = 1; 
    int pos = sb.getProgress(); 
    double star = pos/(20.0); 

    BitmapDrawable bd = writeOnDrawable(R.drawable.star2, Double.toString(star)); 

    int thumbWidth = bd.getIntrinsicWidth(); 
    int thumbHeight = bd.getIntrinsicHeight(); 
    //available -= thumbWidth; 

    int thumbPos = (int) (scale * available); 
    if(thumbPos <= 0+thumbWidth){ 
     thumbPos += (thumbWidth/2); 
    }else if(thumbPos >= seekBar.getWidth()-thumbWidth){ 
     thumbPos -= (thumbWidth/2); 
    } 

    bd.setBounds(new Rect(thumbPos,0, 
      thumbPos+bd.getIntrinsicWidth(), 
     bd.getIntrinsicHeight() 
    )); 

    seekBar.setThumb(bd); 

    TextView tv = (TextView)findViewById(R.id.percent); 
    tv.setText(Double.toString(star)+"%"); 
} 

Answer 2

utilizo SeekBar para mostrar un temporizador de cuenta atrás en mi aplicación. En el interior del pulgar temporizador muestro el número avances SeekBar actual utilizando el código de abajo:

SeekBar timerBar = (SeekBar) findViewById(R.id.seekBarTimer); 
    if (timerBar != null) { 
     timerBar.setMax((int) (Settings.countdownSeconds + 1)); 
     timerBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() { 

      @Override 
      public void onStopTrackingTouch(SeekBar arg0) { 
      } 

      @Override 
      public void onStartTrackingTouch(SeekBar arg0) { 
      } 

      @Override 
      public void onProgressChanged(SeekBar timerBar, int arg1, boolean arg2) { 
       Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.seek_thumb); 
       Bitmap bmp = bitmap.copy(Bitmap.Config.ARGB_8888, true); 
       Canvas c = new Canvas(bmp); 
       String text = Integer.toString(timerBar.getProgress()); 
       Paint p = new Paint(); 
       p.setTypeface(Typeface.DEFAULT_BOLD); 
       p.setTextSize(14); 
       p.setColor(0xFFFFFFFF); 
       int width = (int) p.measureText(text); 
       int yPos = (int) ((c.getHeight()/2) - ((p.descent() + p.ascent())/2)); 
       c.drawText(text, (bmp.getWidth()-width)/2, yPos, p); 
       timerBar.setThumb(new BitmapDrawable(getResources(), bmp)); 
      } 
     }); 
     timerBar.setProgress(0); 
    } 

El dibujable R.drawable.seek_thumb es mi pulgar estirable.

Answer 3

Terminé usando esta solución simple. Probablemente no sea como de alto rendimiento, como por ejemplo una SeekBar personalizada adecuada, sin embargo, es muy fácil de conectar a un diseño existente, y utilizar cualquier etiqueta u otra vista en la parte superior del pulgar de SeekBar.

protected void positionThumbLabel(SeekBar seekBar, TextView label) 
{ 
    Rect tr = seekBar.getThumb().getBounds(); 
    label.setWidth(tr.width()); 
    label.setX(tr.left + seekBar.getPaddingLeft()); 
} 

Con algunos cambios de menor importancia se puede posicionar una superposición con respecto al centro del pulgar:

protected void positionThumbOverlayCenter(SeekBar seekBar, View overlay) 
{ 
    Rect tr = seekBar.getThumb().getBounds(); 
    overlay.setX(tr.centerX() - (overlay.getWidth() * 0.5f) + seekBar.getPaddingLeft()); 
} 

Answer 4

Escoja una solución que se ajuste a su situación aquí: http://www.helptouser.com/code/10722746-add-dynamic-text-over-android-seekbar-thumb.html